javascript - How to write typescript interface for Window object ethereum that has a request method being called - Stack Overflo

admin管理员组

文章数量:1392088

I am running the following function

import { ethers } from "ethers";


async function requestAccount() {
    await window.ethereum.request({ method: "eth_requestAccounts" });
  }

The issue I am having is I am using typescript and it plains with the following error

Property 'ethereum' does not exist on type 'Window & typeof globalThis'

So I was able to fix it with the following

declare global {
  interface Window{
    ethereum?:any
  }
}

However I don't think this is taking advantage of typescript properly. How would I write it so that the interface value is correct. I assume it should be an object with a method inside, but not sure how to write this in typescript.

Any help would be greatly appreciated.

Thanks

I am running the following function

import { ethers } from "ethers";


async function requestAccount() {
    await window.ethereum.request({ method: "eth_requestAccounts" });
  }

The issue I am having is I am using typescript and it plains with the following error

Property 'ethereum' does not exist on type 'Window & typeof globalThis'

So I was able to fix it with the following

declare global {
  interface Window{
    ethereum?:any
  }
}

However I don't think this is taking advantage of typescript properly. How would I write it so that the interface value is correct. I assume it should be an object with a method inside, but not sure how to write this in typescript.

Any help would be greatly appreciated.

Thanks

• javascript
• typescript
• ethereum
• metamask
• ethers.js

Share Improve this question Follow edited Jul 21, 2022 at 21:53 Yilmaz 50.1k1818 gold badges218218 silver badges271271 bronze badges asked Oct 25, 2021 at 19:04 Anders KitsonAnders Kitson 1,54566 gold badges4444 silver badges115115 bronze badges 1

• 1 You could tell the piler to ignore the error if it's not actually something breaking the application, but simply TypeScript yelling at you. You can then run some JavaScript logic to figure out the type, such as console.log(typeof window.etherum) or log the entire structure and see what you get. Although sometimes, there are use-cases where you simply have to go with the type definition of any. – Martin Commented Oct 25, 2021 at 20:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

This is a quite old question but if you or someone else is still looking for an answer, you can use the ExternalProvider type of ethers.

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

Here is the extracted version of ExternalProvider if you're not using ethers

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

npm i @metamask/providers

Install the above package:

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

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

then

const accounts = (await ethereum?.request({
      method: "eth_requestAccounts",
    })) as string[];

I resolved the Type Error temporarily by:

• add: declare let window: any at the top level after your imports. Now your are able to call window.ethereum with the warning and Type Error off.

I think this overrides the global window object with a type any I'm sure this is not the best way to fix this, sort of a hack but fixes the Type error in the meantime. Let me know if this worked for your case.

本文标签：