How can I import types/interfaces from a SingleSpa utility module to a Typescript based Micro frontend react app

496 views Asked by At

I'm setting up Micro Frontend architecture using SingleSpa. My apps(micro frontends) are setup using Typescript. As I'm in need of extracting out some common/shareable types/interfaces. So, each app can consume these type(s) using SingleSpa provided Utility modules. Not sure if this is the best way to do it but that's how I thought to proceed.

I do have a bit of understanding that in order to consume Utility module inside a Micro frontend. I need to create a declaration file(.d.ts) in the app. Like in my case, if I need to import type SomeType from utility then I need to do something like below in the app declaration.d.ts. Doing this makes the VSCode intellisense acknowledge that utility does have SomeType available.

// /somewhere-in-app/declaration.d.ts

declare module '@organization/types-utility' {
   export type SomeType;
}

Now here is the problem, if this is how I declare the module in each of the app declaration(.d.ts) file then how can I achieve the purpose of shareable types using SingleSpa utility module. As, it looks redundant that each app is maintaining its own declaration file for common types to be imported.

Currently I tried importing the type as below:

import { type SomeType } from '@organization/types-utility';

or

import type { SomeType } from '@organization/types-utility';

and consumed through following ways:

Option 1 (not working)

const someVariable: SomeType

it throws error

Cannot use namespace 'SomeType' as a type.

Option 2 (suppresses the ts warning but do not suggest available props in SomeType)

const someVariable = {} as typeof SomeType

it makes the error disappear but the VSCode intellisense do not suggest available props inside SomeType. :(

Looking for a better solution/approach

Sharing the module with SingleSpa utility works but I'm not sure if importing the types through this approach is the way to go. May be I should try something different. Open to any viable suggestions from the community.

Other things in my mind

Third party npm packages bundled with related modules and types through their own declaration(.d.ts) files. Wondering, do I have to publish my own private npm types-utility package? Unfortunately, I'm not looking forward to this approach yet unless there is no other option.

Feel free to ask more about the problem or if something more is needed to help understand better.

Similar Issue

Found somewhat related issue

0

There are 0 answers