TypeScript Day 2 — Compiler options

Jeacson She9/11/22...About 3 min

3. Compiler options

3.1 Compile files automatically

When compiling a ts file, if you add the -w flag after the filename, the TS compiler goes into watch mode, automatically keeps an eye on the file and recompiles it whenever it changes. (Kind of the same watch behaviour as npm run serve starting the dev server in vue-cli.)
Example:
- ```
tsc xxx.ts -w
```

3.2 Compile the whole project automatically

If we run the tsc command straight from the command line, in theory we can have the compiler turn every ts file under the current project into a js file.
But before using the tsc command directly, we first have to create a ts config file, tsconfig.json, in the project root before any of that works.
tsconfig.json is a JSON file; once the config file is added, simply running the tsc command compiles the whole project

3.2.1 Config options

include
- Defines the directories the files you want compiled live in
- Default: ["*.*/*"]
- Example:
  - ```
  "include":["src/**/*", "tests/**/*"]
```
- In the example above, every file in the src and tests directories gets compiled
exclude
- Defines the directories to leave out
- Default: ["node_modules", "bower_components", "jspm_packages"]
- Example:
  - ```
  "exclude": ["./src/hello/**/*"]
```
- In the example above, files under the hello directory inside src are not compiled
extends
- Defines the config file being inherited
- Example:
  - ```
  "extends": "./configs/base"
```
- In the example above, the current config file automatically picks up all the config from base.json in the config directory

files (not often used)

Specifies the list of files to compile, only worth it when there are few files to compile

Example:

"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]

Every file in the list is compiled by the TS compiler

compilerOptions (important!)
- Compiler options are a very important and fairly complex bunch of config options in the config file
- compilerOptions holds many sub-options that do the actual compile configuration
- The project options are:
1. target
- Sets the target version the ts code is compiled to
- Possible values:
  - ES3 (default), ES5, ES6, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext
- Example:
  - ```
  "compilerOptions": {
      "target": "ES6"
  }
```
- With the setting above, the ts code we write gets compiled into ES6 js code
1. lib
- Specifies the libraries (host environment) available when the code runs
- Normally you don't need to touch this option; you only change it when the runtime is not the browser (node.js, say)
- Possible values:
  - ES5, ES6/ES2015, ES7/ES2016, ES2017, ES2018, ES2019, ES2020, ESNext, DOM, WebWorker, ScriptHost ......
- Example:
  - ```
  "compilerOptions": {
      "lib": ["ES6", "DOM"],
  }
```
1. module
- Sets the module system the compiled code uses
- Possible values:
  - CommonJS, AMD, System, UMD, ES6, ES2015, ES2020, ESNext, None, ES2022, Node16, NodeNext
- Example:
  - ```
  "compilerOptions": {
      "module": "CommonJS"
  }
```
1. outDir
- The directory the compiled files go into
- By default the compiled js file sits in the same directory as the ts file; setting outDir moves the output elsewhere
- Example:
  - ```
  "compilerOptions": {
      "outDir": "dist"
  }
```
- With that set, the compiled js files land in the dist directory
1. outFile (not used much)
- Compiles everything into a single js file
- By default all code written in the global scope is merged into one js file; only when module is set to None, System or AMD for the compiled output can modules be merged into the file too, otherwise you get an error. It depends on the option, really
- Example:
  - ```
  "compilerOptions": {
      "outFile": "dist/app.js"
  }
```
1. rootDir
- Specifies the root directory of the code; by default the directory structure of the compiled files takes the longest common directory as its root, and rootDir lets you set the root by hand
- Example:
  - ```
  "compilerOptions": {
      "rootDir": "./src"
  }
```
1. allowJs
- Whether to compile js files
1. checkJs
- Whether to type-check js files
- Example:
- ```
 "compilerOptions": {
     "allowJs": true,
     "checkJs": true
 }
```
1. removeComments
- Whether to strip comments
- Default: false
10.1 noEmit
- Never emit the compiled files, whether or not the code has errors
- Default: false
10.2 noEmitOnError
- Do not emit the compiled files when the code has errors
- Default: false
1. sourceMap
- Whether to generate a sourceMap
- Default: false
1. Strict syntax checks
  Note: unless marked otherwise, all the options below default to: false
- strict
  - Turns on every strict syntax check; its default value is true, and setting it to true turns on all the strict checks
- alwaysStrict
  - Whether the compiled files use strict mode
  - Note: when a code block references a module, the compiled file automatically uses strict mode
- noImplicitAny
  - Forbids implicit any types
- noImplicitThis
  - Forbids a this of unclear type
  - Once on, functions must specify this (Window or some function body, etc.)
- strictBindCallApply
  - Strictly checks the argument lists of bind, call and apply
- strictFunctionTypes
  - Strictly checks function types
- strictNullChecks
  - Strict null checks
- strictPropertyInitialization
  - Strictly checks whether properties are initialised
- Extra checks
  - noFallthroughCasesInSwitch
    - Checks that switch statements contain the right break
  - noImplicitReturns
    - Checks for functions with no implicit return value
  - noUnusedLocals
    - Checks for unused local variables
  - noUnusedParameters
    - Checks for unused parameters
- Advanced
  - allowUnreachableCode
    - Checks unreachable code
    - Possible values:
      - true, ignore unreachable code
      - false, unreachable code raises an error

Important

This article was translated by Hermes Agent; the original text can be found at here. The translation is for reference only. Translation time: 2026-11-05