TypeScriptでwindow配下のオブジェクトが見つからないエラー

'solana' does not existエラー

現象

window.solanaというオブジェクトが見つからないと言われる。

console.log(window.solana);

=> Property 'solana' does not exist on type 'Window & typeof globalThis'.

JavaScriptやcreate-react-appするとwindow.solanaがうまく参照できるのに、TypeScriptだと見つからないと言われる。

原因

JavaScriptだとwindowオブジェクト配下が参照できるが、TypeScriptだと挙動が若干変わり、パターンによって対応方法が異なる。

対応

自分のケースだと案１、案２いずれも動作した。ただし、パターンによって異なるようなので、詳細は参考サイトを参照。

案１：window as any

window as anyを追加するだけ。

console.log((window as any).solana);

案２：interfaceで定義

tsconfig.jsonでlib: dom指定していた場合は、interfaceで追加したいオブジェクトを指定する。

interface Window {
  solana: any
}
declare var window: Window

console.log(window.solana);

'phantom' does not existエラー

現象

Phantom公式サイトのとおりに実装すると下記のエラーが表示される。

Property 'phantom' does not exist on type 'Window'.ts(2339)

Phantom公式サイトから引用：

const isPhantomInstalled = window.phantom?.solana?.isPhantom

const getProvider = () => {
  if ('phantom' in window) {
    const provider = window.phantom?.solana;

    if (provider?.isPhantom) {
      return provider;
    }
  }

  window.open('https://phantom.app/', '_blank');
};

原因

これも前項のエラーと同様。

対応

これも同様にinterfaceを追加するだけ。

// 以下を追加
interface Window {
  phantom: any
}
declare var window: Window


const isPhantomInstalled = window.phantom?.solana?.isPhantom

const getProvider = () => {
  if ('phantom' in window) {
    const provider = window.phantom?.solana;

    if (provider?.isPhantom) {
      return provider;
    }
  }

  window.open('https://phantom.app/', '_blank');
};