I'm defining my own types in a create-react-app application. I'd like these types globally available without having to explicitly import them.
An answer here led me to the src/global.d.ts file, which is working with caveats. Simple interfaces or types declared there are indeed available, explicitly, elsewhere. This is great.
However some of my types extend types imported from modules that I'm using. As soon as I import or export anything from global.d.ts the whole thing stops working.
Thing I'd like to be able to do #1
This is simple: create a custom interface which extends one provided by a module.
import { ExternalType } from ‘some-public-module’;
interface MyType extends ExternalType {
myCustomThing: string;
}
Thing I'd like to be able to do #2
More complex. Here I'm using XState, which allows me to create a model and then extract a type from it. I'd like to expose that globally, explicitly, but any way I do it involves an import on global.d.ts.
/* machine.ts */
const authModel = /* some thing */
export type AuthMachineContext = ContextFrom<typeof authModel>;
/* global.d.ts */
// Nothing works.
I understand that the isolatedModules setting in tsconfig.json might have something to do with this, but it's impossible to turn off as CRA just turns it back on. (My app will never be split up, so I'm not sure that I really need this on?)
So, is it possible to have:
- A single file which contains my own type and interface declarations,
- that also imports types from another module so that I can extend them,
- with the default CRA configuration?
Or do I just need to explicitly export/import the edge-cases that I have above and be happy that 95% of my types are implicitly handled?