Why we need it?
Technically, our machines cannot understand Typescript (TS), so they need to convert Typescript into another form, Javascript.
Thank the configuration file tsconfig.json
, we can control complier process output.
Configuration
My configuration
The configuration below is an example that I use for most of my TS projects.
{
"extends": "@tsconfig/recommended/tsconfig.json",
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"allowJs": true,
"importHelpers": true,
"jsx": "react",
"alwaysStrict": true,
"sourceMap": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitAny": false,
"noImplicitThis": false,
"strictNullChecks": false,
"outDir": "./build",
"baseUrl": ".",
"paths": {
"@server/*": ["src/*"],
"@tests/*": ["__tests__/*"],
"@config/*": ["src/config/*"],
"@domain/*": ["src/domain/*"],
"@controller/*": ["src/controller/*"],
"@middleware/*": ["src/middleware/*"]
}
},
"include": ["src/**/*", "__tests__/**/*"],
"exclude": ["node_modules", "build"]
}
To Use
We just copy it to tsconfig.json
at root level, and don't forget to install @tsconfig/recommended by running
# for npm
npm install --save-dev @tsconfig/recommended
#for yarn
yarn add --dev @tsconfig/recommended
Notes: In the configuration above, the part paths
is the option that I recommend most. Combining with module-alias, We can make importing modules much more readable, and tsconfig-paths to load configed paths when starting server
As you can see in the image, instead of using ../../config/logger
, I just simply use @config/logger
.
Other options
For meaning and other options can be found on tsconfig.json documentation. Or you can playaround here, just basically tick/untick options on the TS Config
tab, the result will be shown in the right panel.
This post is the first step for my series 'Create Your Own TypeScript Express Template', which can help you save pretty much time whenever you want to set up a new Typescript project. If you had a chance to do it, you would know how painful it is
I hope this article was helpful to you. I would be more than happy to receive your feedback on this article. Thanks for your precious time reading this.
Top comments (0)