如何让 TypeScript 知道我正在使用哪些 proptypes？

Question

如何让 TypeScript 知道组件正在接收哪些 prop 类型？ 例如，如果 multiple 为真，我希望 TypeScript 期望 selectValue 是一个字符串数组，或者如果它不存在，那么 TypeScript 应该期望 selectValue 是一个字符串。

我真的不喜欢将我的 props 转换为合适的类型才能让 TypeScript 满意。

这是我的自定义 <Select> 组件的当前代码：

import React, { ReactNode } from 'react';
import MultipleSelect from './MultipleSelect';
import SingleSelect from './SingleSelect';

interface MultipleSelectProps {
  selectValue: string[];
  multiple: true;
  onSelectChange: (values: string[]) => void;
  renderValue?: (value: string[]) => React.ReactNode;
}

interface SingleSelectProps {
  selectValue: string;
  onSelectChange: (values: string) => void;
  multiple?: never;
  renderValue?: (value: string) => React.ReactNode;
}

type SelectProps = SingleSelectProps | MultipleSelectProps;

const Select: React.FC<SelectProps> = ({
  selectValue,
  multiple,
  onSelectChange,
  renderValue,
  children,
}) => {
  if (multiple) {
    const multipleSelectValue = selectValue as string[];
    const multipleSelectChange = onSelectChange as (value: string[]) => void;
    const multipleRenderValue = renderValue as (value: string[]) => ReactNode;

    return (
      <MultipleSelect
        selectValue={multipleSelectValue}
        onSelectChange={multipleSelectChange}
        renderValue={multipleRenderValue}
      >
        {children}
      </MultipleSelect>
    );
  }

  const singleSelectValue = selectValue as string;
  const singleSelectChange = onSelectChange as (value: string) => void;
  const singleRenderValue = renderValue as (value: string) => ReactNode;

  return (
    <SingleSelect
      selectValue={singleSelectValue}
      onSelectChange={singleSelectChange}
      renderValue={singleRenderValue}
    >
      {children}
    </SingleSelect>
  );
};
export default Select;

我想写成这样：

import React, { ReactNode } from 'react';
import MultipleSelect from './MultipleSelect';
import SingleSelect from './SingleSelect';

interface MultipleSelectProps {
  selectValue: string[];
  multiple: true;
  onSelectChange: (values: string[]) => void;
  renderValue?: (value: string[]) => React.ReactNode;
}

interface SingleSelectProps {
  selectValue: string;
  onSelectChange: (values: string) => void;
  multiple?: never;
  renderValue?: (value: string) => React.ReactNode;
}

type SelectProps = SingleSelectProps | MultipleSelectProps;

const Select: React.FC<SelectProps> = ({
  selectValue,
  multiple,
  onSelectChange,
  renderValue,
  children,
}) => {
  return (
{
  multiple ?
    <MultipleSelect
      selectValue={selectValue}
      onSelectChange={onSelectChange}
      renderValue={renderValue}
    >
      {children}
    </MultipleSelect>
    :
    <SingleSelect
      selectValue={selectValue}
      onSelectChange={onSelectChange}
      renderValue={renderValue}
    >
      {children}
    </SingleSelect>
  );
};
export default Select;

并且我希望能够像使用原生 html <select> 一样使用我的组件。像这样：

<Select selectValue={selectValue} onSelectChange={onSelectChange} multiple>
  {options}
</Select>

Answer 1

这就是我的做法。通过定义类型，TypeScript 可以知道 selectValue 的类型和其他可能会改变的类型。

import React, { ReactNode } from 'react';
import MultipleSelect from './MultipleSelect';
import SingleSelect from './SingleSelect';


type SelectProps = {
    kind: 'multiple',
    selectValue: string[];
    onSelectChange: (values: string[]) => void;
    renderValue?: (value: string[]) => React.ReactNode;
} | {
    kind: 'single',
    selectValue: string;
    onSelectChange: (values: string) => void;
    renderValue?: (value: string) => React.ReactNode;

}

const Selector = (props: SelectProps, children): JSX.Element => {
  return (
    <>
        {
        props.kind === 'multiple' 
        ?
            <MultipleSelect
            selectValue={props.selectValue}
            onSelectChange={props.onSelectChange}
            renderValue={props.renderValue}
            >
            {children}
            </MultipleSelect>
        :
            <SingleSelect
            selectValue={props.selectValue}
            onSelectChange={props.onSelectChange}
            renderValue={props.renderValue}
            >
            {children}
            </SingleSelect>
        
        }
    </>
  )
}

export default Selector

Answer 2

您可以使用in检查是否设置了多个，如下所示：

type MultipleSelectProps = {
  multiple: true;
  value: string[];
  onChange: (newValue: string[]) => void;
};

type SingleSelectProps = {
  value: string;
  onChange: (newValue: string) => void;
};

type SelectProps = MultipleSelectProps | SingleSelectProps;

function SingleSelect(props: SingleSelectProps) {
  return null;
}

function MultiSelect(props: MultipleSelectProps) {
  return null;
}

function Select(props: SelectProps) {
  return "multiple" in props ? (
    <MultiSelect {...props} />
  ) : (
    <SingleSelect {...props} />
  );
}