Unable to use EOSJS in a Typescript Project

[thekevinbrown]

Version of EOSJS
v20.0.0

Describe the bug
I'm trying to build a Typescript module which users can use to help test their smart contracts. This declares EOSJS as a peer dependency (and dev dependency)

To Reproduce
Steps to reproduce the behavior:

1. Include Api from EosJS in a Typescript project.
2. Build with tsc.

Expected behavior
Build succeeds

Build Output

node_modules/eosjs/dist/eosjs-api.d.ts:19:18 - error TS2304: Cannot find name 'TextEncoder'.

19     textEncoder: TextEncoder;
                    ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-api.d.ts:20:18 - error TS2304: Cannot find name 'TextDecoder'.

20     textDecoder: TextDecoder;
                    ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-api.d.ts:45:23 - error TS2304: Cannot find name 'TextEncoder'.

45         textEncoder?: TextEncoder;
                         ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-api.d.ts:46:23 - error TS2304: Cannot find name 'TextDecoder'.

46         textDecoder?: TextDecoder;
                         ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-jsonrpc.d.ts:9:28 - error TS2304: Cannot find name 'Request'.

9     fetchBuiltin: (input?: Request | string, init?: RequestInit) => Promise<Response>;
                             ~~~~~~~

node_modules/eosjs/dist/eosjs-jsonrpc.d.ts:9:53 - error TS2304: Cannot find name 'RequestInit'.

9     fetchBuiltin: (input?: Request | string, init?: RequestInit) => Promise<Response>;
                                                      ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-jsonrpc.d.ts:9:77 - error TS2304: Cannot find name 'Response'.

9     fetchBuiltin: (input?: Request | string, init?: RequestInit) => Promise<Response>;
                                                                              ~~~~~~~~

node_modules/eosjs/dist/eosjs-jsonrpc.d.ts:17:35 - error TS2304: Cannot find name 'Request'.

17         fetch?: (input?: string | Request, init?: RequestInit) => Promise<Response>;
                                     ~~~~~~~

node_modules/eosjs/dist/eosjs-jsonrpc.d.ts:17:51 - error TS2304: Cannot find name 'RequestInit'.

17         fetch?: (input?: string | Request, init?: RequestInit) => Promise<Response>;
                                                     ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-jsonrpc.d.ts:17:75 - error TS2304: Cannot find name 'Response'.

17         fetch?: (input?: string | Request, init?: RequestInit) => Promise<Response>;
                                                                             ~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:85:18 - error TS2304: Cannot find name 'TextEncoder'.

85     textEncoder: TextEncoder;
                    ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:86:18 - error TS2304: Cannot find name 'TextDecoder'.

86     textDecoder: TextDecoder;
                    ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:94:23 - error TS2304: Cannot find name 'TextEncoder'.

94         textEncoder?: TextEncoder;
                         ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:95:23 - error TS2304: Cannot find name 'TextDecoder'.

95         textDecoder?: TextDecoder;
                         ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:235:120 - error TS2304: Cannot find name 'TextEncoder'.

235 export declare function serializeActionData(contract: Contract, account: string, name: string, data: any, textEncoder: TextEncoder, textDecoder: TextDecoder): string;
                                                                                                                           ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:235:146 - error TS2304: Cannot find name 'TextDecoder'.

235 export declare function serializeActionData(contract: Contract, account: string, name: string, data: any, textEncoder: TextEncoder, textDecoder: TextDecoder): string;
                                                                                                                                                     ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:237:148 - error TS2304: Cannot find name 'TextEncoder'.

237 export declare function serializeAction(contract: Contract, account: string, name: string, authorization: Authorization[], data: any, textEncoder: TextEncoder, textDecoder: TextDecoder): SerializedAction;
                                                                                                                                                       ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:237:174 - error TS2304: Cannot find name 'TextDecoder'.

237 export declare function serializeAction(contract: Contract, account: string, name: string, authorization: Authorization[], data: any, textEncoder: TextEncoder, textDecoder: TextDecoder): SerializedAction;
                                                                                                                                                                                 ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:239:149 - error TS2304: Cannot find name 'TextEncoder'.

239 export declare function deserializeActionData(contract: Contract, account: string, name: string, data: string | Uint8Array | number[], textEncoder: TextEncoder, textDecoder: TextDecoder): any;
                                                                                                                                                        ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:239:175 - error TS2304: Cannot find name 'TextDecoder'.

239 export declare function deserializeActionData(contract: Contract, account: string, name: string, data: string | Uint8Array | number[], textEncoder: TextEncoder, textDecoder: TextDecoder): any;
                                                                                                                                                                                  ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:241:177 - error TS2304: Cannot find name 'TextEncoder'.

241 export declare function deserializeAction(contract: Contract, account: string, name: string, authorization: Authorization[], data: string | Uint8Array | number[], textEncoder: TextEncoder, textDecoder: TextDecoder): Action;
                                                                                                                                                                                    ~~~~~~~~~~~

node_modules/eosjs/dist/eosjs-serialize.d.ts:241:203 - error TS2304: Cannot find name 'TextDecoder'.

241 export declare function deserializeAction(contract: Contract, account: string, name: string, authorization: Authorization[], data: string | Uint8Array | number[], textEncoder: TextEncoder, textDecoder: TextDecoder): Action;
                                                                                                                                                                                                              ~~~~~~~~~~~

Desktop (please complete the following information):

• OS: Mac OS X 10.14.4
• Browser: None, this issue occurs during typescript compile.
• Version: Typescript 3.4.1

Additional context
I can see in the source file that TextEncoder and TextDecoder types seem to be global. Shouldn't they be imported from somewhere else as usual? I didn't dig much farther.

Not sure if this is related to #457 or not as there's no context in that issue about what the build problem actually was.

[thekevinbrown]

Ok, I've managed to get the build to work, but it'd be good to document how I did it.

1. Adding @types/text-encoding as a dev dependency fixes the errors about TextEncoding/TextDecoding.
2. Adding dom to my libs in tsconfig.json makes the Request, RequestInit, and Response errors go away as it brings in the types for fetch that node doesn't have by default. I'd love a better way to do this, but this works for now.

So, to fix:

1. npm i --save-dev @types/text-encoding
2. Add dom to your lib section tsconfig.jsonas follows:

{
	"compilerOptions": {
		"lib": [..., "dom"]
	},
}

Would this be best documented in the Readme? Happy to do a PR.

[c0d3ster]

Including the dom lib is almost always used with the es6 or es7 libs. While this is new to Typscript 2, it is relatively common practice. We are currently looking into the best way to remove the need to install @types/text-encoding in consuming applications, but for now a change to the README would be great. If you go ahead and add those two points (below NodeJS dependency section of installation) for clarity on how to integrate EOSJS into a Typescript project, we will approve it. I'll close this once the PR is approved for the README change.

[thekevinbrown]

^ I created the pull request.

[tbfleming]

Documented in #568