How to generate a tsconfig.json file in TypeScript

avatar
Borislav Hadzhiev

Last updated: Jan 24, 2023
2 min

banner

# 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 with 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:

shell
# ๐Ÿ‘‡๏ธ install typescript globally npm install typescript@latest -g # ๐Ÿ‘‡๏ธ generate tsconfig.json file tsc --init

issue tsc init command

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 (macOS and Linux) or open CMD as an administrator (Windows).
shell
# ๐Ÿ‘‡๏ธ 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.

shell
tsc --version

checking if installation has succeeded

# Installing typescript locally instead

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

shell
# ๐Ÿ‘‡๏ธ 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.

# Changing the default config

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:

tsconfig.json
{ "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.

shell
tsc src/index.ts

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

The filenames or specified pattern is resolved relative to the directory that 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.

Copyright ยฉ 2023 Borislav Hadzhiev