In the midst of developing an angular project, I am currently utilizing an interface to specify a configuration for a module. The design of the interface revolves around mapping names to objects and is relatively straightforward:
export interface NamedRoutes {
[routeName: string]: NamedRoute;
}
However, upon creating an instance of this interface, I encountered an issue where intellisense fails to resolve the members of the instance when it is being used. For example:
const routes: NamedRoutes {
someRoute: {...}
};
const someRoute = routes. // lack of intellisense support here
From my understanding, the problem lies in the fact that when the compiler attempts to backtrack the members, it perceives the indices as strings, thus allowing for any possible values and failing to suggest existing members accurately.
By omitting typing on the constant, intellisense successfully suggests the correct members. However, this approach could potentially reduce user experience within my API, as users would only receive compiler assistance for errors upon passing objects to my configuration method—especially if such interactions occur at different stages within our project. In my view, this drawback would result in a subpar UX for our API.
I have experimented with various advanced types like Record<string, NamedRoute>
and
<T extends string = string>
(for the index type).
Having elucidated my challenge and objective, I seek guidance on the best course of action. Is there a proper method to address this issue?
P.S.: Switching to a type instead of an interface remains a viable option for our project.