Typescript将模板字符串编译为es5，即使将tsconfig目标设置为ESNEXT也是如此

TypeScript 是一种静态类型的 JavaScript 超集，它允许开发者编写更健壮的代码，并且能够在编译时捕获类型错误。TypeScript 编译器（tsc）可以将 TypeScript 代码编译成纯 JavaScript 代码，以便在各种环境中运行。

基础概念

• 模板字符串：在 ES6 中引入的一种新的字符串表示方式，使用反引号（）包裹，并且可以嵌入表达式（例如${expression}`）。
• ES5：ECMAScript 5，是 JavaScript 的一个版本标准，广泛支持于现代浏览器和环境中。
• ESNEXT：指的是最新的 ECMAScript 标准草案，TypeScript 中的目标设置，表示编译后的 JavaScript 代码将尽可能接近最新的语言特性。

问题原因

即使将 tsconfig.json 中的目标设置为 ESNEXT，TypeScript 编译器有时仍然会将模板字符串编译为 ES5 兼容的代码。这通常是因为 TypeScript 编译器默认启用了 downlevelIteration 和 noStrictGenericChecks 等选项，这些选项会影响编译后的代码兼容性。

解决方案

要确保模板字符串和其他 ES6+ 特性被保留而不是被转换，你需要正确配置 tsconfig.json 文件。以下是一个示例配置：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "downlevelIteration": false // 关闭向下兼容迭代器
  }
}

在这个配置中，downlevelIteration 被设置为 false，这意味着 TypeScript 编译器不会为了兼容 ES5 而转换迭代器和其他 ES6+ 特性。

应用场景

• 当你需要确保代码在最新的 JavaScript 环境中运行时。
• 当你在开发一个库或框架，并且希望用户能够利用最新的 JavaScript 特性时。
• 当你在使用现代的开发工具和框架，如 React、Vue 或 Angular，并且希望充分利用它们的最新功能时。

示例代码

假设你有以下 TypeScript 代码：

const name = 'World';
const greeting = `Hello, ${name}!`;
console.log(greeting);

使用上述 tsconfig.json 配置编译后，生成的 JavaScript 代码将保留模板字符串：

const name = 'World';
const greeting = `Hello, ${name}!`;
console.log(greeting);

而不是被转换为 ES5 兼容的代码。

通过这种方式，你可以确保你的 TypeScript 代码在编译后仍然保持最新的 JavaScript 特性，从而提高代码的性能和可维护性。