Configuration for tsconfig.json

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

Paypal.

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.