TypeScript环境安装与VSCode自动编译配置指南

作者：闭包旅人时间：2026-10-25 13:12:26浏览：370

本文详细介绍在Windows环境下安装TypeScript全局环境，并通过VSCode配置tsconfig.json实现TypeScript文件自动编译为JavaScript。涵盖从初始化配置文件到开启监视任务的全过程，附带测试示例以验证配置有效性，帮助开发者提升前端开发效率。

一、前言

近期开始接触typescript，熟悉该技术栈的开发者了解，typescript是构建vue3应用的基础依赖，二者配合使用效果更佳。这类似于vue2与js的关系。由于typescript代码无法被浏览器直接解析，必须将其编译为JavaScript格式，浏览器才能正确执行。因此，配置TypeScript运行环境及自动编译功能，对于后续开发流程至关重要，可避免手动编译的繁琐操作。

二、安装typescript环境

首先确保系统中已安装Node.js运行环境。

win + R 输入cmd

npm install -g typescript

输入命令：，其中-g参数表示进行全局安装。

安装完成后，可通过命令检查已安装的TypeScript版本，确认安装成功。

tsc -v

一、前言

三、VSCode配置自动监视编译

1. 新建一个文件夹

一、前言

2. 在终端打开

一、前言

3. 初始化配置文件

tsc --init

一、前言

4. 编辑配置文件

修改52行配置，将生成的js文件存放位置指定为json文件夹所在目录下的js文件夹。若该js文件夹不存在，系统会自动创建。

在79行配置中，可根据个人需求关闭严格的语法检查，以简化配置过程。

一、前言

5. 开启自动编译

在终端菜单中，选择运行任务选项。

一、前言

点击显示所有任务以查看所有可用的编译任务。

一、前言

选择需要监视的json配置文件。

一、前言

出现报错：

error TS18003: No inputs were found in config file 'd:/file-wang/vue/code/test/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["./js"]'.

一、前言

无需担心此报错，它仅表示当前目录下尚未检测到TypeScript源文件。此时可直接编写一个TypeScript测试文件来验证功能。

四、测试

1. 编写ts文件

新建test.ts文件。

(() => {
    function helloWord(str:string){
        return '这是第一个ts程序：' + str
    }
    var text = 'helloword'
    console.log(helloWord(text))
})();

观察发现，js文件夹下已自动生成对应的JavaScript文件，表明自动编译功能生效。

一、前言

2. 编写html文件

在HTML文件中直接引入js文件夹下生成的js文件即可使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/test.js"></script>
</body>
</html>