TypeScript Compiler Configuration | tsconfig.json file example

TypeScript Compiler Configuration | tsconfig.json file example

The TypeScript configuration file (tsconfig.json) is a JSON file located in the root of a project, used to indicate that it’s a TypeScript project. It provides configuration settings for the TypeScript compiler to generate JavaScript.

To generate a tsconfig.json file, you can refer to how to generate tsconfig.json file

TypeScript Configuration File

Every TypeScript project contains a tsconfig.json file in its root directory, abbreviated as tsconfig, which holds all the configuration parameters required for the TypeScript compiler.

Angular 2+ projects, being based on TypeScript, also include this file in their root directory.

Since browsers cannot understand TypeScript directly, a process called compile/transpile is used to convert TypeScript code to JavaScript. All configuration parameters specified in the tsconfig.json file are considered during this compilation phase.

The TypeScript compiler (tsc) becomes available once TypeScript is installed, either locally or globally.

TypeScript files can be generated using the tsc command or the Angular CLI tool.

For instance, to initialize a configuration file, you can run:

You can check other post on Fix for Object is possibly null

tsc command to create a configuration file

tsc --init

This creates a configuration file in the root directory with basic options.

Below is a sample tsconfig.json file:

Here is a sample tsconfig.json file

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

Angular CLI TypeScript Compiler Options

Angular CLI is a tool used to quickly set up Angular applications without the need to manually write files. It generates a TypeScript configuration file in the project root directory.

with just one command, Your application prototype source code is available. This tool also generates a typescript configuration file in the project root directory. Let’s explore some of the compiler options available:

  • target option: Typescript compiles into javascript. There are different versions of javascript - ES5, ES6, and ES7. This option provides compatible generated files specific to the corresponding target javascript version. And possible values are ES3 - Default, ES5, ES6(ES2015), ES2016, ES2017, ESNEXT.

  • Module Option:

This option is to generate code using modules.

Modules are of different types like CommonJS, None, System, UMD, AMD, ES6.

Default options are CommonJS if the target is specified as ES3 or ES5, else ES6 is the default module.

  • experimentalDecorators option: Every Javascript version such as ES2022 proposed experimental decorators which are new features and have yet to be accepted and put into production. if we are using those decorators in typescript source code, It will throw an error.

This option enables the typescript compiler to ignore the error. By default it is false.

  • emitDecoratorMetadata option:

This option is needed for decorators’ metadata. Default is false. Metadata is a feature in ES2017 specs and to tell about runtime information of class, method, or function.

metadata is typescript reflection API which provides information about decorators.

This option will preserve type information in your object’s metadata.

  • compileOnSave option:

This option is not related to typescript, but IDEs such as visual studio, web storm, and atom editors. When this option is set to true, any changes made to Typescript files in IDE are automatically saved and compiled to javascript code.

  • baseUrls/path option:

This option allows typescript to pick type files from this location.

  • alwaysStrict option

This option allows enabling type-safe checking. The compiler compiles all typescript files with strict mode and emits warnings if any. In each file, It includes ‘use Strict’ in each javascript-generated file.

  • sourceMap option Default is false. if true, generate source maps for debugging purposes.

  • AllowJS Option This option allows Javascript source code to be compiled as part of the transpiler process. The default is false.

  • strictNullChecks option: when strictNullChecks=false, the below code works and null and undefined types can be assigned to number types.

let numberVariable: number = 45;
numberVariable = null; // no issues
numberVariable = undefined; // no issues

when strictNullChecks=true, the below code does not work

let numberVariable = undefined;
numberVariable = null; // As undefined and null are different

  • outDir option This option allows the compiler generate output files in this directory.

  • removeComments option The default is false. remove comments from generated source files.

  • Include and Exclude options This Include option will allow adding these files for the compilation of source code. Similarly, we can specify files to be excluded from a compilation of code.

{
    "include": [
        "src/main/webapp/app",
        "src/main/webapp/app/app.main.ts",
        "src/test/javascript/"
    ],
    exclude": [
        "node_modules",
    ]
}

Conclusion

Learn typescript configuration files with different options examples, sample files, and tsc command usage