TypeScript 在学习之前你需要知道的两大神器

1. 安装插件Quokka.js , 可在 VSCode的扩展搜索中找到.

作用是能够即时输出 js / ts 文件的执行结果 :

Quokka.png

2. VSCode 自动编译功能:
   通过 设置VS Code 中的 task.json 和 项目中的tsconfig.json 实现

以当前项目结构为例子:

项目结构.png

那么就可以按照以下的设置:

task.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for thedocumentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    //-p 指定目录；-w watch,检测文件改变自动编译
    "args": ["-p", ".", "-w"],
    "showOutput": "always",
    "problemMatcher": "$tsc"
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "outDir": "./dist",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ]
}

每当 修改 src/*. ts文件就会自动编译成 dist/*.js , 再给 js / ts 文件开启Quokka.js 的话 , 那么可以实现以下的效果:

image.png

可以非常直观的看到 ts 和 js 文件的异同 , 还有下方输出的TypeScript 编译中的报错信息.

对于学TypeScript的初学者来说非常方便和直观看到 ts / js 的不同