😶
windowオブジェクトの型を TypeScript のアンビエント宣言で拡張する
解決したいこと
window の型を TypeScript で拡張し、window.ethereumの型エラーを解決する。
結論
window.d.tsファイルを作成し、アンビエント宣言でwindow型を拡張する。
背景
株式会社shiftbase が提供するweb3開発学習コンテンツであるdApp 開発プロジェクトの内容をTypeScriptでリプレイスしている際に、下記のエラーに遭遇した。
具体的には、windowオブジェクトからethereumプロパティのみを取得しようとした所、「windowオブジェクトの型定義にはethereumなんていうプロパティは無い！」と怒られてしまった。
エラー文の訳としては下記の通り
プロパティ 'ethereum' はタイプ 'Window & typeof globalThis' に存在しません。
上記の通り、原因としてはwindowオブジェクトの型にethereumの型が存在しないため、エラーが起きている。
解決方法
アンビエント宣言を使用して、windowオブジェクトの型を拡張することで解決ができる。
具体的には、下記の内容をwindow.d.tsに記述する。
window.d.ts
import { MetaMaskInpageProvider } from "@metamask/providers";
export declare global {
interface Window {
ethereum: MetaMaskInpageProvider;
}
}
上記の型を宣言することで、エディタでwindow.ethereum以降のプロパティのサジェストを利かせることも可能になる。
参考
Discussion