问：web3 typescript 错误 ethereum.request 找不到名称 'ethereum'

Posted 2023-02-18

【中文标题】问：web3 typescript 错误 ethereum.request 找不到名称 \'ethereum\'

【英文标题】：Q: web3 typescript error ethereum.request cannot find name 'ethereum'问：web3 typescript 错误 ethereum.request 找不到名称 'ethereum'

【发布时间】：2021-09-24 02:50:06

【问题描述】：

我正在使用 metamask/detect-provider 制作一个简单的按钮，按照 metamask 文档连接到 metamask 扩展。但是，它返回 Typescript 错误找不到名称“以太坊”。 TS3204 当我执行 npm start 时。有谁知道这个错误的原因吗？

import Web3 from 'web3';
import  Message, Button  from "semantic-ui-react";
import 'semantic-ui-css/semantic.min.css';
import detectEthereumProvider from '@metamask/detect-provider';
import './App.css';

function App() 
  const loadMetamask = () => 
    ethereum.request( method: 'eth_requestAccounts' );
  
  return (
    <div className="App">
      <div className="App-header">
        <h1>Testing</h1>

        <Message warning>Metamask is not connected</Message>
        <button color="green"
          onClick=() => loadMetamask()
        >Connect to Metamask</button>
      </div>
    </div>
  );

export default App;

【参考方案1】：

这是由于 typescript 编译器找不到 ethereum 模块，因为 ethereum 模块在全局 window 中。

解决它的方法很少。

第一种方法，为window.ethereum 创建自己的类型定义。你可以参考这里Web3.js extending the window interface type definitions

第二种方法，要求 typescript 编译器忽略错误，不推荐，因为它超出了使用 typescript 的目的。

//@ts-ignore
 ethereum.request( method: 'eth_requestAccounts' );

最后一种方式，这是最懒惰的方式。 @metamask/provides 确实提供了 window.ethereum 的类型定义。因此，我们通过运行安装它

npm i @metamask/providers

之后，导入类

import  MetaMaskInpageProvider  from '@metamask/providers';

然后，告诉 typescript 编译器将window.ethereum 视为MetaMaskInpageProvider

const ethereum = window.ethereum as MetaMaskInpageProvider;

现在应该可以了

ethereum.request<string[]>( method: 'eth_requestAccounts' );

您的代码应如下所示

import Web3 from 'web3';
import  Message, Button  from "semantic-ui-react";
import 'semantic-ui-css/semantic.min.css';
import detectEthereumProvider from '@metamask/detect-provider';
import  MetaMaskInpageProvider  from '@metamask/providers';
import './App.css';

function App() 
  const loadMetamask = async () => 
    // You need to await for user response on the metamask popup dialog
    const accounts = await ethereum.request<string[]>( method: 'eth_requestAccounts' );
    if(accounts)
       console.log(accounts[0]);
    
  
  return (
    <div className="App">
      <div className="App-header">
        <h1>Testing</h1>

        <Message warning>Metamask is not connected</Message>
        <button color="green"
          onClick=() => loadMetamask()
        >Connect to Metamask</button>
      </div>
    </div>
  );

export default App;

尽管它可以工作，但我们安装了未使用的 @metamask/providers 库。