问：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;

【问题讨论】：

标签： ethereum web3 web3js

【解决方案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 库。

【讨论】：