Encountering issues with type narrowing using the satisfies operator.
The goal is to specify that the name property of br should be of type "br":
type RichTextCustomElement = {
name: string;
Button: React.ComponentType<any>;
Element: React.ComponentType<any>;
plugins?: RichTextPlugin[] | undefined;
}
const br = {
name: "br",
Button: Button,
Element: Element,
plugins: [plugin],
} satisfies RichTextCustomElement;
The resulting type of br seems incorrect:
const br: {
name: string;
Button: FC<{
path: string;
}>;
Element: FC<{
attributes: Record<string, any>[];
children: ReactNode;
}>;
plugins: RichTextPlugin[];
}
Although TypeScript narrowed the types for Button, Element, and plugins, the type of name remains as string instead of "br".
Initially speculated it could be related to tsx, but this was quickly disproved by creating a new file in the project directory:
type User = {
id: string;
name: string;
};
const defaultUser = {
id: "123",
name: "Matt",
} satisfies User;
Type of defaultUser:
const defaultUser: {
id: string;
name: string;
}
In other parts of the project, the satisfies operator behaves as expected:
type CollectionConfig = {
slug: string;
// ...
}
const MenuItems = {
slug: COLLECTION.MENU_ITEMS,
// ...
} satisfies CollectionConfig;
const MenuItems: {
slug: "menuItems";
// ...
}
Unsure why this discrepancy exists. Any assistance would be appreciated.