【TypeScript 演化史 -- 12】ES5/ES3 的生成器和迭代支持及 --checkJS选项下 .js 文件中的错误

2022-06-15 13:37:50 浏览数 (1)

作者：Marius Schulz 译者：前端小智 来源：https://mariusschulz.com/

点赞再看，养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

TypeScript 2.3 引入了一个新的--downlevelIteration标志，为以 ES3 和 ES5 目标添加了对 ES6 迭代协议的完全支持。for...of循环现在可以用正确的语义进行向下编译。

使用 for...of 遍历数组

假设咱们现在的tsconfig.json 设置 target 为 es5:

代码语言：javascript复制
{
  "compilerOptions": {
    "target": "es5"
  }
}

创建 indtx.ts 文件并输入以下内容：

代码语言：javascript复制
const numbers = [4, 8, 15, 16, 23, 42];

for (const number of numbers) {
  console.log(number);
}

因为它包含任何 TypeScript 特定的语法，所以不需要先通过TypeScript编译器就可以直接运行ts文件：

代码语言：javascript复制
$ node index.ts
4
8
15
16
23
42

现在将index.ts文件编译成index.js：

代码语言：javascript复制
tsc -p .

查看生成的 JS 代码，可以看 到TypeScript 编译器生成了一个传统的基于索引的for循环来遍历数组:

代码语言：javascript复制
var numbers = [4, 8, 15, 16, 23, 42];
for (var _i = 0, numbers_1 = numbers; _i < numbers_1.length; _i  ) {
    var number = numbers_1[_i];
    console.log(number);
}

如果运行这段代码，可以正常工作：

代码语言：javascript复制
$ node index.js
4
8
15
16
23
42

运行node index.ts和node index.js是完全相同的，这说明咱们没有通过运行 TypeScript 编译器来改变程序的行为。

使用 for...of 遍历字符串

在来看看 for...of的另外一个例子，这次咱们遍历的是字符串而不是数组：

代码语言：javascript复制
const text = "Booh! 


	


ide json javascript typescript https 




	






	

 0 人点赞