How to use web3.js@1.0.0-beta34 with TypeScript?

Question

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?

score 1 · Answer 1 · answered Jun 20 '18 at 08:53

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

score 1 · Answer 2 · answered Jun 28 '18 at 18:31

What worked for me is:

Install node types.
```
npm install @types/node --save 
```

Specify node types in tsconfig.json:

{
  "compilerOptions": {
    // rest ommitted,
    "types": ["node"]
  },
  "typeRoots": [
    "./node_modules/@types"
  ]
}

Use require syntax instead of import * as Web3 from 'web3';:
```
const Web3 = require('web3');
```

score 0 · Answer 3 · answered Nov 16 '18 at 04:18

You'll need to provide types for the two mentioned libraries, underscore and bn.js. The first one is easy, simply run npm install --save-dev @types/underscore as it suggested. Unfortunately, the latter has no @types/bn.js package available. But you can find type definitions for it around, here's one you can copy into your project: https://github.com/MyCryptoHQ/MyCrypto/blob/develop/common/typescript/bn.d.ts

You should not edit files inside of node_modules to get things working, as those changes won't carry over for anyone else or you when you re-download or update the module in your project.

Harpreet Singh · Answer 4 · 2019-04-26T10:37:29.530

well, you can use Inject.

install using npm install web3@latest

and

import Web3 from 'web3';

export const WEB3 = new InjectionToken<Web3>('web3',{
    providedIn : 'root',
    factory: () => {
        try {
            const provider = ('ethereum' in window) ? window['ethereum'] : Web3.givenProvider;
            return new Web3(provider);
        } catch (err) {
            throw new Error('No Ethereum provider');
        }
    }
});

and use this in any other class.

constructor(@Inject(WEB3) private web3: Web3){

    this.web3 = new Web3(this.provider);
    this.contract = new this.web3.eth.Contract(this.contractABI, this.contractAddress);

}

How to use web3.js@1.0.0-beta34 with TypeScript?

4 Answers4