1. TypeScript official website
Two, environment construction
Programs written in TypeScript cannot be run directly through the browser. We need to compile the TypeScript code into JavaScript code through the TypeScript compiler. The TypeScript compiler is based on Node.js, so we need to install Node.js first.
Three, install Node.js
Node official website: https://nodejs.org
After the installation is complete, you can call node through command-line tools such as terminal or cmd
// 查看当前 node 版本
node -v
Fourth, install the TypeScript compiler
Install TypeScript compiler via NPM package management tool
npm i -g typescript
After the installation is complete, we can call the compiler through the command tsc
// 查看当前 tsc 编译器版本
tsc -v
Five, write code
[1] Create a folder
We first create a demo folder, add the src folder under the demo file, by default, the suffix of the TypeScript file is .ts, and add a hello.ts file under the src file
[2] Write code
Add the following code under the hello.ts file
// ./src/hello.ts
let str: string = 'hello world';
Use our installed TypeScript compiler tsc to compile .ts files
By default, a js file with the same name will be generated in the directory where the current file is located
Six, commonly used compilation options
The compilation command tsc also supports many compilation options, here I will first understand a few of the more commonly used
Specify the compiled file output directory, the following code indicates that the output directory is dist
tsc --outDir ./dist ./src/hello.ts
Specify the target of the compiled code version, the default is ES3, the following code indicates that the target of the compiled code version is es6
tsc --outDir ./dist --target ES6 ./src/hello.ts
Run in monitor mode, automatically compile when the file changes
tsc --outDir ./dist --target ES6 --watch ./src/hello.ts
Through the above few examples, we can basically understand the use of tsc , but everyone should have also discovered that it is actually very cumbersome to enter such a large number of options for each compilation. Fortunately, TypeScript compilation provides us with a more powerful In a convenient way, compile the configuration file:, tsconfig.jsonwe can save the above compilation options to this configuration file
Seven, compile the configuration file
We create a file in the root directory and tsconfig.json文件，save some of the compiled options in this jsonfile. By default, when the tsc command is run, it will automatically load the tsconfig.json file in the directory where the command is run . The configuration file format is as follows
{
"compilerOptions": {
"outDir": "./dist",
"target": "ES2015",
"watch": true,
},
"include": [ "./src/**/*" ] // **代表所有目录（包括子目录） *代表所有文件
}With a separate configuration file, we can run the tsc command directly
Then we have a dist folder in our root directory, because we configure the compiled output directory as dist
Eight, specify the loaded configuration file
In real development, we may have multiple tsconfig.json configuration files in different folders, then use --project or -p to specify the configuration file directory, and the tsconfig.json file in this directory will be loaded by default
For example: there is a tsconfig.json file in the configs folder under the root directory, then we can enter the following command to load the tsconfig.json configuration file under the configs directory
tsc -p ./configs
You can also specify a specific configuration file
tsc -p ./configs/ts.jsonArticles are continuously updated every week. You can search for " Front-end Collection " on WeChat to read it for the first time, and reply to [ Video ] [ Book ] to receive 200G video materials and 30 PDF book materials
