Question

我正在阅读有关打字稿的介绍性教程，其中我有一个main.ts文件

Main.ts

function  dosomething(){
for(let i=0;i<3;i++)
    {
    console.log("i "+ i); // line a
    }

  console.log("Finally "+ i); //Line b
}

dosomething(); //calling the function

当我使用node编译文件时，编译步骤显示错误找不到我对于行b但仍生成以下main.js文件

Main.js

function dosomething() {
    for (var i = 0; i < 3; i++) {
        console.log("i " + i);
    }

    console.log("Finally " + i);
}

正如教程所说，typescript默认转换为ES5。这就是为什么我们得到var而不是Let。并执行main.js按预期工作。

我的问题是假设我们也可以使用Typescript而不是Babel，Babel将ES6代码转换为ES5，我已经理解的是通过在ES6中编写我们的代码获得的任何功能，babel将其转换为ES5中的等效代码。因此，将关键字转换为Var，但使用一些额外的代码，这将使此var关键字在等效的ES5代码中表现为let。因此，如果Typescript只是将let转换为var，那么说我们可以使用typescript而不是Babel。

我在babel编译器中运行上面的main.ts片段并获得以下ES5代码

Main.js

function dosomething() {
    for (var _i = 0; _i < 3; _i++) {
        console.log("i " + _i);
    }

    console.log("Finally " + i);
}

dosomething();

请注意，让main.ts中的for循环中的变量i已转换为_i和外部console.log，我只是保留i。

Answer 1

TypeScript并不像Babel那样严格遵循规范，但会生成更清晰，更易读的输出。但目前的情况可以由两个转发器妥善处理。

上面的代码包含使用在当前范围内不存在的i变量的 Line b 上的错误。问题是TypeScript配置不当，并在出现错误时发出错误编译的代码，这会产生误导。防止这种情况的一种方法是使用noEmitOnError compiler option。

当代码正确时，TypeScript和Babel都会正确处理范围（除了无法转换为ES5的临时死区）。

对于全局i变量，此TypeScript代码

declare var i;

for(let i=0;i<3;i++) {
  console.log("i "+ i); // line a
}

console.log("Finally "+ i); //Line b

应编译为

for (var i_1 = 0; i_1 < 3; i_1++) {
    console.log("i " + i_1); // line a
}
console.log("Finally " + i); //Line b

对于本地i变量，此

let i;

for(let i=0;i<3;i++) {
  console.log("i "+ i); // line a
}

console.log("Finally "+ i); //Line b

应编译为

var i;
for (var i_1 = 0; i_1 < 3; i_1++) {
    console.log("i " + i_1); // line a
}
console.log("Finally " + i); //Line b

在TypeScript

1 个答案: