How to generate a tsconfig.json file in TypeScript

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

Copied!
# 👇️ install typescript globally
npm install typescript@latest -g

# 👇️ generate tsconfig.json file
npx tsc --init

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

Copied!
# 👇️ If you got permissions error, run with sudo
sudo npm install typescript@latest -g

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

Copied!
npx tsc --version

# Installing typescript locally instead

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

Copied!
# 👇️ install typescript locally
npm install --save-dev typescript

# 👇️ generate tsconfig.json file
npx tsc --init

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

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

Copied!
{
  "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.

Copied!
npx tsc src/index.ts

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

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

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 on the tsconfig.json reference page.