使用vscode安装配置Typescript项目的开发环境

原创已于 2025-06-04 10:22:24 修改 · 1.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #typescript #ide

于 2025-06-04 09:51:22 首次发布

1：node.js安装
打开 Node.js 官网：https://nodejs.org/

点击下载

打开文件

运行一路点击「Next」，默认勾选「Add to PATH」（自动配置环境变量）。
macOS：双击安装包，按提示完成安装。

打开电脑「命令提示符」（Windows+R），

node -v  # 查看Node版本，如v18.16.0
npm -v   # 查看npm版本，如9.5.1

若显示版本号，说明安装成功。

2：typescript 安装

在任意文件夹空白处，按住「Shift」键并右键点击，选择「在此处打开命令窗口」（Windows）或「打开终端」（macOS）。

在命令行输入：

npm install -g typescript  # -g表示全局安装，安装后可在任意目录使用tsc命令

安装过程中会显示进度，完成后输入：

tsc -v  # 查看TypeScript版本，如Version 5.2.2

若显示版本号，说明安装成功。

3：vscode安装

打开 VSCode 官网：https://code.visualstudio.com/

安装过程
- Windows：双击安装包，勾选「添加到 PATH」，其他选项默认即可。
- macOS：将安装包拖入「应用程序」文件夹。
打开 VSCode 并安装 TypeScript 插件（可选）
- 启动 VSCode，点击左侧「扩展」图标（或按Ctrl+Shift+X），搜索「TypeScript」，默认已内置支持，无需额外安装。
- 推荐安装「Chinese (Simplified) Language Pack」中文插件，方便使用。

4：新建ts文件

创建项目文件夹
在电脑中新建一个文件夹（例如ts-demo），右键用 VSCode 打开。
初始化 npm 项目（可选但推荐）
在 VSCode 中按Ctrl+~打开内置终端，输入：
- bash
```
npm init -y  # 快速初始化，生成package.json文件
```
新建 TypeScript 文件
在 VSCode 左侧文件列表中，右键点击文件夹，选择「新建文件」，输入文件名（如index.ts），内容示例：
- ```
let greeting:string="Hello World!";
console.log(greeting);
```

5：编译ts文件

在 VSCode 终端输入：

tsc index.ts  # 编译当前目录下的index.ts

执行后会在同目录生成index.js文件，内容如下：


var greeting ="Hello World!";
console.log(greeting);

在 VSCode 终端输入：

tsc index.ts  # 编译当前目录下的index.ts

新建src文件夹，将index.ts移动进去，然后在终端输入：

tsc  # 按tsconfig.json配置编译整个项目

编译后会在根目录生成dist文件夹，里面包含index.js。

编译错误的解决方案

6：运行js文件

6.1：引入到html文件中，在浏览器中运行

在项目根目录新建index.html，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TypeScript演示</title>
  </head>
  <body>
    <script src="dist/index.js"></script> <!-- 引入编译后的JS文件 -->
  </body>
</html>

运行 HTML 文件
- 双击index.html，打开浏览器开发者工具（按F12），查看控制台输出「Hello World!」。

6.2：使用node命令运行js文件

在终端输入

node dist/hello.js  # 运行编译后的JS文件

查看输出
终端会直接显示「Hello World!」。

7：效果预览

1. 成功效果

浏览器控制台或 Node 终端显示「Hello World!」，说明 TypeScript 项目已正常运行。