Compiling Code in TypeScript

Question

I am going through a introductory tutorial about typescript where i have a main.ts file as

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

When I compile the file using node, the compilation step shows error cannot find i for Line b but still generates the following main.js file

Main.js

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

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

As tutorial says, typescript converts by default to ES5. That's why we got var instead of Let. and executing main.js works as expected.

My question is assuming We can also use Typescript instead of Babel,Babel converts ES6 code to ES5 which I have understood is whatever functionality we got by writing our Code in ES6 ,babel converts it into equivalent code in ES5. So let keyword will be converted to Var but with some extra code which will make this var keyword behave as let in equivalent ES5 code. So if Typescript simply converts let to var, Is it right in saying We can use typescript instead of Babel.

I am running the above main.ts snippet in babel compiler and get the following ES5 Code

Main.js

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

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

dosomething();

Notice that let variable i in for loop in main.ts has been converted to _i and and outer console.log i simply remains i.

Yes, you don't need babel if you have typescript compiling it to js — cbll
– cbll, Commented Jan 3, 2018 at 14:45
I still don't understand your question, but my answer is: don't write illegal code, even if it somehow compiles. Just write your code properly. — Ingo Bürk
– Ingo Bürk, Commented Jan 3, 2018 at 14:46
TS will still emit code on certain types of errors, both babble and TS can emit ES5 and should produce functionally equivalent code, when you have errors in the code the handling might be different, but you should not ignore the errors and you should be fine — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jan 3, 2018 at 14:51
let is block scoped inside the for loop. You cant usually access it outside of it. You should declare it outside of the loop if you want to use it there. — Jonas Wilms
– Jonas Wilms, Commented Jan 3, 2018 at 14:57

Estus Flask · Accepted Answer · 2018-01-03 15:00:50Z

TypeScript doesn't always follow the specs as strictly as Babel but generates the output that is cleaner and more readable. But current case can be properly treated by both transpilers.

The code above contains the error on Line b that uses i variable that doesn't exist in current scope. The problem is that TypeScript was improperly configured and emits incorrectly compiled code when there are errors, which is misleading. A way to prevent this is to use noEmitOnError compiler option.

When the code is correct, scopes are properly treated by both TypeScript and Babel (with the exception of temporal dead zone that cannot be transpiled to ES5).

For global i variable, this TypeScript code

declare var i;

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

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

should be compiled to

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

And for local i variable, this

let i;

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

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

should be compiled to

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

Collectives™ on Stack Overflow

Compiling Code in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related