通用类型中的类型约束

Question

我有以下代码

interface BaseModalProps {
  name:string
}
interface AddToListModalProps extends BaseModalProps {
  name: string;
  age: number;
};
export const AddToListModal: FC<AddToListModalProps> = ({
  name,
  age,
}: AddToListModalProps) => <h1>{`${name} ${age.toString()}`}</h1>;


// bad TS syntax, what is the correct syntax? 
export const dynamicModal: FC<{T extends BaseModalProps}> = AddToListModal;

我想将dynamicModal分配给具有从BaseModalProps扩展的道具的组件。 AddToListModal就是一个很好的例子。 如果您将不符合要求的组件分配给dynamicModal我想要一个类型错误

我已经尝试了几个解决方案，但没有一个有效，有什么想法吗？ 谢谢！

Answer 1

您需要制作通用类型：

export type DynamicModal<T extends BaseModalProps> = FC<T>;

// Works fine
export const AddToListModal: DynamicModal<AddToListModalProps> = ({
  name,
  age,
}) => <h1>{`${name} ${age.toString()}`}</h1>;

// Errors as expected
export const EpicFail: DynamicModal<{ a: number }> = ({ a }) => <p>{a.toString()}</p>;

操场