vscode 配置typescript环境

2018-04-15 本文已影响4838人 wwmin_

首先确保已经安装了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(name@163.com)",
  "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项目就配置完成了.

vscode 配置typescript环境

猜你喜欢

热点阅读