宣布 Electron 支持 TypeScript
electron npm 包现在包含一个 TypeScript 定义文件,提供了对整个 Electron API 的详细注释。这些注释可以提升你的 Electron 开发体验,即使你使用的是普通的 JavaScript。只需 npm install electron 就可以在你的项目中获取最新的 Electron 类型定义。
🌐 The electron npm package now includes a TypeScript definition file that provides detailed annotations of the entire Electron API. These annotations can improve your Electron development
experience even if you're writing vanilla JavaScript. Just
npm install electron to get up-to-date Electron typings in your project.
TypeScript 是由微软创建的一种开源编程语言。它是 JavaScript 的超集,通过添加对静态类型的支持来扩展语言。近年来,TypeScript 社区发展迅速,在最近的 Stack Overflow 开发者调查中,TypeScript 被评为最受喜爱的编程语言之一。TypeScript 被形容为“可扩展的 JavaScript”,GitHub、Slack 和 Microsoft 的团队都在使用它来编写可扩展的 Electron 应用,这些应用被数百万人使用。
🌐 TypeScript is an open-source programming language created by Microsoft. It's a superset of JavaScript that extends the language by adding support for static types. The TypeScript community has grown quickly in recent years, and TypeScript was ranked among the most loved programming languages in a recent Stack Overflow developer survey. TypeScript is described as "JavaScript that scales", and teams at GitHub, Slack, and Microsoft are all using it to write scalable Electron apps that are used by millions of people.
TypeScript 支持 JavaScript 中的许多新语言特性,比如类、对象解构和 async/await,但它真正的区别特性是类型注解。 声明程序预期的输入和输出数据类型可以减少错误,通过帮助你在编译时发现错误,同时这些注解也可以作为对程序工作方式的正式声明。
🌐 TypeScript supports many of the newer language features in JavaScript like classes, object destructuring, and async/await, but its real differentiating feature is type annotations. Declaring the input and output datatypes expected by your program can reduce bugs by helping you find errors at compile time, and the annotations can also serve as a formal declaration of how your program works.
当库使用原生 JavaScript 编写时,类型通常在编写文档时作为附带考虑而被模糊定义。函数通常可以接受的类型比文档中记录的更多,或者函数可能具有未记录的隐形约束,这可能导致运行时错误。
🌐 When libraries are written in vanilla Javascript, the types are often vaguely defined as an afterthought when writing documentation. Functions can often accept more types than what was documented, or a function can have invisible constraints that are not documented, which can lead to runtime errors.
TypeScript 通过 定义文件 解决了这个问题。TypeScript 定义文件描述了一个库的所有函数以及其预期的输入和输出类型。当库的作者在发布的库中打包 TypeScript 定义文件时,该库的使用者可以直接在编辑器中探索它的 API 并立即开始使用,通常无需查阅库的文档。
🌐 TypeScript solves this problem with definition files. A TypeScript definition file describes all the functions of a library and its expected input and output types. When library authors bundle a TypeScript definition file with their published library, consumers of that library can explore its API right inside their editor and start using it right away, often without needing to consult the library's documentation.
许多流行的项目,例如 Angular、Vue.js、node-github(以及现在的 Electron!)都会编译自己的定义文件,并将其与发布的 npm 包一起打包。对于那些没有打包自己定义文件的项目,有 DefinitelyTyped,这是一个由社区维护的第三方定义文件生态系统。
🌐 Many popular projects like Angular, Vue.js, node-github (and now Electron!) compile their own definition file and bundle it with their published npm package. For projects that don't bundle their own definition file, there is DefinitelyTyped, a third-party ecosystem of community-maintained definition files.
安装
🌐 Installation
从版本 1.6.10 开始,每个 Electron 版本都包含自己的 TypeScript 定义文件。当你从 npm 安装 electron 包时,electron.d.ts 文件会随安装的包自动打包。
🌐 Starting at version 1.6.10, every release of Electron includes its own
TypeScript definition file. When you install the electron package from npm,
the electron.d.ts file is bundled automatically with the
installed package.
安装 Electron 最安全的方法是使用确切的版本号:
🌐 The safest way to install Electron is using an exact version number:
npm install electron --save-dev --save-exact
或者如果你使用的是 yarn:
🌐 Or if you're using yarn:
yarn add electron --dev --exact
如果你已经在使用第三方定义,例如 @types/electron 和 @types/node,你应该将它们从你的 Electron 项目中移除,以防止任何冲突。
🌐 If you were already using third-party definitions like @types/electron
and @types/node, you should remove them from your Electron project to prevent
any collisions.
定义文件来源于我们的结构化 API 文档,因此它始终与Electron 的 API 文档保持一致。只需安装 electron,你就可以始终获得与所使用的 Electron 版本同步的 TypeScript 定义。
🌐 The definition file is derived from our
structured API documentation,
so it will always be consistent with Electron's API documentation.
Just install electron and you'll always get TypeScript definitions that are
up to date with the version of Electron you're using.
用法
🌐 Usage
想要了解如何安装和使用 Electron 的新 TypeScript 注解,请观看这个简短的演示录屏:
🌐 For a summary of how to install and use Electron's new TypeScript annotations, watch this short demo screencast:
如果你正在使用 Visual Studio Code,你已经拥有内置的 TypeScript 支持。还有社区维护的插件可用于 Atom、Sublime、vim 以及 其他编辑器。
🌐 If you're using Visual Studio Code, you've already got TypeScript support built in. There are also community-maintained plugins for Atom, Sublime, vim, and other editors.
一旦你的编辑器配置好了 TypeScript,你就会开始看到更多上下文感知的功能,比如自动补全建议、内联方法引用、参数检查等。
🌐 Once your editor is configured for TypeScript, you'll start to see more context-aware behavior like autocomplete suggestions, inline method reference, argument checking, and more.



