vscode 配置typescript环境

首先确保已经安装了node,vscode

• 安装TypeScript Compiler
  安装好Node.js后，可以直接使用npm工具来安装TypeScript，这个TypeScript的Package其实也是一个Compiler，可以通过这个Complier将typescript编译成javascript。打开命令提示符cmd，进入控制台(或其他终端Terminal)，输入指令：npm install -g typescript
• 或者更新TypeScript Compiler
  输入指令:npm update -g typescript
  查看版本指令tsc -v
• 安装库的d.ts文件,如安装node.d.ts文件
  输入指令npm install --save -g @types/node
• 创建package.json
  建一个文件夹,起一个项目名字,然后cd 进入文件夹中建立一个package.json 文件,此文件可以用npm init命令创建,跟着下一步设置好你用的参数即可.
  大概长这个样子:

{
  "name": "test",
  "version": "1.0.0",
  "description": "测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "test",
    "javascript"
  ],
  "author": "name([email protected])",
  "license": "ISC",
  "dependencies": {}
}

• 创建tsconfig.json
  typescript 的项目都需要一个tsconfig.json
  输入命令tsc --init会创建一个这样内容的tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "removeComments": false,
    "noImplicitAny": false,
    "sourceMap": true,
    "allowJs": true
  },
  "exclude": ["node_modules"]
}

因为写node.js你可以修改target为es6, 要调试把 sourceMap改为true, 添加allowjs为true,就可以ts和js混合用了.

• 安装node的.d.ts库
  输入命令typings install dt~node --global,国内用typingts的时候,总是会失败,多试几次总会成功的.

• 配置TypeScript编译
  按ctrl+shift+b,如果没有配置过task, 就会在上面提示。
  

  提示配置task
  
  点击配置任务运行程序之后选择创建TypeScript项目
  
  typescript选项
  
  在.vscode文件夹下生成一个task.json文件,如下

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${workspaceFolder}\\index.js",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ]
    }
  ]
}

• 再次按ctrl+shift+b就会出现
  
  ctrl+shift+b 编译选项
  
  选择你喜欢的方式,通常如果需要及时编译选下一个,如果有loader配置如vue,完全不用选择编译成ts,有webpack帮忙完成此任务.
  到此一个ts项目就配置完成了.