React 中的“Window & typeof globalThis”类型上不存在属性“ethereum”错误

Question

我正在得到

类型“Window & typeof globalThis”上不存在属性“ethereum”

反应中的错误。这是产生问题的行：

import { ethers } from 'ethers'

const provider = new ethers.providers.Web3Provider(window.ethereum);

知道会发生什么吗？

Answer 1

用作any类型是作弊。使用 \xe2\x80\x9cany\xe2\x80\x9d 只会删除错误，但不会显示可用的属性。

\n

import { MetaMaskInpageProvider } from "@metamask/providers";\n\ndeclare global {\n  interface Window{\n    ethereum?:MetaMaskInpageProvider\n  }\n}\n

\n

Answer 2

使用以下脚本react-app-env.d.ts在文件夹中创建文件：src

/// <reference types="react-scripts" />

interface Window {
    ethereum: any
}

Answer 3

在我的src/react-app-env.d.ts中我正在使用

/// <reference types="react-scripts" />
import { ExternalProvider } from "@ethersproject/providers";

declare global {
  interface Window {
    ethereum?: ExternalProvider;
  }
}

请注意，这@ethersproject/providers是一个ethers依赖项，因此您不需要安装它。

然后我还添加了一个src/hooks/useMetaMask.ts文件，其中包含useMetaMask将提供程序转换为 MetaMask 提供程序类型的钩子。如果您需要添加 MetaMask 侦听器，这会很有用。

import type { MetaMaskInpageProvider } from "@metamask/providers";

export const useMetaMask = () => {
  const ethereum = global?.window?.ethereum;
  if (!ethereum || !ethereum.isMetaMask) return;
  return ethereum as unknown as MetaMaskInpageProvider;
};