reactjs 将 prop 类型定义为基于另一个 prop 的单个数字或数字数组

k10s72fa 于 2023-01-25 发布在 React

关注(0)|答案(2)|浏览(182)

这里是一个简单的例子，我正在寻找什么。我正在实现一个数组，我想检查如果多 prop 是真的，类型的项目应该是数字[]。否则，设置类型为数字。

interface EnhancedSelectProps {
  items: multi ? number[] : number;
  multi?: boolean;
}

const EnhancedSelect = ({
  items,
  multi,
}: EnhancedSelectProps) => {}

我试过union类型，但是它不起作用。当我想做这样的事情时，它会给予我一个ts错误。

interface EnhancedSelectProps {
  items?: number[] | number;
  multi?: boolean;
}

const EnhancedSelect = ({
  items,
  multi,
}: EnhancedSelectProps) => {
  if(multi) console.log(items.length);
    else console.log(items)
}

reactjs

来源：https://stackoverflow.com/questions/75222529/define-a-prop-type-as-a-single-number-or-array-of-numbers-based-on-another-prop

2条答案

按热度按时间

vawmfj5a1#

Titian打败了我，但是这里有一个使用泛型的版本

interface EnhancedSelectProps<T extends boolean> {
    items: T extends false ? number : number[];
    multi?: T;
}

function EnhancedSelect({
    items,
    multi,
}: EnhancedSelectProps<true> | EnhancedSelectProps<false>) {
    if (multi) console.log(items.length);
    else console.log(items)
}

Playground

赞(0）回复(0）举报 2023-01-25

dgjrabp22#

最简单的选择是使用区分并集，区分multi字段：

type EnhancedSelectProps = {
  items?: number[];
  multi: true;
} | {
  multi: false; 
  items?: number;
}

const EnhancedSelect = ({
  items,
  multi,
}: EnhancedSelectProps) => {
  if(multi) console.log(items?.length);
    else console.log(items)
}
EnhancedSelect({ multi: true, items: [1,2]})
EnhancedSelect({ multi: true, items: 1}) // error
EnhancedSelect({ multi: false, items: [1,2]}) // error
EnhancedSelect({ multi: false, items: 1}) 
EnhancedSelect({ items: [1,2]}) // error
EnhancedSelect({ items: 1 })

Playground链接
如果您使用的是旧版本的Typescript（〈= 4.6），您不能在让TS理解字段之间关系的同时解构参数，您需要放弃使用参数本身或在检查后解构：

const EnhancedSelect = (p: EnhancedSelectProps) => {
  if(p.multi) {
    console.log(p.items?.length);
    const { items } = p
    console.log(items?.length);
  } else {
    console.log(p.items)
    const { items } = p
    console.log(items)
  }
}

Playground链接

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 将 prop 类型定义为基于另一个 prop 的单个数字或数字数组

2条答案

相关问题

热门标签

最新问答