A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 29th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

Today we will focus on the compilation options for TS

Compile the TS

Auto-compile file

When compiling a file, using the -w command, the TS compiler automatically monitors the file for changes and recompiles the file if it changes.

tsc xxx.ts -w
Copy the code

Compiling file by file is too cumbersome, we can compile the entire project

Automatically compile the entire project

Json: tsconfig.json: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC: TSC

Let’s look at some configuration options in the tsconfig.json file

Configuration options

The overview

{
  "compilerOptions": {
    "target": "es5".// Specify ECMAScript target version: 'ES5'
    "module": "commonjs".// Specify the module to use: 'commonJS ',' AMD ', 'system', 'umd' or 'es2015'
    "moduleResolution": "node".// Select the module resolution policy
    "experimentalDecorators": true.// Enable experimental ES decorator
    "allowSyntheticDefaultImports": true.// Allow default imports from modules that do not have default exports set.
    "sourceMap": true.// When compiling ts files into js files, generate the corresponding map file
    "strict": true.// Enable all strict type checking options
    "noImplicitAny": true.// There is an error with an implied any type on expressions and declarations
    "alwaysStrict": true.// Check modules in strict mode and add 'use strict' to each file
    "declaration": true.// Generate the corresponding.d.ts file
    "removeComments": true.// Delete all comments after compilation
    "noImplicitReturns": true.// Not all return paths of the function have return value error
    "importHelpers": true.// Import helper functions from tslib
    "lib": ["es6"."dom"].// Specify the library file to be included in the build
    "typeRoots": ["node_modules/@types"]."outDir": "./dist"."rootDir": "./src"
  },
  "include": [  
    "./src/**/*.ts"]."exclude": [
    "node_modules"."dist"."**/*.test.ts"]},Copy the code

1) include

important

• Is an array that specifies the TS files to compile, where * represents any file and ** represents any directory

• Default value: [“**/*”]

"include": ["src/**/*"."test/**/*"] // All files in the SRC and test directories are compiled
Copy the code

(2) the exclude

• Define file directories that do not need to be compiled

• Default: [“node_modules”, “boWER_components “,” jSPM_packages “] default: [“node_modules”, “bower_components”, “jSPM_packages “]

"exclude": ["./src/hello/**/*"]  // SRC files in the hello directory will not be compiled
Copy the code

(3) extends

• Define inherited configuration files

"extends": "./configs/base" // The current configuration file automatically contains all the configuration information in base.json in the config directory
Copy the code

(4) files

• Specifies a list of files to compile, used only when there are fewer files to compile

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

• The files in the list are compiled by the TS compiler

(5) compilerOptions

Important compilerOptions, containing suboptions to configure compilerOptions

We can write any of the optional values for these options, and the editor will prompt us for the optional values

(1) the target

• Sets the target version for ts code compilation

• Optional value: “ES3” (the default), “ES5”, “ES6”, “ES2015”, “ES2016”, “ES2017”, “ES2018”, “ES2019”, “ES2020”, “ES2021”, “ESNext”.

"compilerOptions": {
    "target": "ES6"
}
Copy the code

• As set up above, the TS code we wrote will compile to the ES6 version of JS code

(2) the lib

• Specify the libraries (host environment) that the code runtime contains

• Optional value: “ES5”, “ES6”, “ES2015”, “ES2015.Collection”, “ES2015.Iterable”, “ES2015.Promise”, “DOM”, “DOM.Iterable”, “ScriptHost”, “WebWorker”, “WebWorker.ImportScripts”……

"compilerOptions": {
    "lib": ["ES6"."DOM"]}Copy the code

In general, if you’re running in a browser environment, you don’t need to set this up yourself

(3) the module

• Sets up the modular system used by compiled code

• Optional value: “CommonJS”, “AMD”, “System”, “UMD,” “ES6”, “ES2015”, “ES2020”, “ESNext”, “None”, “es2022”, “node12”, “nodenext”

"compilerOptions": {
    "module": "CommonJS"
}
Copy the code

(4) outDir

• The directory where the compiled file resides

• By default, compiled JS files are located in the same directory as ts files. Setting outDir can change the location of compiled files

"compilerOptions": {
    "outDir": "./dist"
}
Copy the code

• The compiled JS file will be generated in the dist directory. You can store the source code separately from the compiled code

(5) outFile

• Compile all files into a JS file

• By default, all code written in the global scope is merged into a JS file, and modules are merged together if the Module specifies None, System, or AMD

"compilerOptions": {
    "outFile": "./dist/app.js"
}
Copy the code

This is the kind of merging that we should leave to the packaging tool, as we’ll see later

6 rootDir

• Specify the root directory for your code. By default, the compiled file’s directory structure takes the longest public directory as the root directory. You can specify the root directory manually using rootDir

"compilerOptions": {
    "rootDir": "./src"
}
Copy the code

7 Other Configurations

⑧ Strict inspection

⑨ Additional Check

Finally, welcome to my column and make friends with YK bacteria