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

I am running the following functionimport { ethers } from "ethers";async function requestAcc

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

Share Improve this question edited Jul 21, 2022 at 21:53 Yilmaz 50.1k18 gold badges218 silver badges271 bronze badges asked Oct 25, 2021 at 19:04 Anders KitsonAnders Kitson 1,5456 gold badges44 silver badges115 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

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744780947a4593336.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信