.d.ts ファイルを自作してimportする

Aug 1, 2021 10:05 · 482 words · 1 minute read

APIのTypeScriptの型定義ファイル(foobar.d.tsなど)が提供されておらず、APIレスポンスをjson2tsなどにつっこんで型定義ファイルを得るということをよくやる

こんな型定義が得られる

declare module Kibela {
  export interface OutgoingWebhook {
    action: string;
    blog: Blog;
    resource_type: string;
  }

  export interface Blog {
    author: Author;
    boards: Board[];a
    content_html: string;
    content_md: string;
    id: string;
    title: string;
    url: string;
  }
}

これを .tsではなく.d.tsで管理すると、型定義と実装が別ファイルで管理できて具合がいい

.d.ts ファイルを作成

tscは @types という名前のディレクトリを見つけたらそれの中のものを型定義ファイルとして読み込んでくれる

By default all visible “@types” packages are included in your compilation.

src/@types/foo.d.ts といった場所にファイルを作成しておく

なお、tsconfig.json#baseUrl に指定がないと tsc が型定義ファイルを探せないので設定が必要。 src/@types 配下の定義を認識させるのなら以下のように設定する。

     "noUnusedLocals": false,
+    "baseUrl": "./src",
     "outDir": "lib",

importする

こんな感じでimportすればnamespaceが使える

import './@types/foo';

参考

tweet Share