VS Code 搭建 TypeScript 开发环境

最新推荐文章于 2025-06-04 10:06:25 发布

原创最新推荐文章于 2025-06-04 10:06:25 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TypeScript

TypeScript 专栏收录该内容

5 篇文章

订阅专栏

本文指导如何在VS Code中建立TypeScript开发环境。首先，提供了VS Code和Node.js的下载链接，接着详细介绍了配置过程：全局安装TypeScript，初始化package.json文件，创建并编辑tconfig.json，设置常用编辑选项，最后通过创建test.ts文件并编译为test.js来验证环境配置。

配置步骤

全局安装 TypeScript:

npm install -g typescript

初始化 package.json 文件

npm init

如果要跳过向导，则

npm init -y

创建 tconfig.json 文件

tsc --init

编辑 tconfig.json 文件
常用编辑选项如下

{
  "compilerOptions": {
  	"target": "es6",  // 编译之后生成的JavaScript文件需要遵循的标准
    "module": "commonjs", // 遵循的JavaScript模块规范。为了与node.js保持一致，这里选用commonjs
    "noImplicitAny": false, // 为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替
    "removeComments": true, // 编译生成的JavaScript文件是否移除注释
	"strict": true, // 使用严格模式
	"outDir": "./" // 编译生成的 js 文件存放目录
  }
}

新建一个 test.ts 文件

class Person {
  name:string;
  constructor (name:string) {
    this.name = name;
  }
  sayHi ():void {
    console.log("Hello!");
  }
}

const p = new Person('Tom');
p.sayHi();

在终端中使用 tsc命令编译这个文件

tsc test.ts

得到 test.js

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        console.log("Hello!");
    }
}
const p = new Person('Tom');
p.sayHi();