メインコンテンツにスキップ

Electron での TypeScript サポートの発表

·4 分で読めます
zeke
zeke

electron npm パッケージには、Electron API 全体の詳細なアノテーションを提供する TypeScript 定義ファイルが含まれるようになりました。これらのアノテーションは、**プレーンな JavaScript を記述している場合でも**、Electron 開発エクスペリエンスを向上させることができます。プロジェクトで最新の Electron タイプ定義を取得するには、npm install electron を実行するだけです。

TypeScript は、Microsoft によって作成されたオープンソースのプログラミング言語です。これは、静的型のサポートを追加することで言語を拡張する JavaScript のスーパーセットです。TypeScript コミュニティは近年急速に成長しており、TypeScript は最近の Stack Overflow 開発者調査で最も愛されているプログラミング言語の 1 つにランクインしました。TypeScript は「スケーラブルな JavaScript」と表現されており、GitHub、Slack、Microsoft のチームはすべて、何百万人もの人々によって使用されているスケーラブルな Electron アプリを記述するために TypeScript を使用しています。

TypeScript は、クラス、オブジェクトの分割代入、async/await などの JavaScript の多くの新しい言語機能をサポートしていますが、その真の差別化要因は**型アノテーション**です。プログラムが期待する入力および出力データ型を宣言することで、コンパイル時にエラーを見つけるのに役立ち、バグを減らすことができます。また、アノテーションはプログラムの動作方法の正式な宣言としても機能します。

ライブラリがプレーンな Javascript で記述されている場合、型はドキュメントを記述する際に後付けとして漠然と定義されることがよくあります。関数はドキュメント化されているよりも多くの型を受け入れることができたり、ドキュメント化されていない見えない制約があり、ランタイムエラーが発生する可能性があります。

TypeScript は、**定義ファイル**を使用してこの問題を解決します。TypeScript 定義ファイルは、ライブラリのすべての関数とその予期される入力および出力の型を記述します。ライブラリの作成者が公開されたライブラリに TypeScript 定義ファイルをバンドルすると、そのライブラリのコンシューマーはエディター内で API を探索してすぐに使用を開始できます。多くの場合、ライブラリのドキュメントを参照する必要はありません。

Angular、Vue.js、node-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 サポートがすでに組み込まれています。Atom、Sublime、vim、および他のエディター用のコミュニティで維持されているプラグインもあります。

エディターが TypeScript 用に構成されると、オートコンプリートの提案、インラインメソッド参照、引数チェックなど、よりコンテキストを認識した動作が表示されます。

Method autocompletion

Method reference

Argument checking

TypeScript の概要​

TypeScript を初めて使用し、詳細を学びたい場合は、Microsoft のこの入門ビデオで、言語が作成された理由、しくみ、使用方法、今後の展望について説明しています。

TypeScript の公式ウェブサイトには、ハンドブックとプレイグラウンドもあります。

TypeScript は JavaScript のスーパーセットであるため、既存の JavaScript コードはすでに有効な TypeScript です。つまり、既存の JavaScript プロジェクトを TypeScript に徐々に移行し、必要に応じて新しい言語機能を追加できます。

謝辞​

このプロジェクトは、Electron のオープンソースメンテナーのコミュニティの助けがなければ実現しませんでした。Samuel Attard、Felix Rieseberg、Birunthan Mohanathas、Milan Burda、Brendan Forster、そしてバグ修正、ドキュメントの改善、技術指導を提供してくれた多くの人々に感謝します。

サポート​

Electron の新しい TypeScript 定義ファイルの使用中に問題が発生した場合は、electron-typescript-definitions リポジトリに問題を報告してください。

TypeScript を楽しんでください!