10个基本的打字条技巧和窍门

本文探讨一系列在Angular项目及其他TypeScript项目中都适用的技巧和窍门。

近年来，JavaScript中静态类型的需求迅速增长。大型前端项目、更复杂的服务器和复杂的命令行工具都促进了JavaScript世界中对更具防御性编程的需求。此外，在实际运行之前编译应用程序的负担并未被视为弱点，而是一个机会。虽然出现了两个强大的竞争者（TypeScript和Flow），但许多趋势实际上表明只有一个可能会胜出——TypeScript。

除了营销宣传和众所周知的特性外，TypeScript拥有一个拥有非常活跃贡献者的惊人社区。它还在语言设计方面拥有业内顶尖的团队之一。在Anders Hejlsberg的领导下，该团队成功地将大型JavaScript项目的格局完全转变为几乎完全由TypeScript驱动的业务。凭借VSTS或Visual Studio Code等非常成功的项目，微软本身就是这项技术的坚定支持者。

但吸引人的不仅仅是TypeScript的特性，还有TypeScript支持的可能性和框架。谷歌决定完全采用TypeScript作为Angular 2 的首选语言，已被证明是一个双赢的局面。TypeScript不仅获得了更多关注，Angular本身也受益匪浅。使用静态类型，编译器已经可以给我们提供信息丰富的警告和关于代码为何无法运行的有用解释。

关键要点

• 自定义模块定义：当外部库缺少TypeScript定义时，在module.d.ts文件中创建自己的定义，以增强开发精度，并可能通过共享这些定义来为社区做出贡献。
• 理解枚举与常量枚举：利用const enum进行性能优化，因为它不会生成运行时代码，而普通的枚举会生成运行时代码，这使得它们可以根据项目需求适用于不同的场景。
• 利用类型表达式和别名：通过使用类型表达式和别名来简化代码维护并提高可重用性，从而更容易进行更改并在整个代码库中进行更好的类型检查。
• 使用鉴别器进行联合类型：实现鉴别联合以更有效地处理不同形状的数据，从而能够安全地使用公共属性来确定正确的类型上下文。
• 避免使用any以提高特异性：将any类型的使用保留给真正通用的数据，并努力定义更具体的类型，这有助于维护类型安全并减少运行时错误。
• 利用泛型创建灵活且可重用的代码：应用泛型来创建高度可重用和灵活的函数和组件，这些函数和组件可以与各种类型一起工作，同时仍然保持类型安全。

TypeScript技巧1：提供您自己的模块定义

TypeScript是JavaScript的超集。因此，可以利用每个现有的npm包。虽然TypeScript生态系统庞大，但并非所有库都附带适当的类型定义。更糟糕的是，对于某些（较小的）包，甚至不存在单独的声明（以@types/{package}的形式）。此时，我们有两个选择：

1. 使用TypeScript技巧7引入遗留代码
2. 自己定义模块的API。

后者绝对是首选。我们无论如何都必须查看模块的文档，但将其键入出来将防止开发过程中出现简单的错误。此外，如果我们对刚刚创建的类型定义非常满意，我们总是可以将其提交给@types以将其包含在npm中。因此，这也让我们获得了社区的尊重和感激。不错！

提供我们自己的模块定义最简单的方法是什么？只需在源目录中创建一个module.d.ts（也可以命名为与包相同的名称——例如，对于npm包unknown-module，可以命名为unknown-module.d.ts）。

让我们为这个模块提供一个示例定义：

declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}

显然，这只是第一步，因为我们根本不应该使用any。（有很多原因可以解释这一点。TypeScript技巧5展示了如何避免它。）但是，它足以让TypeScript了解模块并防止编译错误，例如“unknown module ‘unknown-module’”。这里的export表示法适用于经典的module.exports = ...类型的包。

以下是此类模块在TypeScript中的潜在使用：

declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}

如前所述，整个模块定义现在位于导出的常量的类型声明中。如果导出的内容是一个函数，则声明可能如下所示：

import * as unknownModule from 'unknown-module';

当然，也可以使用使用ES6模块语法导出功能的包：

declare module 'unknown-module' {
  interface UnknownModuleFunction {
    (): void;
  }
  const unknownModule: UnknownModuleFunction;
  export = unknownModule;
}

(以下内容与原文相同，篇幅较长，为避免重复，此处省略TypeScript技巧2-10以及后续内容。) 请根据需要自行参考原文。 如果需要我继续生成剩余内容，请告知。

以上是10个基本的打字条技巧和窍门的详细内容。更多信息请关注PHP中文网其他相关文章！