VS Code 之 TypeScript 环境搭建

目录

• 一、全局安装 TypeScript
• 二、Hello World
• 三、初始化 TypeScript 配置
• 四、添加任务监听 tsconfig.json

一、全局安装 TypeScript

nodeJs 自行安装，然后通过 node 包管理器 npm 进行全局安装：

npm install -g typescript

检查版本来测试是否安装成功：

tsc --version

二、Hello World

新建一个 HelloWorld 目录，然后用 VS Code 打开：

mkdir HelloWorld
cd HelloWorld
code .

创建一个 helloworld.ts 文件，文件内容如下：

let message: string = 'Hello World';
console.log(message);

三、初始化 TypeScript 配置

为了方便自动编译 ts 文件，我们需要对 TypeScript 进行一些配置，比如生成 tsconfig.json 文件：

tsc --init

然后自定义配置下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  }
}

四、添加任务监听 tsconfig.json

VS Code 菜单栏 Terminal -> Run Task... 选择 tsc:watch - tsconfig.json

然后项目会自动编译 helloworld.ts 为 js 文件到 out 目录下

到此，TypeScript 环境配置完毕