I am trying to understand hoisting in typescript. Does hoisting take place in Typescript and if yes, is there any difference compared to how it happens in Javascript.
eg: The code transpiles fine even though I declared interface after the function that is using it. Is it safe to assume it happens due to hoisting as a part of transpilation or else there is something else involved here.
getCarDetails({name: 'Xyz', topSpeed: 300})
function getCarDetails(carDetails: CarDetails) {
console.log(carDetails.name);
console.log(carDetails.topSpeed);
}
interface CarDetails {
name: string;
topSpeed: number;
}
I am trying to understand hoisting in typescript. Does hoisting take place in Typescript and if yes, is there any difference compared to how it happens in Javascript.
eg: The code transpiles fine even though I declared interface after the function that is using it. Is it safe to assume it happens due to hoisting as a part of transpilation or else there is something else involved here.
getCarDetails({name: 'Xyz', topSpeed: 300})
function getCarDetails(carDetails: CarDetails) {
console.log(carDetails.name);
console.log(carDetails.topSpeed);
}
interface CarDetails {
name: string;
topSpeed: number;
}
- @VLAZ: could you reflect once on the answer provided below, where it is mentioned "Hoisting does take place in TS" – atish Commented Apr 19, 2021 at 9:47
- 2 Depends on your interpretation. I think Quentin means that code written in TS will still exhibit the same hoisting behaviour as if it's written in JS. Which is correct. I'm viewing it from another angle - does TS hoist your code. In which case the answer is "no" because, to quote Quentin: "TS is just JS with bits added." It doesn't actually run your code. Therefore, it's not TS that hoists it - it's the runtime environment. Both are valid interpretations, depending on what you mean by your question. At the core of it all is understanding what TS does. – VLAZ Commented Apr 19, 2021 at 9:51
3 Answers
Reset to default 12Does hoisting take place in Typescript
If your question is "Does TypeScript cause hoisting behaviour of the code?" then the answer is "No, it does not".
TypeScript does not exist at runtime, only at compile time. While "hoisting" is a concept related to running JavaScript code. TypeScript has as much of an impact on that as Notepad++ - whether you actually write your code there or not. That is to say, it has no influence over hoisting. It is the JavaScript engine that does it when it executes the code. Which is (potentially) far after the TypeScript compiler has finished with it.
However, if the question is "Does code written in TypeScript still exhibit hoisting behaviour?", the answer is "Yes, it does, but not in any way related to the fact that it is written in TypeScript". It would exhibit the same behaviour whether or not TypeScript is there.
The code transpiles fine even though I declared interface after the function that is using it. Is it safe to assume it happens due to hoisting as a part of transpilation or else there is something else involved here.
To be clear with terminology - "hoisting" refers to declarations being processed before running the code. This JavaScript code works due to hoisting:
fn();
function fn() {};
This TypeScript code does not use hoisting*:
const x: Foo = {id: 1};
interface Foo {
id: number;
}
The type system only exists at compile time. Any TypeScript constructs like interfaces will be removed after compilation. Since they do not exist in JavaScript, it is an arbitrary and useless restriction to mandate interfaces be defined prior to using them.
The TypeScript code in the question compiles to the following JavaScript code:
getCarDetails({ name: 'Xyz', topSpeed: 300 });
function getCarDetails(carDetails) {
console.log(carDetails.name);
console.log(carDetails.topSpeed);
}
Thus only getCarDetails() will be hoisted when the code runs.
* const declarations are hoisted in JavaScript. This is the behaviour that leads to the temporal dead zone. This is just for the sake of completeness - it is not relevant in the given example.
YES, TypeScript support hoisting
just a small proof:
interface Circle {
kind: ShapeKind.Circle;
radius: number;
}
interface Square {
kind: ShapeKind.Square;
sideLength: number;
}
enum ShapeKind {
Circle,
Square,
}
Does hoisting take place in Typescript and if yes,
Yes. TS is just JS with bits added.
is there any difference compared to how it happens in Javascript.
No.
The code transpiles fine even though I declared interface after the function that is using it. Is it safe to assume it happens due to hoisting as a part of transpilation or else there is something else involved here.
Interfaces are only used for type checking, which only happens in the TypeScript (i.e. at build time and in linting tools). JavaScript doesn't support interfaces so they will be discarded during the transpiling process.