AbortController

[jakabjack]

Hi!,
I'm trying to use this lib from react-native with typescript.
unfortunately 'npm run tsc' will complain about AbortController:

node_modules/react-async/dist-types/index.d.ts:333:71 - error TS2304: Cannot find name 'AbortController'.
 
333 export declare type PromiseFn<T> = (props: AsyncProps<T>, controller: AbortController) => Promise<T>;

Any ideas how to solve this?

[jakabjack]

Did some more research on this. checked out the provided typescript example, it works perfectly.
It works because tsconfig.json has: "lib": ["dom"]

The "dom" lib defines the AbortController symbol, that's why tsc finds it when compiles the project.
If I remove the "dom" from the libs, among other errors the same error will pop up as in a react-native project: Cannot find name 'AbortController'.

Unfortunately "dom" cannot be added to libs in a react-native project, because it will cause duplicate definition errors. some symbols are already defined somehwere deep in the react-native typings, which "dom" lib will try to redefine.

I am totally puzzled with this at the moment.

[phryneas]

Yes, you're right that AbortController is only available in the browser. The runtime code checks if AbortController is available and only then uses it - the types assume it's there.

So the quickest workaround would be to put a something.d.ts in your project that just declares something along the likes

declare const AbortController: any;

That way the type warning would go away.

[jakabjack]

Thanks for the tip. I tried it out, here's what i've found out:

1. "unfortunately" AbortController is available on react-native, that's not the problem. I can create it with "new AbortController()" and use it after that in a totally legit way. The problem is, somehow the type definitions for it are missing. I do not exactly know from where does tsc extract the react-native type definitions, when compiling.

2. For your proposal to work, I had to put the declaration in the exactly in node_modules/react-async/dist-types/index.d.ts file. This is where the error popped up, so in order for tsc to find the declaration I must put it at the beginning of this file.
   Which is not ok, I loose any modifications when I reinstall the react-async json package.

3. there were 3 errors in total, your tip solved 1 of them:
   the one where AbortController was used as a value, line 198:

declare type GlobalScope = {
    __REACT_ASYNC__: any;
    AbortController?: typeof AbortController;
    fetch: typeof fetch;
};

the other two places referred to AbortController as a type:
line 152:
export declare type DeferFn<T> = (args: any[], props: AsyncProps<T>, controller: AbortController) => Promise<T>;
and line 336:
export declare type PromiseFn<T> = (props: AsyncProps<T>, controller: AbortController) => Promise<T>;

I came up for these two with a solution:
declare a type AbortControllerT:

declare const AbortController: any;
declare type AbortControllerT = typeof AbortController;

and then use this type in the above two mentioned places instead of AbortController.

This is certainly a temporary workaround, but in the long term very burdensome to maintain because of the 2 added lines and the other 2 replacements in the typedefiniton file, which gets rewritten every time the package is fetched.

If someone knows a better solution for this, it'd be very welcomed.

[phryneas]

You definitely do not need to modify our files for this to work.

You can try and make the typescript compiler aware of it by referencing the definition file (some .d.ts file within your project!) with a triple-slash directive in your main entry file or something similar:

///<reference path="path/to/file.d.ts" />

(this must be at the top of the file)

Generally, the discoverability of .d.ts files is a setup thing so I can't provide much more guidance that this as I can't reproduce your setup. So I hope this already helps.

[jakabjack]

you're right, i was able to use reference path='afile.d.ts' in my project, where afile.d.ts contains the line: declare const AbortController: any

But this solves just 1 of the 3 errors, as I described it in my previous comment.
The one where AbortController is used as a value.
Where it is used as a type, I will still get this error:
node_modules/react-async/dist-types/index.d.ts:333:71 - error TS2749: 'AbortController' refers to a value, but is being used as a type here.

[jakabjack]

found a solution:
add another line to afile.d.ts:
type AbortController = typeof Object;

[phryneas]

Great. I'm gonna close this then. Have a nice day!

[ghengeveld]

Maybe we should document this somewhere? @jakabjack could you maybe open a PR for that?