Web3.js 扩展窗口界面类型定义

Question

Web3.js web3进入window对象。

浏览器钱包就像MetaMask注入ethereum到window对象中。

现在在打字稿中以减轻编译错误，我正在按如下方式进行转换 (window as any).ethereum

在查看Web3存储库和钱包存储库（例如 MetaMask）后，该Window对象没有可导入/可复制的打字稿定义/接口。

一个可能的解决方案是编写我自己的接口并扩展 Window，查看 Window 对象并尝试推断类型 - 不理想

其他使用过 web3.js 和 typescript 的开发者，你们是如何克服 VSCode 中的 Window 类型界面问题和智能感知建议的？

Answer 1

官方 Metamask Provider 存储库现在导出您可以/应该用于扩展 Window 接口的类型。

与 @Felipe 的答案相同，MetamaskInpageProvider而不是Ethereumish，将以下内容添加到项目中的 Typescript 声明文件中。

// metamask.d.ts
import { MetaMaskInpageProvider } from "@metamask/providers";

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

Answer 2

我最近也遇到了这个。我无法从绝对类型中找到合适的类型包，所以我开始根据我自己的用法和Metamask 文档进行推断，并创建了一些到目前为止有效的东西。

也许社区可以用他们自己的贡献来编辑这个答案。

为了使用ethereum对象没有 TS 投诉，我在 window 对象中声明：

declare global {
    interface Window {
        ethereum: Ethereumish;
    }
}

临时的 Ethereum Provider 类型Ethereumish如下所示：

import { ProviderMessage, ProviderRpcError, ProviderConnectInfo, RequestArguments } from 'hardhat/types';

export interface EthereumEvent {
    connect: ProviderConnectInfo;
    disconnect: ProviderRpcError;
    accountsChanged: Array<string>;
    chainChanged: string;
    message: ProviderMessage
}

type EventKeys = keyof EthereumEvent;
type EventHandler<K extends EventKeys> = (event: EthereumEvent[K]) => void;

export interface Ethereumish {
    autoRefreshOnNetworkChange: boolean;
    chainId: string;
    isMetaMask?: boolean;
    isStatus?: boolean;
    networkVersion: string;
    selectedAddress: any;

    on<K extends EventKeys>(event: K, eventHandler: EventHandler<K>): void;
    enable(): Promise<any>;
    request?: (request: { method: string, params?: Array<any> }) => Promise<any>
    /**
     * @deprecated
     */
    send?: (request: { method: string, params?: Array<any> }, callback: (error: any, response: any) => void) => void
    sendAsync: (request: RequestArguments) => Promise<unknown>
}

如您所见，到目前为止，我还无法弄清楚许多事物的确切类型，但是重要的方法，send并且sendAsync根据我的经验是准确的。

另一个有用的模板是我在 @ethersproject/providers/src.ts/web3-provider.ts 中找到的

export type ExternalProvider = {
    isMetaMask?: boolean;
    isStatus?: boolean;
    host?: string;
    path?: string;
    sendAsync?: (request: { method: string, params?: Array<any> }, callback: (error: any, response: any) => void) => void
    send?: (request: { method: string, params?: Array<any> }, callback: (error: any, response: any) => void) => void
    request?: (request: { method: string, params?: Array<any> }) => Promise<any>
}

这可以在加载新提供程序时使用

new ethers.providers.Web3Provider(myProvider: ExternalProvider)