How to use web3.js@1.0 with TypeScript?

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?

P.S.
If don't use import syntax and get Web3 like const Web3 = require("web3"), it can be compiled.

[Spaider15]

Same issue, you need to delete first to imports inside web3 folder in types.d.ts, and they usages, BigNumber and underscore.
But this is temporary workaround

[robrobbins]

I'm currently spec'ing out a TCR with web3 beta and TS. Feel free to checkout the spec directory for some things we are doing at Computable with these 2 (web3/TS).

https://github.com/computablelabs/computable.js

I'm putting a couple PRs together now for TS corrections...

[pau1m]

@Spaider15 Could you clarify how to remove usages?

[Spaider15]

@pau1m Find in file where they are mentioned and just remove it

[levino]

Hey all. I am sorry but I cannot follow. Can someone please reiterate for dummies like me on how to fix this? Thanks you very much in advance.

@levino

As workaround you can use require syntax: const Web3 = require("web3"); instead of import.

There will be no typings, but it compiles.

[jintoppy]

I am able to solve the above mentioned issue by importing as default.

import Web3 from "web3";

Also, you may need to set
"noImplicitAny": false
in tsconfig.json.

@jintoppy Yes, it really compiles with "noImplicitAny": false.

But for me it only compiles, can't run.
Here is a demo code:

import Web3 from "web3"
// const Web3 = require("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))

When I run it, there is an error:

maxblock@mbp t10-web3-typescript (master)*$ node dist
/Users/maxblock/projects/test/t10-web3-typescript/dist/index.js:13
const web3 = new web3_1.default(new web3_1.default.providers.HttpProvider("http://localhost:7545"));
                                                   ^

TypeError: Cannot read property 'providers' of undefined
    at Object.<anonymous> (/Users/maxblock/projects/test/t10-web3-typescript/dist/index.js:13:52)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)

Here is a link on repo with this example. Can you please check, does it work for you?

https://github.com/max-block/t10-web3-typescript

[levino]

The correct syntax to import Web3 is

import Web3 = require('web3')

because the module uses

module.exports = Web3;

However the type definitions are incorrect:
https://github.com/ethereum/web3.js/blob/c0e727eac7c16826c39fd43a03a4930b5ff6fff8/packages/web3/index.d.ts#L27
which should be

export = Web3;

[levino]

Here is the commit breaking the type definitions c0a4f0a

@levino
import Web3 = require('web3')

This doesn't work for me, when I compile it, there is an error:

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

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

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/projects/test/t10-web3-typescript/node_modules/web3/index"'.

[levino]

Which type definitions are you using? The ones from here are broken, as I am saying. It cannot work. You have to fix them by hand.

[levino]

Okay I "fixed" it for me locally until this madness is resolved properly.
First you have to add a postinstall script in your package.json like so:

{
  "postinstall": "rm -f node_modules/web3/index.d.ts"
}

This will remove the incorrect type definitions shipped with web3.
Then you need to add these two module augmentation files to your codebase and make sure typescript loads them. For example put them in a folder typings and add to your tsconfig.json:

{
  "typeRoots": [
    "./node_modules/@types/",
    "./typings/"
  ]
}