如何给React组件props定义可接收ICreateTodoInput或IEditTodoInput的类型

你写的EitherOr泛型不需要使用，直接用联合类型定义todoInput即可，报错的核心原因是：TS默认不允许访问联合类型的非共有属性，你需要先做类型收窄，告诉TS当前的todoInput属于哪一种接口类型。

1. 完成Props类型定义 #

interface ITodoMutatorProps{
  todoInput?: ICreateTodoInput | IEditTodoInput
}

2. 组件内部做类型收窄 #

因为IEditTodoInput独有todoId属性，ICreateTodoInput没有该属性，直接用in操作符判断即可实现类型自动收窄：

export const TodoMutator = ({
  todoInput 
}: ITodoMutatorProps): JSX.Element => {
  const submitHandler = () => {
    // 先处理可选值为空的情况
    if (!todoInput) return

    if ('todoId' in todoInput) {
      // 此处TS会自动将todoInput收窄为IEditTodoInput类型，可正常访问todoId
      // 发起编辑请求
      editTodoApi(todoInput)
    } else {
      // 此处TS会自动将todoInput收窄为ICreateTodoInput类型
      // 发起创建请求
      createTodoApi(todoInput)
    }
  }

  // 其余组件渲染逻辑
}

可选优化：自定义类型守卫 #

如果需要多处判断类型，可以封装自定义类型守卫提升可读性：

function isEditTodoInput(input: ICreateTodoInput | IEditTodoInput): input is IEditTodoInput {
  return 'todoId' in input
}

// 组件内使用
if (isEditTodoInput(todoInput)) {
  editTodoApi(todoInput)
} else {
  createTodoApi(todoInput)
}

内容的提问来源于stack exchange，提问作者Joseph Hailu