Does abitype work on JSON files imported as modules?

[0xOlias]

Hi! Thanks for creating wagmi and abitype! 👑 👑

I'm developing a framework that currently uses TypeChain to generate contract types for user-provided ABIs. I'd much rather use this library, but I'm having trouble using abitype on JSON files imported as modules. This repo minimally demonstrates the issue.

I followed some IntelliSense suggestions to add the following to tsconfig.json:

// tsconfig.json
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true

But I still get the following TypeScript errors:

I'm a relative TypeScript noob so I could be missing something fundamental here. Thanks!

[tmm]

Unfortunately TypeScript doesn't support importing JSON as const right now. The best option is to change the file to .ts and add a const assertion there.

[roninjin10]

Yea definitely possible. But one caveat is that ts service language plugins only get loaded by the language server in your editor (vscode, jetbrains, coc ect.). They do not get loaded when you run tsc in the terminal. I have a of paths to explore on how to solve this:

• provide an alternative to tsc to run npx @evmts/ts-plugin tsc
• generate a .d.ts that then can be used by tsc when typechecker runs yarn @evmts/ts-plugin generate && tsc
• See how other tools with custom ts plugins like astro handle it

But basically because TS explicitly doesn't support ts lang service plugins with tsc getting the plugin working is the easy part, getting it working in a way that doesn't break other tools is the hard part.

[tmm]

It's pretty straightforward to write a plugin, but language service plugins only improve the editing experience and cannot customize the type system to change what is or isn't an error when running tsc.

For example, the follow would show an error in your editor Type '"foo"' is not assignable to type '"balanceOf" | ... '., but wouldn't fail as expected when compiling.

import erc20Abi from './abi.json'

type Result = ExtractAbiFunctionNames<typeof erc20Abi>
const functionName: Result = 'foo'

[roninjin10]

Yea for EVMts this issue is not a negative tradeoff because EVMts already requires a bundler to compile. As long as I add back a way of doing typechecking too it's not an issue.

As a general solution though it's a bad approach. Not supporting tsc as a compiler is a pretty huge tradeoff.

[0xOlias]

Understood, thanks for the thorough answers.

[roninjin10]

@0xOlias One easy way to fix your issue that works as long as all your abis all have unique names is to generate a global.d.ts file

declare module '*/SomeAbi.json' {
  export default [
        {
          "inputs": [
          ....
          ]
        }
  ] as const
}

This is so far my best answer for how to get typechecking working in evmts so far but hoping to find a solution that doesn't have that limitation of every file having a unique name

[razgraf]

For anyone else in need it looks like @tmm said, .ts imports are still the way to go. There's an extra catch though: make sure to have the following structure in those files:

const abi = [...] as const;
export ...

If you import the object from the .ts file and cast it to const afterwards, Typescript might scream at you. The cast needs to happen inline for it to work properly.