IONIC 2 build error with typings from @types

[airasheed]

I'm attempting to us D3 v4. I installed the typings from @types as done in your the service d3-ng2-service. I used the same format as you have in your package.json as well as creating a barrel. All worked well until I tried to run ionic serve. When using ionic serve it fails when trying to build. The error doesn't seem to be IONIC 2 specific. Can anyone help?

This is the error:
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(82,37): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(107,5): Error TS1131: Property or signature expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(107,14): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(108,14): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(109,14): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(110,16): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(110,35): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(111,13): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(111,22): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(112,13): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(112,22): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(113,17): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(113,36): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(114,14): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(114,23): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(115,14): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(115,23): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(116,16): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(116,41): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(116,45): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(117,16): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(117,41): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(117,45): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(118,12): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(118,21): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(119,15): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(120,16): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(120,27): Error TS1005: ',' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(120,36): Error TS1005: ';' expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(121,1): Error TS1128: Declaration or statement expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(82,37): Error TS1110: Type expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(107,5): Error TS1131: Property or signature expected.
TypeScript error: /Users/arash1/Projects/brite-front-end/node_modules/@types/d3-zoom/index.d.ts(107,14): Error TS1005: ';' expected.

[tomwanzek]

@airasheed could you kindly let me know the following to get a better understanding:

• What version of TypeScript are you using on your project? Should be TS 2.x for the definitions to work as intended. Also, depending on where you copied the error messages for d3-zoom from, this could be caused by the editor using a different version, than your local devDependency. E.g. in VSCode, you have to repoint your workspace settings to the devDependency compiler. Otherwise, you might see spurious errors from TS 1.8.x.
• What is the installed npm package version of the @types/d3-zoom definitions you are using?
• All errors above are from d3-zoom. Are you using other D3 module definitions with similar issues?

My initial guess would be related to compiler version, as I am using the d3-zoom definitions from @types without errors elsewhere. And they compile fine, within this repo and on DT/types-2.0.

But as I said, for starters, let me know...

[airasheed]

Thanks for the quick reply.

I'm using TS Version 1.8.10. The Ionic 2 project is using this version is there any other alternative? How would I normally update to TS 2.x, because the website is only showing TS 1.8.10.

[tomwanzek]

On a general note, there is a brand new TS 2 release candidate. See this MSFT blog post

So far, I used the TS 2 beta. As a matter of fact, for any of the definitions from the npm @types org to work, you will need TS 2. This is due to the fact that the compiler includes a new way of resolving type definitions for modules and the definitions can be written as UMD modules. I.e. these statements go beyond just the D3 module definitions.

I am afraid, it is beyond the scope of what I can provide here to address migrating an Ionic 2 project to TS 2.x. Hopefully, you can find some support on their github repo or stackoverflow.

[airasheed]

Thanks alot. Is there anyway to use D3 with out migrating to version TS 2.x? Can i ignore the typings some way at compile time?

[tomwanzek]

@airasheed I apologize, the added comment must have slipped through my attention. I am not aware of a robust set of definitions that are TS 1.8 compatible. With the official release of TS 2, there unfortunately seems very little rationale to justify the effort to provide a backwards compatible version of the definitions in this repo (and now in DefinitelyTyped/types-2.0 branch and available through npm @types.)

From what I gather, since your starting point was Ionic 2, your pain point should have gone as well with the latest beta release.

Should you still require TS 1.8 definitions, your best bet might be to open an issue DT. There is a tracking issue for the Definition Request which I kept updating at 9936. I did mention the point there with the same suggestion.