TypeScript 是一款高效、可靠的静态类型语言，它将 JavaScript 语言进行了扩展，在保留原来语法的基础上提供了更多有用的特性和工具。然而，在开发 TypeScript 项目的过程中，我们有时会遇到这样的错误：Unexpected Token。这个错误提示通常意味着代码中出现了不符合语法规则的字符或标记，导致编译器无法正确解析代码。那么，如何解决这个问题呢？下面，我们将详细介绍 TypeScript 编译时出现 Unexpected Token 错误的常见原因和解决办法。
常见原因
- Typescript 版本不兼容
在类型定义或某些语法上，某些 TypeScript 版本的特性在其它版本是缺失或不兼容的，可能会导致编译错误。为了解决这个问题，可以尝试更新 typescript，或在 tsconfig.json 中指定 TypeScript 版本，以确保项目使用的 TypeScript 版本与代码本身兼容。
- 误用关键字
当我们误用 TypeScript 关键字或标记时，会出现语法错误。例如，使用了未定义的类型或关键字，如 constructor / async/ await/ import / implements / interface / package、未正确的链式表达中使用分号，如 a?.b;，注意这里的问号表示的是可选操作符，在 TypeScript 3.7+ 版本中支持，并且其前面不能有点号 .。
- 缺少必要的类型定义
使用 TypeScript 管理 JavaScript 代码时，可能会出现缺少必要的类型定义的情况。这种情况下，需要通过为变量、函数、对象等添加正确的类型定义，以确保 TypeScript 可以正确地解析代码。
- 导入模块路径不正确
在 TypeScript 项目中，导入模块时必须使用正确的相对路径或绝对路径，否则编译时将无法找到模块。如果在编译时出现了 Unexpected Token，可能是因为导入的模块路径不正确导致的。
解决办法
检查类型定义和语法
首先，可以检查代码中是否存在类型定义和语法错误。如果存在错误，需要根据错误提示修改代码。在 TypeScript 中，错误信息通常包含有详细的代码行号和错误原因，可以根据这些信息快速定位并修复问题。
检查 tsconfig.json 文件
在 TypeScript 项目中，tsconfig.json 文件负责配置项目的编译选项和环境。可以检查该文件中指定的 TypeScript 版本是否与代码兼容，并确保其它设置正确。例如，module 设置是否正确，outDir 定义的输出文件夹路径是否正确等。
检查导入模块路径
在 TypeScript 项目中，导入模块时需要使用正确的路径。可以检查项目中所有的导入语句，确保路径设置正确。例如，如果一个文件需要引入另一个文件中的函数，需要使用相对路径或绝对路径指定要引入的文件。
添加类型定义
在 TypeScript 项目中，为变量、函数、对象等添加正确的类型定义是十分必要的。可以根据变量的用途和上下文语境，添加合适的类型定义。例如，如果某个变量是一个数组，需要使用 Array<number> 等类型定义，确保 TypeScript 可以正确解析代码。
移除不必要的特性
有时，为了添加某些特性或语法糖，会使用 TypeScript 不支持的功能，导致编译错误。在这种情况下，可以考虑移除不必要的特性或语法糖，或者使用 TypeScript 支持的方式实现同样的功能。
示例代码
以下是一个列子：
-- -------------------- ---- -------
----- ------ -
------------------ ----- ------- ------ ---- ---------
--- --------- -
------ -------- -- ---
-
-
----- ---- - --- -------------- ----
------------------------- -- ----------- ----- -------这段代码的目的是创建一个 Person 类，该类包含名称和年龄属性，以及一个 “isAdult” 计算属性，该属性用于判断一个人是否年满 18 岁。然而，当我们尝试编译这段代码时，可能会遇到以下错误：
error TS2591: Cannot find name 'class'. Do you need to install type definitions for a library? Try `npm i @types/libraryname`.
这个错误提示的意思是编译器无法识别 “class” 关键字。这个问题可能是因为 TypeScript 版本过低，导致编译器不支持类语法。为了解决这个问题，我们需要检查 TypeScript 版本是否兼容，并尝试将 TypeScript 更新到最新版本：
$ npm install typescript@latest --save-dev
更新完成后，在 tsconfig.json 文件中指定 TypeScript 版本：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
------------ -----
------------------- -------
--------- -------
------------------ -----
--------- -----
------ ---------- -------
-------- ---------
-------------------- -----
---------------- -----
-------------------- -----
----------------- -----
------------------- -----
---------------------- -----
------------------------------- -----
--
---------- -
-------------
-
-在这个例子中，我们将 TypeScript 更新到了最新版本，并在 tsconfig.json 中指定了 TypeScript 的版本号为 "latest"。运行 tsc 命令重新编译代码，就可以应用更新后的 TypeScript 版本，解决错误问题。
结论
在 TypeScript 开发中，出现 Unexpected Token 编译错误时，需要从多个方面进行排查，确定错误的根本原因，并采取相应的解决方案。如果遵循以上建议，就能快速解决类型定义和语法错误问题，提高代码的质量和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a6db2a1ce0063548d1e11