TypeScript target 怎么设置

你有没有遇到过这样的情况：写了一段代码，在自己电脑上运行得好好的，一放到别人的浏览器或者旧版本软件里，就报一堆奇奇怪怪的错误，连页面都跑不起来？其实很多时候，问题出在代码的“兼容性”上——而TypeScript里的target设置，就是帮你解决这个问题的核心工具之一。

什么是TypeScript的target？

TypeScript是JavaScript的“升级版本”，它会把你写的代码编译成普通浏览器能识别的JavaScript代码，而target就像一个“目标说明书”，告诉编译器：“我要编译成哪个版本的JavaScript？我要适配哪些环境？”

举个生活化的例子：你打算做一份家常菜给朋友吃，不同的朋友有不同的饮食禁忌——有的不吃辣，有的牙口不好要吃软烂的，有的只吃素食。这里的“不同朋友”就对应不同的JavaScript环境，而你做的“版本调整”，就是TypeScript里设置target的作用。比如朋友牙口不好，你就把菜炖得更烂；朋友不吃辣，你就不放辣椒，这就是适配不同target的过程。

为什么要正确设置target？

很多新手刚开始用TypeScript，会随便选一个target，结果要么代码冗余，要么兼容性差。我之前就踩过这个坑：那时候刚接触TypeScript，直接设了最高的ES2022，代码编译后非常精简，性能也不错，但放到公司的旧系统里直接报错——旧系统只支持到ES5，像箭头函数、类语法这些新特性，旧系统根本看不懂，最后折腾了半天才把target改回ES5，代码才正常运行。

简单来说，target设置得太高，旧环境跑不起来；设置得太低，编译器会把很多新特性转成旧语法，代码会变得臃肿，加载速度变慢，还可能出现没必要的兼容问题。所以选对target，就是让你的代码在“新特性”和“兼容性”之间找到最好的平衡。

怎么设置TypeScript的target？

TypeScript的target设置非常简单，核心是改tsconfig.json文件（这是TypeScript的核心配置文件，相当于项目的“说明书”），找到"target"这一项，改成你需要的版本就行。

常见的target版本和对应的环境需求可以这样选：

• 如果你的项目要适配所有现代浏览器（比如Chrome、Firefox、Edge的最新版，还有手机上的主流浏览器），选"ES2018"或更高就够了——这些现代环境几乎支持所有新特性，编译后的代码精简，运行速度快。
• 如果你的项目需要兼容旧浏览器（比如IE11），一定要选"ES5"——ES5是所有浏览器都支持的基础版本，虽然编译后代码会变长，但能保证在旧环境里正常运行。
• 如果是Node.js项目，可以看你用的Node.js版本：Node.js 12及以上选"ES2019"，Node.js 10选"ES2018"，这样既适配Node环境，又不会浪费性能。

还有个小技巧：如果你不确定项目需要适配哪些环境，可以配合browserslist工具（很多前端项目默认集成），它会自动帮你分析用户的浏览器占比，推荐最合适的target，不用自己瞎猜。

设置时要注意的小细节

最后再提醒两个容易忽略的点：

第一，target版本不是越高越好，比如你做的是内部工具，不需要兼容旧浏览器，就没必要选ES5，浪费编译后的代码体积；但如果是面向所有用户的公开网站，一定要考虑旧浏览器的占比，不能只图新。

第二，target设置后，还要注意其他配置的配合，比如如果用了core-js这样的垫片库，要确保垫片的版本和target匹配，不然还是可能出现特性缺失的问题。

其实TypeScript的target设置一点都不复杂，核心就是“看你的代码要跑在什么地方，就选对应的目标版本”。选对了，就能少踩很多兼容性的坑，让代码既好用又不会出问题。