调用setUsdtBalance(balance)时出现TypeScript类型错误求助

问题原因 #

TypeScript无法自动推断Web3合约调用balanceOf的返回类型，导致balance被识别为void | [] | (unknown[] & [])，与setUsdtBalance期望的string | null类型不兼容。

解决方案 #

方案1：类型断言（快速解决） #

直接给合约调用的结果添加类型断言，明确其为字符串类型：

const handleGetBalance = async () => {
  if (!address) return;

  const contractABI = [
    {
      "constant": true,
      "inputs": [{ "name": "_owner", "type": "address" }],
      "name": "balanceOf",
      "outputs": [{ "name": "balance", "type": "uint256" }],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    }
  ];

  const contractAddress = '0xdAC17F958D2ee523a2206206994597C13D831ec7';
  const usdtContract = new web3.eth.Contract(contractABI, contractAddress);
  // 添加类型断言，指定返回值为string
  const balance = await usdtContract.methods.balanceOf(address).call() as string;
  setUsdtBalance(balance);
};

方案2：利用const断言让TypeScript自动推断ABI类型（更严谨） #

通过as const标记ABI，让TypeScript解析出合约方法的具体返回类型，无需手动断言：

const handleGetBalance = async () => {
  if (!address) return;

  // 用as const锁定ABI的类型结构，让TypeScript能推断方法返回值
  const contractABI = [
    {
      "constant": true,
      "inputs": [{ "name": "_owner", "type": "address" }],
      "name": "balanceOf",
      "outputs": [{ "name": "balance", "type": "uint256" }],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    }
  ] as const;

  const contractAddress = '0xdAC17F958D2ee523a2206206994597C13D831ec7';
  const usdtContract = new web3.eth.Contract(contractABI, contractAddress);
  // 此时TypeScript会自动推断balance为string类型
  const balance = await usdtContract.methods.balanceOf(address).call();
  setUsdtBalance(balance);
};

额外优化：添加错误处理 #

合约调用可能因网络问题或无效地址抛出异常，建议添加try/catch避免程序崩溃：

const handleGetBalance = async () => {
  if (!address) return;

  const contractABI = [
    {
      "constant": true,
      "inputs": [{ "name": "_owner", "type": "address" }],
      "name": "balanceOf",
      "outputs": [{ "name": "balance", "type": "uint256" }],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    }
  ] as const;

  const contractAddress = '0xdAC17F958D2ee523a2206206994597C13D831ec7';
  const usdtContract = new web3.eth.Contract(contractABI, contractAddress);
  
  try {
    const balance = await usdtContract.methods.balanceOf(address).call();
    setUsdtBalance(balance);
  } catch (error) {
    console.error('获取USDT余额失败:', error);
    setUsdtBalance(null);
  }
};

内容的提问来源于stack exchange，提问作者Taha Dadou