打字稿提升

Question

我试图理解打字稿中的提升。提升是否在 Typescript 中进行，如果是，与 Javascript 中的提升方式相比有什么不同吗？

例如：即使我在使用它的函数之后声明了接口，代码也可以很好地转换。可以安全地假设它的发生是由于作为转译的一部分的提升而发生的，或者这里还涉及其他东西。

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

提升是否在 Typescript 中进行

如果您的问题是“ TypeScript 是否会导致代码的提升行为？ ”，那么答案是“不，不会”。

TypeScript 在运行时不存在，仅在编译时存在。而“提升”是一个与运行JavaScript 代码相关的概念。TypeScript 对此的影响与 Notepad++ 一样大 - 无论您是否真的在那里编写代码。也就是说对吊装没有影响。JavaScript 引擎在执行代码时会执行此操作。（可能）距离 TypeScript 编译器完成它还很远。

然而，如果问题是“用 TypeScript 编写的代码是否仍然表现出提升行为？ ”，答案是“是的，确实如此，但与它是用 TypeScript 编写的事实没有任何关系”。无论 TypeScript 是否存在，它都会表现出相同的行为。

即使我在使用它的函数之后声明了接口，代码也可以很好地转换。可以安全地假设它的发生是由于作为转译的一部分的提升而发生的，或者这里还涉及其他东西。

为了清楚地使用术语 - “提升”是指在运行代码之前处理的声明。此 JavaScript 代码由于提升而起作用：

fn();
function fn() {};

此 TypeScript 代码不使用提升*：

const x: Foo = {id: 1};

interface Foo {
  id: number;
}

类型系统仅在编译时存在。编译后，任何 TypeScript 结构（如接口）都将被删除。由于它们不存在于 JavaScript 中，因此在使用它们之前强制定义接口是一种任意且无用的限制。

问题中的 TypeScript 代码编译为以下 JavaScript 代码：

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

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

*const声明在 JavaScript 中被提升。这是导致暂时死区的行为。这只是为了完整性 - 它与给定的示例无关。