すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

TypeScript でChrome拡張機能を作る時の環境を作る (Visual Studio 2015)

先人の方々が非常にありがたい型定義ファイルをたくさん作り上げているので、感謝の意を述べながら開発していけば良いのですが、たくさんありすぎて何を入れていいのか(全部ぶら下げてしまえば良いのか)迷うやつなのです。

今回はChrome extensionについてのお話。

 

TL;DR

NuGetとか使えば良いと思いますよ。

www.buildinsider.net

 

 

 

適宜プロパティを弄ります。

プロジェクトのプロパティ

 

適宜フォルダなどを作成して、定義ファイルを配置できるようにします。

 

github.com

 

Chrome拡張機能の定義ファイル「chrome.d.ts」を利用するので

/// <reference path="(フォルダ名)/chrome/chrome.d.ts" />
※一例です

ここから「reference path」を検索する等をして、依存している定義を探していきます。

構成一覧(例)

だいたいこのような構成になればコードの補完が効いたり色々便利になります。

 

設定次第では、Promiseの扱いでエラーが出る場合があります。
(例えば、ECMAScript 5など)

github.com

似たようなissue

 

※なにかエラーが出たやつ。

ECMAScript 5とes6-promise.d.tsが存在しない組み合わせ

es6-promise.d.tsを追加で入れてあげるとエラーが消えます。

 

Chrome拡張機能の開発は、

  • 基本的に自動でオンライン更新
  • Chrome本体も自動更新 (サポートされているOSのほぼ全てが最新版)
  • 新しい機能も比較的気楽に投入できる

これらの特徴があるため、ある時期が来たらECMAScriptのバージョンを6(ES2015)へ上げてしまえば解決します。

 

TypeScriptも2.0になり、ブラウザもどんどん更新されているので、サクサクと最新の物を触っていきましょう。 :)

 

くまやつ。

NEW リズムでともだち こぐまのトンピー ぬいぐるみ