TypeScript2.0時代の、型定義ファイル

  • 23
    Like
  • 0
    Comment

npmから外部モジュールやライブラリをインストールしているプログラマーの皆さん、こんにちわ!どうも、はこです。
Angular2などで書いてると、なんとなく型定義ファイルを使ったり、ライブラリ側が用意してくれている(xxx.jsと同じ階層にxxx.d.tsがいる)等ありますが、jsしかないライブラリを使う機会も多いですよね!

さて、そういうときに既存の型定義ファイルを使うと便利です。
・・・が、型定義ファイルの書き方は歴史的経緯で混沌としています。

時代に沿わない古いやり方

これらの方法は、TypeScript 2.0 以降は動きません。

非推奨:TSD

管理ツール導入
npm install tsd -g
インストール
tsd install jquery --save
使用方法
/// <reference path="../typings/jquery.d.ts" />

非推奨:typings

管理ツール導入
npm i --global typings
インストール
typings install dt~jquery --global --save
使用方法
/// <reference path="../typings/tsd.d.ts" />

時代にマッチする推奨のやり方

TypeScript2.0 以降は、このやり方です。

管理ツール導入は不要です!

インストール

npm install -D @types/jquery

使用方法

import * as $ from 'jquery'

npmさえあれば、簡単に使えますね!


…もしも、あなたが探しているjsライブラリの型定義ファイルが

npm install -D @types/ライブラリ名

で見つからないようであれば、 @を抜いた npm install -D types/ライブラリ名 を試してみてください。
( @ を抜くと、 DT管理の型定義ファイルでなく、 github/types が作った型定義ファイルを参照するようになります。)

余談:

DefinitelyTypedとMicrosoft-TyoesPublisherとtypesリポジトリ

DefinitelyTyped (通称DT)
は非営利組織で、型定義ファイルの管理をしている団体。

Microsoft-TyoesPublisher
は営利組織 Microsoft inc. の管理するBOTで、たぶん非営利部門で、npmの@typesの管理者であり、

types リポジトリは、npm上でホストされる npmの@types との違いは
1. npm上にないこと(単なるgitリポジトリ)
2. @typesに載ってないライブラリが存在するので便利
3. 運営主体が誰なのかよくわからない

TypeScript型定義の雑な歴史

tsd : コメントで頑張って読む方式。DefinitelyTyped(DT)という組織が立ち上がり、様々なライブラリの型定義を登録。くそでかいリポジトリをpullする必要があった。
 ↓
typings: とりあえずnpm上からも取れるし、DTからでも取れるようにした。
だが、基本的にはDTのまま。コメント定義で頑張って読む。非DTになりたい。
 ↓
@types : 言語開発者(=Microsoft)が外部ライブラリをきちんと対応するために大議論。「npmでいれたい!」という主張にあわせ言語側の対応も再構築。
DTでホストしていた型定義をnpmに登録(BOTで)。
npm経由で入れることで

  • package.jsonに定義がすべて統合される。typings.jsonのような依存性管理ファイルが不要に。
  • tsd/typingsと違い、DTの巨大リポジトリをpullする必要がなくて早い
  • 社外に出せないライブラリも node_modules/@types/ 以下に保存されるように package.jsonで型定義作ればいいので簡単

とかの利点が得られるようになった。
ついでに言語側の方も対応したので、 /// <reference path=".. ではなく import {ClassName} from 'Modules/ModuleName' と参照すれば型情報を取り込むようになった。
言語として完成された感ある・・・というか

すごく楽!!!

完全な余談

D!T! D!T! DT捨テル!