TypeScript 入门
🌐 Getting started with TypeScript
如果你是 TypeScript 新手并想了解更多,这个来自微软的入门视频提供了对该语言创建原因、工作原理、使用方法以及未来发展方向的不错概述。
🌐 If you're new to TypeScript and want to learn more, this introductory video from Microsoft provides a nice overview of why the language was created, how it works, how to use it, and where it's headed.
官方 TypeScript 网站上还有一本手册和一个练习场。
🌐 There's also a handbook and a playground on the official TypeScript website.
由于 TypeScript 是 JavaScript 的超集,你现有的 JavaScript 代码已经是有效的 TypeScript。这意味着你可以逐步将现有的 JavaScript 项目迁移到 TypeScript,根据需要逐步加入新的语言特性。
🌐 Because TypeScript is a superset of JavaScript, your existing JavaScript code is already valid TypeScript. This means you can gradually transition an existing JavaScript project to TypeScript, sprinkling in new language features as needed.
致谢
🌐 Thanks
这个项目如果没有 Electron 开源维护者社区的帮助是不可能实现的。感谢 Samuel Attard、Felix Rieseberg、Birunthan Mohanathas、Milan Burda、Brendan Forster 以及其他许多人在修复漏洞、改进文档和技术指导方面的贡献。
🌐 This project would not have been possible without the help of Electron's community of open-source maintainers. Thanks to Samuel Attard, Felix Rieseberg, Birunthan Mohanathas, Milan Burda, Brendan Forster, and many others for their bug fixes, documentation improvements, and technical guidance.
支持
🌐 Support
如果你在使用 Electron 的新 TypeScript 定义文件时遇到任何问题,请在 electron-typescript-definitions 仓库中提交问题。
🌐 If you encounter any issues using Electron's new TypeScript definition files, please file an issue on the electron-typescript-definitions repository.
祝你 TypeScript 愉快!
🌐 Happy TypeScripting!