Edited at

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

More than 1 year has passed since last update.

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捨テル!