At the beginning of the typeScript experience

  1. Environment set upTypeScriptThe environment
  2. TypeScriptCompilation and execution of code

Environment set up

TypeScript programs don’t run directly in a browser; we need to compile TypeScript code into JavaScript code through the TypeScript compiler

TypeScript’s compiler is based on Node.js, so we need to install Node.js first

The installationNode.js

nodejs.org

After the installation is complete, you can invoke Node from a terminal or command-line tool such as CMD

#View the current Node version
node -v
Copy the code
The installationTypeScriptThe compiler

Install the TypeScript compiler using the NPM package management tool

npm i -g typescript
Copy the code

Once the installation is complete, we can invoke the compiler with the TSC command

#View the current TSC compiler version
tsc -v
Copy the code

Write the code

Code editor – vscode

VsCode and TypeScript are both Microsoft products. VsCode itself is developed on TypeScript, and vsCode has naturally friendly support for TypeScript

code.visualstudio.com/

TypeScript file

By default, TypeScript files have a.ts suffix

TypeScript code

// ./src/helloTs.ts
let str: string = '123';
Copy the code

Compile implementation

Compile.ts files using our installed TypeScript compiler TSC

tsc ./src/helloTs.ts
Copy the code

By default, a JS file with the same name is generated in the current file directory

Some useful compilation options

The compile command TSC also supports a number of compile options, but here’s a look at some of the more common ones

–outDir

Specifies the output directory for compiled files

tsc --outDir ./dist ./src/helloTs.ts
Copy the code
–target

Specifies the compiled code version target, which defaults to ES3

tsc --outDir ./dist --target ES6  ./src/helloTs.ts
Copy the code
–watch

Run in listening mode and automatically compile when the file changes

tsc --outDir ./dist --target ES6 --watch ./src/helloTs.ts
Copy the code

The examples above give you a good idea of how TSC works, but typing in a bunch of options every time you compile can be tedious. Fortunately, TypeScript compilation provides a more powerful and convenient way to compile configuration files: Tsconfig. json, we can save the above compilation options to this configuration file

Compiling configuration files

We can save some of the compiled options in a specified JSON file. By default, the TSC command will automatically load the tsconfig.json file in the directory where the command is run

{" compilerOptions ": {" outDir" : ". / dist ", "target" : "ES2015", "watch" : true,}, / / * * : all directories (including subdirectories) / / * : Ts "include": ["./ SRC /**/*"]}Copy the code

With a separate configuration file, we can run it directly

tsc
Copy the code
Specify the configuration file to load

Using –project or -p to specify the configuration file directory will load the tsconfig.json file in that directory by default

tsc -p ./configs
Copy the code

You can also specify a specific configuration file

tsc -p ./configs/ts.json
Copy the code