如何让TypeScript编译器保留模板字面量？

我有如下TypeScript代码：

return `Invalid input. ${guessesRemainingText}`;

编译后生成的JavaScript代码被转成了：

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

请问是否有办法让TypeScript编译器完整保留模板字面量？以下是我的tsconfig.json配置：

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

问题出在你没明确设置compilerOptions里的target选项。TypeScript默认编译目标是ES3，这个版本的JS不支持模板字面量，所以编译器会自动把模板字符串转成concat调用以兼容低版本环境。

要保留模板字面量，只需在tsconfig.json的compilerOptions中添加"target": "ES6"（或更高版本，比如ES2015、ES2020等）——ES6及以上版本原生支持模板字面量。修改后的配置如下：

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

设置完成后，编译器就会直接保留模板字面量写法，不会再转成concat形式。

注意：lib选项仅指定编译时可用的API库，不影响语法编译目标，语法目标由target选项控制，两者需配合使用才能达到预期效果。

内容的提问来源于stack exchange，提问作者Christopher Fimbel