前言
TypeScript 是现代化前端开发中应用广泛的一种语言。它提供了强类型检查和面向对象编程的特性，使得代码更加健壮和可靠。但是随着项目越来越庞大，TypeScript 的语言服务（Language Service）（即 TypeScript 语言的实时编辑器和代码分析器）的性能问题也越来越明显。在本文中我们将介绍如何优化 TypeScript 语言服务的性能和调试。
优化 TypeScript 语言服务的性能
缩小监视的范围
由于 TypeScript 的语言服务会监视文件系统的变化，因此它会对项目中的所有文件进行检查。我们可以通过配置监视的文件路径来缩小范围。比如，我们可以将配置的 "include" 和 "exclude" 属性进行合理的设置，使语言服务只监视我们需要的文件，以此来提高性能。
-- -------------------- ---- -------
-
------------------ -
--------- ---------
------ ------- ----------
--------- -----------
------------------ -----
--------- -----
------------------- -------
---------- ----
-------- -
-------- ---------
-
--
---------- -
----------
--
---------- -
--------------
-
-在上面的配置文件中，我们仅仅监视了 "src/**/*" 路径下的文件夹，同时忽略了 "node_modules" 中的文件夹。
缓存 TypeScript 编译器
TypeScript 的语言服务在执行某些操作时需要使用 TypeScript 编译器所提供的一些信息。因此，我们可以缓存一些 TypeScript 编译器的信息来加快语言服务的执行速度。这可以通过使用 ts-memo 库来实现：
-- -------------------- ---- ------- ------ - ---- - ---- ---------- ----- --------------- - --- -- ---- ----- ------------- - ----------- --------- -- --------------------------- ----------------- ----- --------------------- - ------------------- - -------- --- -- ------ --- ----- -------- - ---------------------------------- ------------- ----- -------- - ------------------------------------ -------------------- --- ---------- -- -----
使用持久化缓存
除了缓存编译器的信息之外，我们还可以使用持久化缓存，在不同的会话中复用缓存来提高性能。可以使用 TypeScript 的 createIncrementalCompilerHost 函数进行持久化缓存的设置。这个函数有一个 getCachePath 可以指定缓存文件的位置。
-- -------------------- ---- ------- ------ - -- -- ---- ------------- ----- -------------- - ------------------------- ----- ---------- - ---------------- ---------------------------- - ---------- ---- --- ----- ---- - ---------------------------------- --- -- --- ------------- -- -- ---------------------------------------------- ---
减少不必要的检查
TypeScript 的语言服务会检查语法和类型错误。在某些情况下，我们可以通过一些技巧减少检查的数量，从而提高编辑器的响应速度。
设置 "noEmit"
在 TypeScript 的 compilerOptions 中设置 noEmit 为 true，可以防止 TypeScript 编译器为每个文件生成输出。不生成输出的话就可以避免生成一些不必要的信息来加快检查速度。
-- -------------------- ---- -------
-
------------------ -
--------- -----
--------- ---------
------ ------- ----------
--------- -----------
------------------ -----
--------- -----
------------------- -------
---------- ----
-------- -
-------- ---------
-
--
-- ---
-禁用类型检查
我们可以在一些不需要进行类型检查的场景中禁用类型检查，如 init.ts 文件。此时，我们可以在 tsconfig.json 中，将 init.ts 强制设置为 noEmit: true，这样 TypeScript 的编译器就不会对该文件进行类型检查。
-- -------------------- ---- -------
-
------------------ -
-- ---
--
-------- ------------
---------- -
--------------
--
----------- -
---------- - --------- ---- -
-
-Lambda 中使用 "as const"
在 TypeScript 中，若某个变量的类型需要存储数据，我们可以将其声明为 const 避免重新赋值。在 Lambda 表达式中，我们可以使用 as const 来表明该值不需要类型检查，从而减少类型检查的数量。
const arr = [1, 2, 3] as const; const res = arr.filter((n) => n !== 2); // OK
减少泛型的使用
TypeScript 中的类型检查器需要处理各种类型，包括泛型和嵌套类型。这些类型比较复杂，需要更多的时间来检查。因此，在 TypeScript 中，应该尽量减少泛型和嵌套类型的使用，这样可以显著提高编辑器的性能。
调试 TypeScript 语言服务
开发中，我们有时希望对 TypeScript 的语言服务进行一些调试。下面我们提供了几种调试 TypeScript 的技巧。
使用 VSCode 调试 TypeScript 语言服务
VSCode 的调试器可以帮助我们在命令行环境中执行 TypeScript 的语言服务。我们需要将 tsconfig.json 中的 outDir 设置为 ./bin，并且在 .vscode/launch.json 配置文件中添加一个调试配置来启动调试。我们可以将模板配置复制一份，将 preLaunchTask 改成 "tsc: watch"，为 preLaunchTask 任务后期定义的任务名。此时，启动 VSCode 的调试器就可以调试 TypeScript 的语言服务。
-- -------------------- ---- -------
-- -------------------
-
-- --- ------------ -- ----- ----- -------- -----------
---------- --------
----------------- -
-- -------- -- ---- -------------
-
------- --- ------
------- -------
---------- ---------
------- ------------------------------------
-------------- ------ --------------------
------ ---------------------
----------- ------------
--
-- ---------- -------- ------- -------------
-
------- -------
---------- ---------
------- ------- -------- ---------
---------- ----------------------------------------------------------
------- ------------------- -----------
-------------------- -------
------ -------------------
---------- ---------------------
------------------------- ------------
--
-
-使用 tsserver 的 --log-level 参数
TypeScript 的语言服务提供了一个 --log-level 命令行参数，它可以显示语言服务中的所有消息。在调试 TypeScript 语言服务时，我们可以使用 --log-level verbose 参数详细地输出调试信息。这可以帮助我们找到性能瓶颈，优化 TypeScript 语言服务的性能。
npx tsserver --log-level verbose
使用 Chrome 的 DevTools
我们可以使用 Chrome 的 DevTools 来查看内存使用情况和代码执行时间。可以通过在命令行中使用 --inspect 参数启动 tsserver，然后在 Chrome 中打开 chrome://inspect 页面，可以看到正在运行的 tsserver 进程。
npx tsserver --inspect
结论
本文介绍了如何优化 TypeScript 语言服务的性能和调试。我们可以通过缩小检查范围、缓存 TypeScript 编译器、使用持久化缓存、减少不必要的检查和减少泛型使用来提高 TypeScript 的性能。同时，我们可以使用 VSCode 的调试器、tsserver 的 --log-level 命令行参数和 Chrome 的 DevTools 来调试 TypeScript 的语言服务。希望对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e7100e884a3e30f2745aa