TypeScript 怎么配置环境

在做前端开发时，很多人都会遇到这样的场景：写完一段JS代码，运行时却因为变量类型写错、函数传参不符报错。要是换做TypeScript，这些问题在写代码阶段就能被揪出来，不用等到运行时再头疼。不过想用它，第一步得先把环境搭好，这也是不少新手的第一个小坎。

先准备好基础工具

TypeScript是基于Node.js运行的，所以得先把Node.js装在电脑上。打开Node.js官网，选最新的LTS长期支持版本下载安装就行，装完后打开电脑的命令行（Windows是CMD或PowerShell，Mac是终端），输入两个简单的命令检查：node -v 和 npm -v，要是都能输出版本号，就说明基础工具备好了。

全局安装TypeScript编译器

接下来要装TypeScript的核心工具，它的编译器叫tsc，专门用来把TS代码转成浏览器或Node能识别的JS代码。用npm命令全局安装：npm install -g typescript。安装完再在命令行输tsc -v，出现版本号就说明装好了。这里要注意，全局安装是给整个电脑用的，不管哪个项目都能直接用，适合刚开始学的时候。

给项目单独配专属环境

要是做正式项目，不推荐全局装，最好给每个项目单独配，避免不同项目需要不同TS版本时冲突。先建一个新文件夹，比如叫my-ts-project，在文件夹里右键打开命令行，输入npm init -y，生成package.json文件，这是项目的配置文件。然后在文件夹里装本地的TS编译器：npm install typescript --save-dev。装完后，项目里就有了node_modules文件夹，以后运行npx tsc就能用这个项目专属的编译器。

生成并配置tsconfig.json文件

TS的核心配置都在tsconfig.json里，相当于TS的“操作说明书”。在项目文件夹的命令行里输tsc --init，就能自动生成这个文件。打开它，里面有很多默认注释配置，挑几个常用的改就行：

• target：改编译后的JS版本，比如改成"ES6"，让转出来的代码兼容更多浏览器；
• outDir：设置编译后JS代码的存放文件夹，比如改成"./dist"，把编译结果和TS源文件分开，方便管理；
• rootDir：设置TS源文件的文件夹，一般设成"./src"，把写的TS代码都放在这个文件夹里，避免乱。

测试环境是否正常

最后一步验证配置对不对。在src文件夹里建一个index.ts文件，写一段简单的TS代码，比如：const message: string = "我的第一个TS项目"; console.log(message);。然后在命令行输tsc（全局装的话）或者npx tsc（本地装的话），要是没报错，就会在dist文件夹里生成index.js文件，打开看内容，再用Node运行这个JS：node dist/index.js，要是能在命令行看到我的第一个TS项目，说明环境完全没问题。

搭TypeScript环境其实没那么复杂，从基础工具到专属配置，一步步来就不会出错。等环境配好，就能慢慢体验TS给开发带来的便利了。