跳转到主要内容

宣布在 Electron 中支持 TypeScript

·阅读时长 5 分钟

现在 `electron` npm 包中包含了一个 TypeScript 定义文件,它为整个 Electron API 提供了详细的注解。这些注解可以改善您的 Electron 开发体验,即使您正在编写原生 JavaScript。只需 `npm install electron` 即可在您的项目中获得最新的 Electron 类型。


TypeScript 是微软创建的一个开源编程语言。它是 JavaScript 的超集,通过添加静态类型支持来扩展该语言。近年来,TypeScript 社区发展迅速,在最近的 Stack Overflow 开发者调查中,TypeScript 被评为最受欢迎的编程语言之一。TypeScript 被描述为“可扩展的 JavaScript”,并且 GitHubSlackMicrosoft 的团队都在使用它来编写可扩展的 Electron 应用,这些应用被数百万人使用。

TypeScript 支持 JavaScript 中的许多较新语言特性,如类、对象解构和 async/await,但其真正与众不同的特性是类型注解。声明程序预期的输入和输出数据类型可以通过在编译时帮助您发现错误来减少 bug,并且注解还可以作为您程序工作方式的正式声明。

当库用原生 Javascript 编写时,类型通常在编写文档时含糊不清地作为事后补充。函数通常可以接受比文档记录更多的类型,或者函数可能有一些未记录的隐式约束,这可能导致运行时错误。

TypeScript 通过定义文件解决了这个问题。TypeScript 定义文件描述了库的所有函数以及它期望的输入和输出类型。当库作者在其发布的库中打包 TypeScript 定义文件时,库的使用者可以在他们的编辑器中直接探索其 API,并立即开始使用它,通常无需查阅库的文档。

许多流行的项目,如 AngularVue.jsnode-github(现在还有 Electron!)会编译自己的定义文件并将其打包到发布的 npm 包中。对于不打包自己定义文件的项目,有一个DefinitelyTyped,这是一个社区维护的定义文件生态系统。

安装

从 1.6.10 版本开始,每次 Electron 发布都包含其自己的 TypeScript 定义文件。当您从 npm 安装 electron 包时,electron.d.ts 文件会自动与安装的包一起打包。

安装 Electron 的最安全方法是使用精确的版本号

npm install electron --save-dev --save-exact

或者,如果您使用的是 yarn

yarn add electron --dev --exact

如果您已经在使用第三方定义,如 @types/electron@types/node,您应该将它们从您的 Electron 项目中删除,以防止任何冲突。

定义文件来源于我们的结构化 API 文档,因此它将始终与Electron 的 API 文档保持一致。只需安装 `electron`,您将始终获得与您使用的 Electron 版本同步的 TypeScript 定义。

用法

有关如何安装和使用 Electron 新 TypeScript 注解的摘要,请观看此短演示视频

如果您正在使用Visual Studio Code,您已经内置了 TypeScript 支持。还有针对 AtomSublimevim其他编辑器的社区维护插件。

一旦您的编辑器配置为支持 TypeScript,您将开始看到更多上下文感知的行为,如自动完成建议、内联方法引用、参数检查等。

Method autocompletion

Method reference

Argument checking

开始使用 TypeScript

如果您是 TypeScript 新手并想了解更多,这个来自微软的入门视频对该语言的创建原因、工作原理、使用方法以及未来发展方向进行了很好的概述。

在官方 TypeScript 网站上,还有一个手册和一个在线编译器

由于 TypeScript 是 JavaScript 的超集,您现有的 JavaScript 代码已经是有效的 TypeScript。这意味着您可以逐步将现有的 JavaScript 项目迁移到 TypeScript,根据需要添加新的语言功能。

致谢

如果没有 Electron 社区的开源维护者的帮助,这个项目是不可能实现的。感谢Samuel AttardFelix RiesebergBirunthan MohanathasMilan BurdaBrendan Forster 以及其他许多人在 bug 修复、文档改进和技术指导方面提供的帮助。

支持

如果您在使用 Electron 新的 TypeScript 定义文件时遇到任何问题,请在electron-typescript-definitions 仓库中提交 issue。

祝您 TypeScript 愉快!