1- First acquaintance with TypeScript- environment construction and use

1. Key Refinement

• Environment setup
• Compilation command and configuration
• Configuration file: tsconfig.json
  • outDir、target、watch、include、project

2. Environment Setup

TypeScriptProgram written and can not run directly through the browser, we need to pass TypeScriptthe compiler to put TypeScriptcode into JavaScriptthe code

TypeScriptThe compiler is based on Node.js, so we need to installNode.js

2.1 Installation Node.js

https://nodejs.org

After installation is complete, you can 终端or cmdto invoke the command-line tools, etc.node

# 3. 查看当前 node 版本
node -v

3.1 Installing TypeScriptthe compiler

By NPMinstalling package management tools TypeScriptCompiler

npm i -g typescript

After installation is complete, we can command tscto invoke the compiler

# 4. 查看当前 tsc 编译器版本
tsc -v

5. Write the code

Code Editor-vscode

vsCodeAnd TypeScriptall Microsoft products, vsCodeis itself based TypeScriptdevelopment, and vsCodeto TypeScriptsupport a natural friendly

https://code.visualstudio.com/

TypeScript file

By default, TypeScriptthe suffix of the file is.ts

TypeScript Code

// ./src/hello.ts
let str: string = 'CSDN';

6. Compile and execute

We installed using the TypeScriptcompiler tscto .tscompile the file

tsc ./src/hello.ts

Will generate the same name in the current directory where the file default jsfile

7. Some useful compilation options

Compile command tscalso supports a number of compiler options, here I start to understand some of the more common

7.1 --outDir

Specify the compiled file output directory

tsc --outDir ./dist ./src/hello.ts

7.2 --target

Specify the compiled code version target, the default is ES3

tsc --outDir ./dist --target ES6 ./src/hello.ts

7.3 --watch

Run in monitor mode, automatically compile when the file changes

tsc --outDir ./dist --target ES6 --watch ./src/hello.ts

Through the above 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, TypeScriptcompilation 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

8. Compile the configuration file

We can save some of the options compiled in a specified jsonfile, by default, tscwhen the command runs automatically to load the directory where the run command tsconfig.jsonfiles, configuration files in the following format

{
    
    
    "compilerOptions": {
    
    
        "outDir": "./dist",
        "target": "ES2015",
    "watch": true,
    },
  // ** : 所有目录（包括子目录）
  // * : 所有文件，也可以指定类型 *.ts
  "include": ["./src/**/*"]
}

With a separate configuration file, we can run directly

tsc

8.1 Specify the loaded configuration file

Use --projector -pspecify the configuration file directory will be loaded by default under the directory tsconfig.jsonfile

tsc -p ./configs

You can also specify a specific configuration file

tsc -p ./configs/ts.json

(To be added later)