Help us understand the problem. What is going on with this article?

特別なツール不要! TypeScript 2時代の型定義ファイルの取り扱い方

More than 1 year has passed since last update.

TypeScriptを使う上で欠かせないのが型定義ファイルの取り扱いです。TypeScript 1系では、型定義ファイルを管理するツールとして、tsdTypingsがありました。TypeScript 2以降は特別なツールはいらず、Node.jsインストール時に付属するnpmのみで型定義ファイルが管理できる機能が開発中です

TypeScript 2以降で型定義ファイルをインストールする

npmの初期設定後、型定義ファイルをインストールするには次のコマンドを実行します。

コマンド
npm install --save @types/(型定義ファイル名)

例えば、jQueryの型定義ファイルをインストールするには次のようにします。

コマンド
npm install --save @types/jquery

プロジェクトフォルダのnode_modulesフォルダに@typesフォルダが作成され、jQueryの型定義ファイルがインストールされます。

TypeScript 2で型定義ファイルを使う

先ほどインストールしたjQueryの型定義ファイルを用いて、TypeScript 2でjQueryを使ってみます。

次のサンプルコードを試します。ファイル名はhoge.tsです。

TypeScript2でjQueryを使う
$(function () {
    alert("hoge");
});

jQueryの型定義ファイルを使いますが、reference pathで型定義ファイルを読み込んだり、tsconfig.jsonfilesに型定義ファイルを指定したりといった作業は不要です

コンパイルする

hoge.tsをコンパイルします。Typings等の特別なツールは使わず、npmでインストールした型定義ファイルのみでコンパイルが成功します。

TypeScript2のコンパイル
npx tsc hoge.ts 

※ npxコマンドについては記事「npxでローカルパッケージを手軽に実行しよう」を参照ください

どんな型定義ファイルが使えるのか

使用できる型定義ファイルは「TypeScript Types Search」より検索できます。多くの型定義ファイルが使用可能であり、例えば筆者が使う機会のある以下のようなライブラリも対応していました。

  • three.js
  • pixi.js
  • CreateJS
  • node
  • 他多数

TypeScript 2で型定義ファイルが便利になる

TypeScript 2の型定義ファイル管理は、tsdTypingsに比べて楽になっています。特別な知識は不要で、npmさえ使えればすぐに型定義ファイルを使えるのです。TypeScript導入の敷居も下がることでしょう。筆者はこれまで型定義ファイルで煩わしさを感じることが度々ありましたが、TypeScript 2の登場により悩みが解決されました。

tonkotsuboy_com
ICSのインタラクションデザイナーです。「JavaScriptコードレシピ集」の著者。CSS Nite 2017・2018でベストセッションの1人に選出されました。 アプリ開発やWebページ制作が専門で、フロントエンドの情報を随時発信しています。猫の名前は「うに」です。九州大学芸術工学部音響設計学科出身。
https://ics.media
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした