TypeScript——VSCode搭建开发环境

吴声子夜歌2026-03-27 8:20

VSCode搭建TypeScript开发环境

- 1、准备工作
- [2、VS Code必备插件](#2、VS Code必备插件)
- 3、创建TypeScript项目
- 4、目录结构（推荐）
- 5、运行typescript项目
- - 5.1、ts-node（方便）
  - 5.2、先编译再运行

1、准备工作

1. 安装VS Code

官网：https://code.visualstudio.com

2. 安装Node.js

bash 复制代码

brew install node
node -v
npm -v

3. 安装TypeScript

bash 复制代码

npm install -g typescript
tsc -v

2、VS Code必备插件

TypeScript and JavaScript Language Features：VS Code内置
ESLint：代码规范
Prettier - Code formatter：自动格式化
Path Intellisense：路径补全
DotENV：env文件高亮

3、创建TypeScript项目

1. 新建项目

bash 复制代码

mkdir ts-vscode
cd ts-vscode
npm init -y

2. 初始化tsconfig.json

js 复制代码

tsc --init

推荐tsconfig.json（可直接使用）

json 复制代码

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "moduleResolution": "node",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

4、目录结构（推荐）

复制代码

ts-vscode/
├── src/
│   └── index.ts
├── dist/
├── package.json
├── tsconfig.json

src/index.ts

ts 复制代码

const greet = (name: string): void => {
  console.log(`Hello, ${name}`);
};

greet("VS Code");

5、运行typescript项目

5.1、ts-node（方便）

bash 复制代码

npm install -D ts-node

运行：

bash 复制代码

npx ts-node src/index.ts

5.2、先编译再运行

bash 复制代码

tsc

node dist/index.js