如何为Window对象的ethereum属性编写正确的TypeScript interface定义

方案1：使用官方类型包（推荐） #

直接安装MetaMask官方维护的类型包，能获得完整的类型校验和提示：

1. 安装依赖
   npm install @metamask/providers --save-dev
2. 新增全局类型声明

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

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

该方案能覆盖ethereum对象所有原生方法的类型定义，包括request、事件监听、链信息查询等全部能力的类型校验。

方案2：自定义轻量类型（无额外依赖） #

如果不想引入额外依赖，可以针对你用到的能力自定义接口：

// 按需定义你用到的ethereum对象方法
interface EthereumProvider {
  // 定义request方法的入参和返回值类型
  request: <T = unknown>(args: {
    method: string;
    params?: unknown[] | Record<string, unknown>;
  }) => Promise<T>;
  // 后续用到事件监听可补充对应类型
  // on: (event: string, handler: (...args: any[]) => void) => void;
}

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

调用注意事项 #

因为ethereum是可选属性，调用前要做空值判断，避免用户未安装钱包时的运行时报错：

async function requestAccount() {
  if (!window.ethereum) {
    alert("请先安装MetaMask钱包");
    return;
  }
  await window.ethereum.request({ method: "eth_requestAccounts" });
}

内容的提问来源于stack exchange，提问作者Anders Kitson