Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
78
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
78
Help us understand the problem. What are the problem?