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.

Confi…


This content originally appeared on DEV Community and was authored by Dantis Mai

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.

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

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.


This content originally appeared on DEV Community and was authored by Dantis Mai


Print Share Comment Cite Upload Translate Updates
APA

Dantis Mai | Sciencx (2021-08-30T16:43:41+00:00) Configuration for tsconfig.json. Retrieved from https://www.scien.cx/2021/08/30/configuration-for-tsconfig-json/

MLA
" » Configuration for tsconfig.json." Dantis Mai | Sciencx - Monday August 30, 2021, https://www.scien.cx/2021/08/30/configuration-for-tsconfig-json/
HARVARD
Dantis Mai | Sciencx Monday August 30, 2021 » Configuration for tsconfig.json., viewed ,<https://www.scien.cx/2021/08/30/configuration-for-tsconfig-json/>
VANCOUVER
Dantis Mai | Sciencx - » Configuration for tsconfig.json. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/30/configuration-for-tsconfig-json/
CHICAGO
" » Configuration for tsconfig.json." Dantis Mai | Sciencx - Accessed . https://www.scien.cx/2021/08/30/configuration-for-tsconfig-json/
IEEE
" » Configuration for tsconfig.json." Dantis Mai | Sciencx [Online]. Available: https://www.scien.cx/2021/08/30/configuration-for-tsconfig-json/. [Accessed: ]
rf:citation
» Configuration for tsconfig.json | Dantis Mai | Sciencx | https://www.scien.cx/2021/08/30/configuration-for-tsconfig-json/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.