TypeScript开发环境搭建-Visual Studio Code

84 阅读 0 评论 56 点赞

我是靠谱客的博主有魅力茉莉，最近开发中收集的这篇文章主要介绍TypeScript开发环境搭建-Visual Studio Code，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一.环境安装

1.安装Node.Js环境

2.使用 npm包管理，安装TypeScript

npm install -g typescript

更新到最新版本：

npm update -g typescript

3.查看当前TypeScript的版本

 tsc -v

三、在VS Code中对于 v1.14以后的版本，编辑器只需要配置 tsconfig.json文件就可以了

注：VsCode v.1.14对tasks.json进行了调整，详细参考：https://code.visualstudio.com/docs/editor/tasks#vscode

1.配置tsconfig.json,和一起前一样，见介绍2

注：watch可以配置监视当执行保存时及时编译文件。

{
"compilerOptions": {
"target": "es5",
"noImplicitAny": true,
"module": "commonjs",
"removeComments": true,
"sourceMap": false,
"watch": true,
"outDir": "out/"
},
"include":[
"src/*"
],
"exclude": [
"js"
]
}

2.自动生成task.json、

点击任务》配置生成默认任务，选择tsc就可以了

或者使用Ctrl+Shift+P

结果如下：

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}

其他说明：多任务示例

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "lint",
"problemMatcher": [
"$eslint-stylish"
],
"presentation": {
"reveal": "never"
},
},
{
"taskName": "Run tests",
"type": "shell",
"command": "./scripts/test.sh",
"windows": {
"command": ".\scripts\test.cmd"
},
"group": "test",
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}

二.在VS Code工具下创建、编译项目（这针对于VsCodev1.14以前的版本）

1.使用VS Code打开执行文件夹作为工作目录

2.创建tsconfig.json文件，配置*.ts的编译输出等，更多参考：https://www.tslang.cn/docs/handbook/tsconfig-json.html

{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "commonjs",
"removeComments": true,
"sourceMap": false,
"outDir": "Golang/TypeScript/"
}
//"include":[
//
"ts"
// ],
//"exclude": [
//
"js"
// ]
}

target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。
removeComments：编译生成的JavaScript文件是否移除注释。
sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
outDir：编译输出JavaScript文件存放的文件夹。如果文件夹不存在，抛出异常
include、exclude：编译时需要包含/剔除的文件夹。

3.在.vscode文件夹下创建任务，用于指定编译命令等

文件名tasks.json

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for thedocumentation about the tasks.json format
"version": "2.0.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "always",
"problemMatcher": "$tsc"
}

4.使用 Ctrl+Shift+B 启动编译

编译成功会将在指定的输出目录生成 *.ts => *.js

如下图：