😶

windowオブジェクトの型を TypeScript のアンビエント宣言で拡張する

2023/01/18に公開約1,100字

解決したいこと

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以降のプロパティのサジェストを利かせることも可能になる。

参考

https://stackoverflow.com/questions/65504958/web3-js-extending-the-window-interface-type-definitions?newreg=55537b7f4a5b4e48b9d0a024314e83a3
https://typescript-jp.gitbook.io/deep-dive/type-system/intro

Discussion

ログインするとコメントできます