【20代サラリーマン副業初心者の第一歩はコチラ】
モッピー！ポイ活応援ポイントサイト
未分類

d.tsってなに？

 

型定義ファイルのこと。

これがあると、interfaceなどをJSにするときえちゃうんだけど、残すことができる。

tsc -d で作れる。

型定義ファイル (.d.ts)

自身のプロジェクトでTypeScriptでコーディングする場合は型を宣言することにより、IDEやエディターの補完機能やコードチェックを行えます。しかし外部のパッケージ(npm)を利用する場合は型定義ファイルが含まれているとは限りません。

型定義ファイルとは​

型定義ファイルとはアクセス可能な宣言を記述したファイルです。拡張子は.d.tsです。

型定義ファイルは主にパッケージを配布するために作成されます。TypeScriptはJavaScriptにコンパイルされるときに型情報は無くなってしまいます。そのままJavaScriptパッケージを利用すると型定義の恩恵を得ることができません。しかし型定義ファイルを同梱することにより補完やコードチェックとして利用することができます。

残念なことにnpmに公開されているすべてのパッケージに必ずしも定義ファイルが存在するとは限りません。こちらに関しては型定義ファイルの有無にて説明します。

型定義ファイル出力例​

tscコマンドに-dオプションをつけてコンパイルを行うとJavaScriptと型定義ファイルを出力することができます。

TypeScriptファイル​

次のTypeScriptファイル(sample.ts)を-dオプションを付けてコンパイルしてみます。

sample.ts
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person): string {
return “Hello, ” + person.firstName + ” ” + person.lastName;
}

tscコマンドに-dオプションを付けコンパイルを実行する。

tsc -d

JavaScriptファイル​

sample.tsではInterfaceを使っていますが、JavaScriptにはInterfaceの概念がないため関数のみになりました。また引数の型情報もなくなります。

sample.js
function greeter(person) {
return “Hello, ” + person.firstName + ” ” + person.lastName;
}
//# sourceMappingURL=sample.js.map

d.tsファイル​

定義情報のみ記載されたファイルが出力されます。

sample.d.ts
interface Person {
firstName: string;
lastName: string;
}
declare function greeter(person: Person): string;

型定義ファイルの有無​

型定義ファイルはパッケージ開発者またはボランティアにより作成されています。

  • 型定義ファイル有り
    • TypeScriptで書かれたパッケージ
    • JavaScriptで書かれたパッケージだが.d.tsファイルを同梱している
  • 型定義ファイル有りだが別途インストールが必要
    • JavaScriptで書かれたパッケージだが、 DefinitelyTypedに登録されている
  • 型定義ファイル無し
    • JavaScriptで書かれたパッケージで型定義ファイルが存在しない

型定義ファイル有り​

型定義ファイルが含まれているパッケージの場合は特別な作業は必要ありません。

例としてdate libraryのmomentはJavaScriptで構築されていますが、moment.d.tsを同封しています。そのままinstallを行うだけで定義ファイルの恩恵を受けられます。

npm install moment

型定義ファイル有りの場合は、設定なく型情報を参照することができます。

型定義ファイル有りだが別途インストールが必要​

もし、パッケージに型定義ファイルが同梱されていない場合は別途インストールする必要があります。

TypeSearchからパッケージ名を検索しインストールを行います。TypeSearchのリポジトリはDefinitelyTypedであり、ここに多くのライブラリの定義ファイルが一元管理されています。定義ファイルのインストールもnpmコマンドを利用します。

Express本体と定義ファイルのインストール例は次のようになります。

npm install express –save # express本体のインストール
npm install @types/express –save-dev # 型定義ファイルのインストール

型定義ファイル無し​

型定義ファイルがないライブラリも存在します。その場合は

  1. anyで妥協する
  2. 型定義ファイルを作る

型定義ファイルの存在しないライブラリも利用することが可能ですが暗黙的にany型になります。また自身で作成しDefinitelyTypedに公開することもできます。

Contribution guide | DefinitelyTyped

  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。
ABOUT ME
たけ
はじめまして! たけといいます。 20代男性サラリーマンが資産運用で5年で3000万をめざします。 これを読んで自分でも出来るのではないかと思ってくれる人が増えると嬉しいです。 お金を得ることは手段に過ぎません。若いうちに稼いで、自分の時間をより大切なことに使いたいです。 【2019投資戦歴】 投資資金合計 300万 2019年度単年損益(年利) FX 15万(15%) 投信 9万(7%) 株式 4万(8%) ※投信、株式は含み益
こちらの記事もおすすめ