Another TypeScript friendly functions bucket with collapseSimple: true

[kykungz]

Having all callable functions as a meta-class on root is a very clever idea:

const usdc = new ethers.Contract("0xa0b86...eb48", ERC20Abi, provider)
const balance = await usdc.balanceOf(walletAddress)

However, having the index signature of ContractFunction | any on the Contract class also makes every function inherits the type of any.

ethers.js/packages/contracts/src.ts/index.ts

Lines 1140 to 1143 in c80fcdd

	export class Contract extends BaseContract {
	// The meta-class properties
	readonly [ key: string ]: ContractFunction | any;
	}

Resulting in a poor typing when calling functions directly from the contract.

Ideally, I would want to write it like this, with a correct TypeScript Promise definition / autocompletion:

// Promise
usdc.balanceOf(walletAddress).then((balance: BigNumber) => console.log(balance))

// Async/await
const balance: BigNumber = await usdc.balanceOf(walletAddress)
console.log(balance)

But in reality,

usdc.balanceOf(walletAddress).then(balance => console.log(balance))
      │                        │     │
      └─ any                   │     └─ untyped
                               │
                               └─ no suggestions/autocomplete

The only way to enable correct type definition was to cast it to ContractFunction, which is kinda ugly as the function name and its parameters are too far apart:

// #1
const balance = await (usdc.balanceOf as ContractFunction<BigNumber>)(walletAddress)

// #2
(usdc.balanceOf as ContractFunction<BigNumber>)(walletAddress).then(balance => ...)

// #3
const balanceOf: ContractFunction<BigNumber> = usdc.balanceOf
.
.
const balance = await balanceOf(walletAddress) // Losing context of what contract we are working on

There is a .functions bucket that has a type of ContractFunction on each function, though it will not collapse single return value like the functions on root.

                                         ┌─ Yes! Correct type definition
                                         │
usdc.functions.balanceOf(walletAddress).then(balance => console.log(balance))
                                              │
                                              └─ But it's a Result array 😢

I played around and realized that there's no way we can make the meta-class functions behave to like we want, as index signature will override all of them with any.

So perhaps could we make another bucket like .methods or such, with a better type definitions and also collapse values for us?

                                       ┌─ Yes! Correct type definition
                                       │
usdc.methods.balanceOf(walletAddress).then(balance => console.log(balance))
                                            │
                                            └─ Single value is collapsed 👍

I know that adding .methods might confuse a lot of people and might not be a good idea 😅, so I wanna open this discussion on how can we use ethers.js with TypeScript more peacefully without relying on other libs/extensions.