Error with variable declaration in TypeScript

Question

I know, TypeScript generate JavaScript file with equivalent code.

But, here is a problem, where TypeScript doesn't generate equivalent JavaScript code.

demo.ts

function foo()
{
    if(1)
    {
        let myName = "Raktim";
    }
    console.log(myName);
}
foo();

demo.js

function foo() {
    if (1) {
        var myName = "Raktim";
    }
    console.log(myName);
}
foo();

See above, I declared a locale variable myName in the demo.ts file. But, look the JavaScript code it declare myName variable as global variable.

Summary: TypeScript generated JavaScript code's variable always are in global scope (in my case).

So, end of the code the meaning is changed. Why?

Did you intend your code to result in a reference error? If your run your TS code (which is also valid JS code) as JS, you'll get a reference error because let causes myName to be scoped to the if, so the console.log won't be able to use it. The JS you shared wouldn't have that problem because myName would be hoisted into foo's scope (not the global scope). — TheJim01
– TheJim01, Commented Jun 14, 2020 at 16:40
@TheJim01...Yes, I expect it should give reference error as a result. Because, I declare locale variable in TS code but it act as global variable in JS code. So, obviously browser treat it as a global variable. Which I didn't want. — RAKTIM BANERJEE
– RAKTIM BANERJEE, Commented Jun 14, 2020 at 16:54

Sandro Gianola · Accepted Answer · 2020-06-14 18:13:17Z

1

i think you are using something like webpack that use babel to transpile code.

https://babeljs.io/docs/en/babel-preset-env

you need to tell babel your target browser.

ex if you target the last chrome that read let and const the compiled code doesn't change

UPDATE: solved in comment using --target options ex: tsc --target ES2016 file.ts

edited Jun 14, 2020 at 18:13

answered Jun 14, 2020 at 16:43

Sandro Gianola

614 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

RAKTIM BANERJEE Over a year ago

Hey, Sandro I'm surrender to you. I don't know what is babel or how to tell about my target browser to babel! Can you tell me more about this?

Sandro Gianola Over a year ago

can you tell me what start code have you use? because there are several way to setup, if your project is new, i think you can configure the browser target in your package.json "browserslist": ['last 1 Chrome versions']

RAKTIM BANERJEE Over a year ago

I just create demo.ts file with Sublime Text 3. Where are package.json file?

Sandro Gianola Over a year ago

you can see also how babel transpile code here babeljs.io/…

Sandro Gianola Over a year ago

can you give me another try? :) try this tsc --target ES2016 demo.ts

|

Collectives™ on Stack Overflow

Error with variable declaration in TypeScript

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related