javascript - typescript 吊装

Question

我试图理解 typescript 中的提升。提升是否发生在 Typescript 中，如果是，与 Javascript 中发生的方式相比有什么不同。
例如:即使我在使用它的函数之后声明了接口(interface)，代码也可以很好地转换。是否可以安全地假设它是由于作为转译的一部分而发生的提升，或者这里涉及到其他一些东西。

getCarDetails({name: 'Xyz', topSpeed: 300})

function getCarDetails(carDetails: CarDetails) {

  console.log(carDetails.name);

  console.log(carDetails.topSpeed);

}

interface CarDetails {

  name: string;

  topSpeed: number;

}

Answer 1

Does hoisting take place in Typescript

如果您的问题是“ TypeScript 会导致代码的提升行为吗？”，那么答案是“ 不，它不会 ”。
TypeScript 在运行时不存在，仅在编译时存在。而“提升”是一个与运行 JavaScript 代码相关的概念。 TypeScript 对它的影响与 Notepad++ 一样大——无论你是否真的在那里编写代码。也就是说，对吊装没有影响。 JavaScript 引擎在执行代码时执行此操作。在 TypeScript 编译器完成它之后(可能)很远。
但是，如果问题是“ 用 TypeScript 编写的代码是否仍然表现出提升行为？ ”，答案是“ 是的，但与编写它的事实没有任何关系在 TypeScript 中。无论 TypeScript 是否存在，它都会表现出相同的行为。

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.

用术语说清楚 - “提升”是指在运行代码之前处理声明。此 JavaScript 代码由于提升而起作用:

fn();
function fn() {};

此 TypeScript 代码不使用提升*:

const x: Foo = {id: 1};

interface Foo {
  id: number;
}

类型系统仅在编译时存在。编译后将删除任何 TypeScript 结构(如接口(interface))。由于它们在 JavaScript 中不存在，因此在使用它们之前强制定义接口(interface)是一种任意且无用的限制。
问题中的 TypeScript 代码 compiles to以下 JavaScript 代码:

getCarDetails({ name: 'Xyz', topSpeed: 300 });
function getCarDetails(carDetails) {
    console.log(carDetails.name);
    console.log(carDetails.topSpeed);
}

因此只有 getCarDetails()代码运行时将被提升。

* const declarations are hoisted in JavaScript .这是导致 the temporal dead zone 的行为。 .这只是为了完整起见 - 它与给定示例无关。