How to generate a tsconfig.json file


Borislav Hadzhiev

Last updated: Mar 26, 2022


Photo from Unsplash

Generate a tsconfig.json file #

To generate a tsconfig.json file:

  1. Open your terminal in your project's root directory.
  2. Install typescript globally: npm install typescript@latest -g.
  3. Generate a tsconfig file by running: tsc --init.

Open your terminal in your project's root directory (where your package.json file is located) and run the following commands:

# 👇️ install typescript globally npm install typescript@latest -g # 👇️ generate tsconfig.json file tsc --init

The first command installs the latest version of the typescript package globally and the second generates a tsconfig.json file.

If the global installation of typescript fails, you might have to run the command prefixed with sudo.
# 👇️ If you got permissions error, run with sudo sudo npm install typescript@latest -g tsc --init

If you are able to run the tsc --version command and get the version number of the typescript package, then the installation has succeeded.

tsc --version

Alternatively, you can install typescript locally and generate a tsconfig.json file from the local installation.

# 👇️ install typescript locally npm install --save-dev typescript # 👇️ generate tsconfig.json file tsc --init

The tsc --init command generates a tsconfig.json file, which indicates that the directory is the root of a TypeScript project.

The default tsconfig.json file sets a few options in the compilerOptions object and has comments for what each option does.

If you need to change the default config, you can get additional information about each option by visiting the tsconfig.json reference page.

For example, if you are generating a tsconfig.json for a Node.js project, your file might end up looking something like the following:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "moduleResolution": "node", "rootDir": "src", "outDir": "build", "lib": ["ES2022"], "strict": true, "esModuleInterop": true, "allowJs": true, "checkJs": false, "resolveJsonModule": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, }, "include": ["src/**/*"], "exclude": ["node_modules"] }

This configuration assumes that you have an src directory in the root directory of your project.

You can create an index.ts file in the src directory and run the tsc src/index.ts command to transpile it to JavaScript.

The example above uses the include option to specify a pattern to include in the codebase.

The filenames or specified pattern is resolved relative to the directory, which contains your tsconfig.json file.

The exclude array contains filenames or patterns that should be skipped when resolving the include array.

The exclude option changes what the include option finds, effectively filtering out some folders or files from compilation.

If you don't explicitly add the exclude array in your tsconfig.json file, it defaults to node_modules, bower_components and jspm_packages.

The target option sets the language version for the emitted JavaScript files.

All modern browsers (and Node.js) support all ES6 features. For example, when your target option is set to something older than{' '} es6 (e.g. es5), TypeScript has to transpile your classes to functions.

You can read more about each option in the tsconfig.json reference page.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.