Visual Studio Code TypeScript 指南 - 文章教程

Visual Studio Code TypeScript 指南

发布于 2021-09-03 字数 2783 浏览 1038 评论 0

Visual Studio Code (以下简称 VSCode) 是一款的免费、开源、跨平台的开发工具。定位是轻量级的 IDE,以键盘操作为中心,使用 JSON 作为配置文件格式. VSCode 内置 TypeScript 支持,并且通过 TypeScript Salsa 为 JavaScript 开发也提供了强大的体验。

访问 https://code.visualstudio.com 下载安装最新版本.

快速上手

安装编译器

安装 Node.js.

通过 Node.js 自带的 npm 包管理工具安装 TypeScript 编译器 tsc (包名为 typescript) 及 TypeScript 声明管理工具 tsd.

npm install --global typescript
npm install --global tsd

未来 tsd 将会被新的工具 typings 替代, 但就目前来讲 typings 并不算好用.

新建 TypeScript 项目

1、新建项目文件夹 ts-test 并在 VSCode 中打开.

2、在文件夹根目录新建文件 tsconfig.json, 键入 compilerOptions 后, VSCode 会自动提示一个代码片段, 按 Tab 键将插入如下配置:

{
    "compilerOptions": {
        "module": "commonjs"
    },
    "exclude": [
        "node_modules"
    ]
}

在该配置模板的基础上, 在 compilerOptions 中新增一项 target, 值为 "es5".

3、新建文件 test.ts, 输入以下内容并保存:

function test(str: string): void {
    console.log(str);
}

test('Hello, VSCode!');

4、按下 F1Ctrl/Cmd+Shift+P, 输入 build, 选中 “Tasks: Run Build Task”. VSCode 将会提示 “No task runner configured”, 点击 “Configure Task Runner” 进行配置. VSCode 会给出一个任务模板列表, 其中有两项关于 TypeScript 构建的配置, 一项为普通编译, 一项为增量编译 (监视模式). 比如我们可以选择增量编译的模板, VS Code 会生成如下 tasks.json 文件:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

5、再次按上一步的方法再次执行构建任务, 或者也可以使用快捷键 Ctrl/Cmd+Shift+B. 如果一切顺利, 编译完成后项目目录下回出现编译后的 test.js 文件:

function test(str) {
    console.log(str);
}
test('Hello, VSCode!');

这样一个简单的 TypeScript 项目流程就搞定了, 在命令行中输入 node test.js 即可执行编译后的 JavaScript 文件。如果配置构建任务时启用了监视模式, 当源文件改动时, TypeScript 编译器会自动进行增量编译. 在某些情况下 (如删除了某个 .ts 文件), VS Code 会自动重启任务, 使项目能正常编译。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82710 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0