如何让TypeScript编译器保留模板字符串？

前端开发 2026-07-09

我有一些代码

return `Invalid input. ${guessesRemainingText}`;

编译后得到的JavaScript看起来是这样的

return "Invalid input. ".concat(guessesRemainingText);

有没有办法让TypeScript编译器把模板字面量原样保留？

这是我的 tsconfig.json：

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "lib": ["ES6"],
    "rewriteRelativeImportExtensions": true,
    "types": ["node"]
  },
  "include": ["src/**/*"]
}

解决方案

你没有在你的 tsconfig.json 中提供 target 值，这导致TypeScript默认使用ES5，而ES5不支持模板字面量。因此TypeScript被迫把模板字面量翻译成适用于ES5的代码。

我建议你改用这个：

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "target": "ES6",
    "rewriteRelativeImportExtensions": true,
    "types": ["node"]
  },
  "include": ["src/**/*"]
}

这将替代使用 lib。target 告诉TypeScript，你所针对的JavaScript运行时可以运行到目标版本。

当你 target: "es5" 但使用 "lib": ["ES6"] 时，基本上是在告诉TypeScript你希望得到能够在一个支持某些额外ES6特性的ES5运行时上运行的代码（例如，你可能已经对这些特性进行了polyfill）。

在大多数情况下，你会希望一个 target，它尽量匹配你的运行时能力（例如对于node 24，你会使用类似 "ES2024" 的目标），除非你有特定原因选择较低的目标。

TypeScript