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 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 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.
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 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.
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
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.
The safest way to install Electron is using an exact version number:
npm install electron --save-dev --save-exact
Or if you're using yarn:
yarn add electron --dev --exact
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.
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
For a summary of how to install and use Electron's new TypeScript annotations,
watch this short demo screencast:
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.
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.
Method autcompletion
Inline method reference
Argument checking
Getting started with 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.
There's also a
handbook
and a
playground
on the official TypeScript website.
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
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
If you encounter any issues using Electron's new TypeScript definition files,
please file an issue on the
electron-typescript-definitions repository.
Happy TypeScripting!