TypeScript
wagmi 被设计成尽可能的类型安全! 需要记住的事情:
wagmi
包的版本锁定在特定的补丁版本上,以便在任何版本上都可以修复或升级类型。
为确保一切正常,请确保将
tsconfig.json
中的
strict
设置为 true:
{
"compilerOptions": {
"strict": true
wagmi 可以根据 ABI 和 EIP-712 类型数据定义(由 ABIType 提供)来推断类型,为你提供从合约到前端完整的端到端类型安全和难以置信的开发者体验(例如,自动完成 ABI 函数名称并捕捉拼写错误、推断 ABI 函数参数类型等等)。
为此,你必须将 const 断言 添加到特定的配置参数中(关于这些参数的更多信息见下文),或者在行内定义它们。例如,useContractRead
的 abi
配置参数:
const { data } = useContractRead({
abi: […], // <--- 内联定义
const abi = […] as const // <--- const 断言
const { data } = useContractRead({ abi })
如果类型推断不生效,很可能是你忘记了添加 const
断言或内联定义配置参数。
不幸的是 TypeScript 不支持将 JSON 导入为
const。请查看
@wagmi/cli
来帮助解决这个问题! 它可以自动从 Etherscan 中获取
ABI,从你的 Foundry/Hardhat 项目中解析 ABI、生成 React Hooks 等等。
合约 ABIs
当你向 abi
添加 const 断言时,以下 hooks 支持类型推断。
useContract
useContractEvent
useContractRead
useContractReads
useContractWrite
usePrepareContractWrite
useContractInfiniteReads (还必须给 args
添加 const 断言,因为 abi
是在返回类型中)
例如 useContractRead
:
import { useContractRead } from 'wagmi'
const { data } = useContractRead({
// ^? const data: bigint | undefined
address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
abi: [
name: 'getUncleanliness',
inputs: [],
outputs: [{ name: '', type: 'uint256' }],
stateMutability: 'view',
type: 'function',
name: 'love',
inputs: [{ name: '', type: 'address' }],
outputs: [{ name: '', type: 'uint256' }],
stateMutability: 'view',
type: 'function',
name: 'play',
inputs: [],
outputs: [],
stateMutability: 'nonpayable',
type: 'function',
functionName: 'love',
// ^? (property) functionName?: "getUncleanliness" | "love" | undefined
// 需要注意 "play" 没有被包括在内,因为它不是一个 "read" 的函数
args: ['0x27a69ffba1e939ddcfecc8c7e0f967b872bac65c'],
// ^? (property) args?: readonly [`0x${string}`] | undefined
onSuccess(data) {
// ^? (parameter) data: bigint
// 类型推断也将流向其他配置参数:
// - select?: ((data: bigint) => bigint) | undefined
// - onSettled?: ((data: bigint | undefined, error: Error | null) => void) | undefined
// - …
EIP-712 类型数据
在 types
中添加一个 const 断言,为 useSignTypedData
的 value
配置参数添加类型推断。
import { useSignTypedData } from 'wagmi'
const result = useSignTypedData({
domain: {
name: 'Ether Mail',
version: '1',
chainId: 1,
verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
types: {
Person: [
{ name: 'name', type: 'string' },
{ name: 'wallet', type: 'address' },
Mail: [
{ name: 'from', type: 'Person' },
{ name: 'to', type: 'Person' },
{ name: 'contents', type: 'string' },
value: {
// ^? (parameter) value?: { name: string; wallet: `0x${string}` } | {
// from: {
// name: string;
// wallet: `0x${string}`;
// };
// to: {
// name: string;
// wallet: `0x${string}`;
// };
// contents: string;
// } | undefined
from: {
name: 'Cow',
wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
to: {
name: 'Bob',
wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',