typescript - 通用和映射类型缩小

Question

type ModalProps = {
  login: LoginModalProps;
  signup: SignupModalProps;
};

interface ModalRootProps<K extends keyof ModalProps> {
  modalType: K;
  modalProps: ModalProps[K];
}

export function ModalRoot<ModalType extends keyof ModalProps>(props: ModalRootProps<ModalType>) {
  switch (props.modalType) {
    case 'login': {
      return <LoginModal {...props.modalProps}/>;
    }

    case 'signup': {
      return <SignupModal {...props.modalProps} />;
    }

    default:
      return null;
  }
}

这段代码的结果是

TypeError on props.modalProps (LoginFormProps is not assignable to SignupFormProps).

当 switch 语句中 ModalType 缩小为 'login' 时，我希望 modalProps 为输入为 ModalProps['switch'] (SignupFormProps)，但仍输入为 ModalProps[K]。

我在这里做错了什么？

Answer 1

像这样的类型保护通常与受歧视的联合一起使用。您可以使用 ModalProps 创建这样的类型，然后类型保护将按预期工作。

type ModalRootProps<T extends keyof ModalProps> =  T extends keyof ModalProps ? { modalProps: ModalProps[T], modalType: T}: never 

export function ModalRoot(props: ModalRootProps<keyof ModalProps>) {
    switch (props.modalType) {
        case 'login': {
            return <LoginModal { ...props.modalProps } />;
        }
        case 'signup': {
            return <SignupModal { ...props.modalProps } />;
        }

        default:
            return null;
    }
}

不知道为什么你的原始代码不起作用，类型防护通常非常注重缩小类型。