Stricter Type Narrowing When using multiple ABIs as union

[selcuk-sahin]

Depending on a condition, I would choose abi1 or abi2 and make some contract calls.

However between abi1 and and abi2, there's not much difference, so in most cases I could just re-use the existing calls like below.
What I noticed is, if both abis have the same function available, but with different args, writeContract permits either of args to be there.

How can I enforce stricter args type when union of abis used?

Example below

import { createWalletClient, custom, type Abi } from 'viem'
import { mainnet } from 'viem/chains'

const abi1 = [
  {
    name: 'foo',
    type: 'function',
    inputs: [],
    outputs: [],
    stateMutability: 'nonpayable',
  },
] as const satisfies Abi

const abi2 = [
  {
    name: 'foo',
    type: 'function',
    inputs: [{ name: 'x', internalType: 'uint256', type: 'uint256' }],
    outputs: [],
    stateMutability: 'nonpayable',
  },
] as const satisfies Abi

const walletClient = createWalletClient({ transport: custom(window.ethereum!) })
const shared = {
  abi: Math.random() > 0.5 ? abi1 : abi2,
  account: '0x',
  address: '0x',
  chain: mainnet,
} as const
const withAbi1 = { abi: abi1, account: '0x', address: '0x', chain: mainnet } as const
const withAbi2 = { abi: abi2, account: '0x', address: '0x', chain: mainnet } as const

// no typescript errors when using unions, but run-time issues depending on selected abi
walletClient.writeContract({ ...shared, functionName: 'foo', args: [] }) // This will fail for abi2, succeed for abi1
walletClient.writeContract({ ...shared, functionName: 'foo', args: [123n] }) // This will succeed for abi2, fail for abi1

// errors when individually used
walletClient.writeContract({ ...withAbi1, functionName: 'foo', args: [] }) // ✅
walletClient.writeContract({ ...withAbi1, functionName: 'foo', args: [123n] }) // ❌ TypeScript error

walletClient.writeContract({ ...withAbi2, functionName: 'foo', args: [] }) // ❌ TypeScript error
walletClient.writeContract({ ...withAbi2, functionName: 'foo', args: [123n] }) // ✅

Expectation

Generally with union in TypeScript acts more restrictive, which I found helpful.

In this case, supplying the ambiguous args might have been errored me.

type A = { foo: string }
type B = { bar: number }

function test(x: A | B) {
  console.log(x.foo) // ❌ Error: Property 'foo' does not exist on type 'B'.
  console.log(x.bar) // ❌ Error: Property 'bar' does not exist on type 'A'.
}

// maybe this call would error instead?
walletClient.writeContract({ ...shared, functionName: 'foo', args: [] }) // ❌ Error: args [] <mismatches> abi2
walletClient.writeContract({ ...shared, functionName: 'foo', args: [123n] }) // ❌ Error: args [bigint] <mismatches> abi1