TypeScriptのライブラリのinterfaceを拡張する

TypeScript + Nextで開発中、scriptタグを使う必要が出てきた。

（多分）バージョン11から import Script from 'next/script' を使ってScriptコンポーネント 使うようにしないと怒られる。

そこで <Script /> を使ったのだが、propsに渡す型でエラーでた。

import Script from 'next/script'

<Script
  foo="foo",
  bar="bar"
 />

// Property 'foo' does not exist on type 'IntrinsicAttributes & ScriptProps'.

まあScriptPropsにfooもbarも定義されていないので当然。

なのでScriptPropsを拡張する必要があった。

アンビエントモジュールの定義

ここではモジュールの型を変える必要があるのでモジュールそのものの型定義(script.d.ts)ファイルを用意する。

これは declare module 'モジュール名' で作れる。

import Script from 'next/script'

declare module 'next/script' {
  interface ScriptProps {
   foo: string
   bar: string
  }
}

export default Script

TypeScriptのコンパイラが自動でこのファイルが読み込まれ、next/scriptの型はこのアンビエントモジュールが優先されて使用されるようになる。

interface ScriptPropsにより既に定義されているScriptPropsに新しい定義をマージ。これでfoo, barがTSで使用できるようになった。