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