Announcing TypeScript support in Electron

June 01, 2017 0 Comments

Announcing TypeScript support in Electron

 

 

zekezeke RSS Feed

The electron npm package now includes a TypeScript definition file that provides detailed annotations of the entire Electron API. These annotation 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 autocompletion
Method autcompletion

Method reference
Inline method reference

Argument checking
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!


Tag cloud