[Ethereum] How to use web3.js@1.0.0-beta34 with TypeScript

typescriptweb3js

Here is a minimal code for testing:

import * as Web3 from "web3"

const web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"))

const main = async () => {
  const blockNumber = await web3.eth.getBlockNumber()
  console.log({ blockNumber })
}

main().catch(err => console.error(err))

The module typings are wrong. If I try to compile it, there are some errors:

maxblock@mbp t10-web3-typescript *$ npm run build

> t10-web3-typescript@1.0.0 build /Users/maxblock/projects/test/t10-web3-typescript
> rimraf dist && tsc

../../../node_modules/web3/types.d.ts(1,27): error TS7016: Could not find a declaration file for module 'bn.js'. '/Users/maxblock/node_modules/bn.js/lib/bn.js' implicitly has an 'any' type.
  Try `npm install @types/bn.js` if it exists or add a new declaration (.d.ts) file containing `declare module 'bn.js';`
../../../node_modules/web3/types.d.ts(2,21): error TS7016: Could not find a declaration file for module 'underscore'. '/Users/maxblock/node_modules/underscore/underscore.js' implicitly has an 'any' type.
  Try `npm install @types/underscore` if it exists or add a new declaration (.d.ts) file containing `declare module 'underscore';`
src/index.ts(3,14): error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.
src/index.ts(3,32): error TS2339: Property 'providers' does not exist on type 'typeof "/Users/maxblock/node_modules/web3/index"'.

OK. Next, I tried to override typings with my own. For this reason, I've created a file typings.d.ts with simple stub: declare module "web3".

There are fewer errors with my own typings, but anyway I can't compile it:

maxblock@mbp t10-web3-typescript *$ npm run build

> t10-web3-typescript@1.0.0 build /Users/maxblock/projects/test/t10-web3-typescript
> rimraf dist && rimraf node_modules/web3/index.d.ts && rimraf node_modules/web3/types.d.ts && tsc

../../../node_modules/web3/types.d.ts(1,27): error TS7016: Could not find a declaration file for module 'bn.js'. '/Users/maxblock/node_modules/bn.js/lib/bn.js' implicitly has an 'any' type.
  Try `npm install @types/bn.js` if it exists or add a new declaration (.d.ts) file containing `declare module 'bn.js';`
../../../node_modules/web3/types.d.ts(2,21): error TS7016: Could not find a declaration file for module 'underscore'. '/Users/maxblock/node_modules/underscore/underscore.js' implicitly has an 'any' type.
  Try `npm install @types/underscore` if it exists or add a new declaration (.d.ts) file containing `declare module 'underscore';`

I've even tried deleting node_modules/web3/index.d.ts and node_modules/web3/types.d.ts files, but without success.

How do you work with web3.js + TypeScript?

Best Answer

Under your project root folder where package.json is located, run these commands:

npm install --save-dev @types/underscore
npm install bignumber.js

or

yarn add @types/underscore --dev
yarn add bignumber.js

edit first line of <rootDir>/node_moduoles/web3/types.d.ts as below:

-- import { BigNumber } from 'bn.js'
++ import { BigNumber } from 'bignumber.js'

your code should compile

Related Topic