preface

The previous development is in scaffolding, almost zero configuration, only need to know the GRAMMAR of TS can completely develop THE TS project, this time I have a TS project from scratch, found that there are still a lot of holes in the configuration, so it is better to look at the specific method and documentation, so summed up this article. Trust me, my understanding of the system will be different from that of using scaffolding directly. This article mainly from the simple way to understand the tsconfig. Json is stem what of, how to use, combined with webpack there will be some common pit and some commonly used configuration, combined with the document to see the effect is much better www.typescriptlang.org/v2/en/tscon… As it is the first time to write an article, there will be some loose or bad places, please point out suggestions, thank you ~

what

Table of rules to follow at compile time

why

In the absence of tsconfig, we can do this from the command line

tsc --outFile file.js --target es3 --module commonjs index.ts

Compile index.ts into file.js in the root directory using es3 code and commonjs

  1. There are a lot of cases where you need to compile a tuner.
  2. In team work situations (people need to have a common code)

how

Pure manual imperative

As stated above, you have to hit a lump

Configuration file imperative

  • Not explicitly specifiedtsconfig.json, the compiler will search from the current path until it finds the tsconfig.json fileSimilar to require,import does not write specific path lookup rules
  • through--project(or abbreviations-p) specifies a containtsconfig.jsonPath, andImport,require a relative path

Specific parameters in the configuration file

There are many parameters in the configuration file, and some of the specific scenarios are quite abstract. Here are unified examples

The tsconfig.json file can be divided into two parts. The first part is to configure the compiled rules (compilerOptions) and the second part is to compile the files (files,include,exclude).

Examples of the most commonly used structural code are as follows:

{
    "compilerOptions": {},
    "files": [], 
    "include": [],
    "exclude": [] 
}
Copy the code

compilerOptions

As the name implies, it is a compilation rule. The following details some common configurations

files

The usage is very simple, is an array, the elements of the ts file to compile, as shown in the following figure.

Files are files that need to be compiled according to the above compilation rules, for example

The rule for compilerOption is to apply to index.ts, so I’ll get an error if I write this

Therefore, it is concluded that file is suitable for relatively small projects, specifying several specific files.

One last detail, file is just an entry file. For example, test relies on a rely. Ts file. Run TSC in the current directory for comparison

What about projects with a lot of files? Include and exclude will come in handy

include && exclude

Include and exclude(or exclude) can be used in combination when there are many files, for example, only SRC files with except are compiled, as shown in the following figure:

What happens when you type TSC in the project root directory?

You will find that there is no file to compile except. Ts

Pay attention to

When using webpack package and exposed the bundle file can produce conflict and tsconfig, because they are both compile/packaging files, so want to be in tsconfig. Add to exclude webpack json pack to the specified path, understood as shown in figure:

Diverting the comments solves this problem

PS

  • Include and file can be used together
  • Exclude is valid only for include, not files
  • If files and include are not set, the compiler will include all TS files in the path by default, except for files excluded

Several common build configurations

allowJs

Allows compiling js files

sourceMap

Generate a.map.js file for other tools to debugg, similar to WebPack sourceMap

noImplicitAny

It is not allowed to use any. If you are learning TS for the first time, it is recommended that the project department be too complicated. You can use this to limit your understanding of TS

module && target

These two are related to each other

Target is what version of JS is compiled into (ES3, ES5, ES6…)

The generated form of the Module template. By default, when target is ES3, the module defaults to CommonJS, otherwise es6.

Note (used with outFile) : Generated module form: None, CommonJS, AMD, System, UMD, ES6, ES2015 or ESNext Only AMD and System can use ES6 and ES2015 with outFile when target is ES5 or lower

lib

Introduce ES libraries, such as new data structures such as Set and Map in JS, or promise in a project, and introduce ES2015 in lib

removeComments

Whether compiled files are annotated or not. False reduces the size of compiled files

allowSyntheticDefaultImports

This configuration is very important, if you do not know will be very puzzled, it is not easy to check why the error is reported

When it is false, modules must be introduced as *as, such as react

import * as React from 'react'

When true

Import React from ‘React’ but note that it should be used when module is in esModule format or –esModuleInterop is true because React is written by CommonJS, Import React from default. blog.leodots. Me /post/40-thi…

jsx

If you are using TSX files (react-ts) then this should be configured as JSX :” React”

baseUrl

Here’s an example:

The SRC directory in the root directory has a hello folder, where Hello contains world.ts

Under app.ts in the root directory

import { example } from "./src/hello/world"

When the baseUrl: ‘. / SRC ‘

Import {example} from “hello/world”

paths

Paths must be used in conjunction with baseUrl above, for example:

But one thing in particular must be noted:

If you use Webpack and use alias, then baseUrl will not work and paths will not work. Paths can be configured to be the same as aliases. In vscode, paths will be automatically prompted