Typescript definitions don't work

[dwickern]

If you import fetch from 'fetch', typescript won't resolve it.
If you import fetch from 'ember-fetch', typescript will resolve it, but you'll have a runtime error.

When you import fetch, typescript looks in node_modules/fetch. It won't scan the whole node_modules directory for anyone exporting a fetch module. You can work around this with an explicit path mapping in tsconfig.json, but it's not conventional.

Maybe this package could export ember-fetch, and eventually deprecate fetch?

/cc @toranb @chriskrycho

[chriskrycho]

Ugh. I was hoping that fetch would be an actual npm package, but it's whatwg-fetch, which isn't even a little bit better than ember-fetch. I agree that the best option here is exporting from ember-fetch instead, since the real npm fetch package is something totally different.

Your alternative does bring up an interesting point I'd like to think about in other packages as makes sense: if there's a good reason to, we can presumably teach people how to update the tsconfig.json as part of the addon installation process. That should certainly be a last-resort option, though.

[toranb]

I was actually curious about the (most) correct path forward myself and thought it might be worth asking @DanielRosenwasser to chime in :)

warning and type defs are below for quick reference

A default export can only be used in an ECMAScript-style module.

export = fetch;

declare namespace fetch {
  export default function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
}

This is how we import it in our ember applications

import fetch from 'fetch';

[DanielRosenwasser]

A default export can only be used in an ECMAScript-style module.

Right now by default, TypeScript assumes the mapping between ES modules and CJS modules to be 1:1 (the namespace record and the imported object are treated the same). To get around that, you can use --allowSyntheticDefaultImports.

You can work around this with an explicit path mapping in tsconfig.json, but it's not conventional.

An alternative idea is to add

    "fetch": "ember-cli/ember-fetch"

which will get the current state of ember-fetch from this GitHub repo as a dependency

[toranb]

@DanielRosenwasser thanks for the detailed reply! Reading this it would appear the synthetic option is most appropriate. Any downside to using this option generally speaking?

[toranb]

@chriskrycho @dwickern I just upgraded to typescript v2.6 and this doesn't seem like an issue (anymore?). Here is a repo you can build to confirm it works/ or doesn't for reference

https://github.com/toranb/ember-redux-yelp/commits/branches/seamlessAndTypeScript

Is anyone else having issues w/ TypeScript v2.4/2.5 or 2.6 ?

[theseyi]

Still have the same issue with ts2.6 without using a parallel to your solution above, vis-a-viz an ambient module declaration @toranb

[lstrzebinczyk]

We seem to still have this issue with typescript 2.6.2.

[chriskrycho]

I worked around it long since by doing "fetch": ["node_modules/ember-fetch/index.d.ts"], in my tsconfig.json, so at present that's the thing to do.

I don't agree with @toranb that the synthetic option is the most appropriate. I think it's actually more correct to have the export and import behave correctly at the package level, and then have the types map to that.

[lstrzebinczyk]

I worked around it by including the types in my own code, but It should probably "just work" when including the package.

[DanielRosenwasser]

I still kind of think that adding a package.json devDependency of

    "fetch": "ember-cli/ember-fetch"

might be the easiest thing.

[toranb]

Just a quick note here - happy to pass the torch to others who legit know TypeScript :)

When I originally wrote these typedefs I was heads down with TypeScript but these days I don't actually use it (yet) and as a result don't know what is best for library/addon authors. If what @chriskrycho is suggesting seems like the best path forward please feel free to make a move without my involvement. I honestly just want to spin up an ember app (with TypeScript) at some point and get no errors when I turn on strict mode (using libraries like ember-fetch)

[nlfurniss]

Believe this issue should be solved now that TS support has been added