通用類型中的類型約束

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>;

操場