vscode + typescript development environment to build

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>

Long time did not write a blog, taking advantage of the Dragon Boat Festival period studied under typescript, environmental building methods and procedures recorded.

Looks like at this stage only vscode support to typescript of the best, you can debug ts scripts directly! Looks like webstorm just can debug js compiled, you can not debug ts scripts directly.

npm to use the latest version can be downloaded from the official website and configure a symbolic link to / usr / bin / npm down.

2. Install

2.1 Installation typescript

$ npm install -g typescript  //typescript程序
$ npm install -g ts-node   //这是一个typescript的交互式
控制台，可以用来调试ts脚本，不然只能调试编译后的js

3. Configure the development environment

3.1. Initialization

npm init

Directory Structure

/src/ts //这个目录用来放ts代码
/src/build  //这个目录用来存放编译的js

3.2 Add tsconfig.json 3.2.1 automatically create $ tsc -. Tsconfig.json file can be created automatically after init executed, the directory is the root directory containing tsconfig.json, but also into the zone configuration directory can also be created manually

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators":true,
        "preserveConstEnums": true,
        "strictNullChecks": true,
        "noImplicitReturns": false,
        "moduleResolution": "node",
        "esModuleInterop":true,
        "target": "es6",/*编译成es6规范的js*/
        "allowJs": false,/*不允许js混合编程，新项目强烈推荐，迁移的老项目只能设置成true了*/
        "sourceMap": true,/*调试时的时候必须开sourceMap*/
        "outDir": "build"//js文件的输出目录
    },
    // "files": [

    // ],
    "include": [
        "src/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Before installing @types is 3.2 tsd and typings managed type definitions, this stuff is very helpful tips for smart, but not recommended, and now recommended @types managed type definitions.

In http://www.cnblogs.com/haogj/p/6194472.html There is described below a method of installation files .d.ts

$ npm install @types/node --dev-save

Then you can open the demo1 directory with vscode

4. Compile file 4.1 General compilation

$ tsc demo1.ts
$ tsc -w   //可以监视变化即时编译，甚至可以自动刷新浏览器，很牛逼

Later we will compile a build / demo1.js file (if there is an accurate error prompt)

5. Write a script / src / main / ts / create demo2.ts, reads as follows

function greeter(person: string) : string{
    return "Hello " + person;
 }
 
 let user="jim";
 
console.log(greeter(user));

6. First, the configuration launch.json press ctrl + shift + B, choose to build launch.json. /.Vscode/launch.json then generates a file that you need to modify it before you can use

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/src/main/ts/demo2.ts",
            "outFiles": [
                "${workspaceFolder}/src/build/*.js"
            ]
        }
    ]
}

6. perform debugging

In the first let user = "jim" to set a breakpoint, and the debugger -> Start Debugging can begin debugging a script for demo2.ts.

If you do not install ts-node is unable to debug scripts directly ts, and then loaded and no special settings you can do the debugging ts, great.

Reproduced in: https: //my.oschina.net/jim19770812/blog/1831493

vscode + typescript development environment to build

Guess you like