Web3.js extending the window interface type definitions

Question

Web3.js web3 into the window object.

Browser Wallets like MetaMask inject ethereum into the window object.

In typescript right now to mitigate compile errors I'm casting as follows (window as any).ethereum

After looking in the Web3 repository and Wallet repos (such as MetaMask) there are no importable / copyable typescript definitions / interfaces for the Window object.

A possible solution is to write my own interface and extend the Window, look at the Window object and try to infer the types - not ideal

Other developers that have used web3.js and typescript, how did you get past the Window type interface issues and intellisense suggestions in VS Code?

Answer 1

The official Metamask Provider repo now exports types you could/should use for extending the Window interface.

Same as in @Felipe's answer with MetamaskInpageProvider instead of Ethereumish,

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

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

Answer 2

I came across this just recently as well. I could not find an appropriate typings package from DefinitelyTyped so I started extrapolating from my own usage and the Metamask Documentation and created something that works so far.

Perhaps the community could edit this answer with their own contributions.

In order to use the ethereum object without TS complaints, I declare it in the window object:

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

The makeshift Ethereum Provider types, Ethereumish looks like this:

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>
}

As you can see, I have not been able to figure out the exact types of many things so far, but the important methods, send and sendAsync are accurate in my experience.

Another useful template is something I found inside @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>
}

this can be used when loading a new provider

new ethers.providers.Web3Provider(myProvider: ExternalProvider)

Answer 3

I will just dump what I use currently here.

src/{anything}.ts e.g. src/interfaces.d.ts

interface Window {
  // pick one
  ethereum: EthereumProvider
  // ethereum: ExternalProvider
  // ethereum: AbstractProvider
}

// ExternalProvider seems to be the official ethersproject type for the window.ethereum object, however, `new Web3(ethereum)` does not like it so we must improvise.
declare type ExternalProvider = import('@ethersproject/providers').ExternalProvider
declare type AbstractProvider = import('web3/node_modules/web3-core/types').AbstractProvider
interface EthereumProvider extends ExternalProvider {
  _state: {
    accounts: string[]
  }
  on(event: 'close' | 'accountsChanged' | 'chainChanged' | 'networkChanged', callback: (payload: any) => void): void
  once(event: 'close' | 'accountsChanged' | 'chainChanged' | 'networkChanged', callback: (payload: any) => void): void
  removeAllListeners(): void
  sendAsync: AbstractProvider['sendAsync']
}

This file is a script as it does not import and export anything (unlike module), making its declarations ambient - available globally. Just make sure it is included in the tsconfig.json file in the include/blob array "include": ["..."].

More reading:
https://github.com/MetaMask/providers
github.com~ethers.js @ ExternalProvider

Answer 4

My friends, if you are using React with TypeScript just do this and everything goes right! Trust me :)

1. create global.d.ts in the root of your project and put this code

    declare global {
        interface Window {
            ethereum: import('ethers').providers.ExternalProvider;
        }
    }
    

2. Then in react-app-env.d.ts put this code

    interface Window {
        ethereum: any;
    }
    

Now you have the code snippet and no error!!