Configuration for tsconfig.json
Tags: typescript
Published: 2021-08-30 16:43:41

## 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](https://www.npmjs.com/package/@tsconfig/recommended) by running
``` bash
# 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](https://www.npmjs.com/package/module-alias), We can make importing modules much more readable, and [tsconfig-paths](https://www.npmjs.com/package/tsconfig-paths) to load configed paths when starting server

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiyzocka88d894hgi2st.png)
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](https://www.typescriptlang.org/tsconfig). Or you can [playaround](https://www.typescriptlang.org/play?removeComments=true&importHelpers=true&target=2&jsx=0&module=5&pretty=true&ts=4.3.5#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCoASMFmgY7p7ehCTkVOle4jUMdRLYTqCc8LEZzCZmoNJODPHFZZXVtZYYkAAeRJTInDQS8po+rf40gnjbDKv8LqD2jpbYoACqAEoAMsK7sUmxkGSCc+VVQQuaTwVb1UBrDYULY7PagbgUZLJH6QbYmJAECjuMigZEMVDsJzCFLNXxtajBBCcQQ0MwAUVWDEQNUgADVHBQGNJ3KAALygABEAAkYNAMOB4GRogLFFTBPB3AExcwABT0xnM9zsyhc9wASmCKhwDQ8ZC8iElzhB7Bo3zcZmY7AYzEg-Fg0HUiS58D0Ii8AoZTJZggFSRxAvADlQAHJhAA5SASAVBFQAeW+ZF2gldWkgx1QjgUrmkeFATgtOlGWH0KAQiBhwiudokkuiIgMHBx3RYbC43CCJSAA) here, just basically tick/untick options on the `TS Config` tab, the result will be shown in the right panel.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o03z9lssyxnbyhbvewz7.png)

_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_

[Paypal](https://paypal.me/DantisMai).

_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._