tsconfig.json
React¹⁷.0.2, Typescript⁴.1.2, Created at July 21, 2021, Read Series…
The tsconfig.json
file specifies the root files and the compiler options required to compile the project. A few key features are explained in this section.
{
"compilerOptions": {
"target": "es5",
"lib": [
"es6",
...
],
"baseUrl": ".",
...
},
"exclude": [
"node_modules",
"build",
"**/*.spec.ts",
...
],
"include": [
"src",
"src/**/*"
]
}
compilerOptions/target:es5 and compilerOptions/lib:[es6]
[Try to understand] target/es5: ECMAScript 2009. Use es5 as build target to support new more browsers and versions. You can change to es6 if you don’t want support lower version browsers.
[Try to understand] lib/es6: ECMAScript 2015 or es2015. Use es6 as lib to utilize more JavaScript packages and built-in features.
| |Chrome |IE |Edge |Firefox |Safari |Opera |
+===+=========+=======+=========+=========+=========+=========+
|ES5|All |IE 9.0 |All |All |All |All |
+---+---------+-------+---------+---------+---------+---------+
|ES6|v58/2017 |No |v14/2016 |v54/2017 |v10/2016 |v55/2018 |
compilerOptions/baseUrl
[Try to understand] compilerOptions/baseUrl option is helping shorten deep path of Node.js modules.
[Try to understand] The tsconfig.json folder will be the root folder if baseUrl set to ‘.’.
// in index.tsx
import theme from './theme';
// is equivalent to:
import theme from 'src/theme';
In most of the cases, we can have src/somefolder/somemodel.ts
// e.g. src/somefolder/somemodel.ts, referenced in src/a/b/c/d.ts
import somemodelname from '../../../somefolder/somemodel';
// is equivalent to:
import somemodelname from 'src/somefolder/somemodel';
exclude/include
[Try to understand] include will include folders/files in compilation process.
[Try to understand] exclude will exclude folders/files in compilation process.
You can use:
— fixed path/filename: e.g. node_modules
— *
matches zero or more characters (excluding directory separators)
-?
matches any one character (excluding directory separators)
-**/
recursively matches any subdirectory