时间戳

首页 > 解决方案 > 是否有可能指定来自道具的数组长度？

javascript - 是否有可能指定来自道具的数组长度？

问题描述

是否可以指定来自props使用 type from的数组的长度Typescript？

我们有一个对象数组：

const arrayPassedViaProps = [
  { key: '1', label: 'Label 1', value: 9 },
  { key: '2', label: 'Label 2', value: 3 },
  { key: '3', label: 'Label 3', value: 3 },
  { key: '4', label: 'Label 4', value: 22 },
  { key: '5', label: 'Label 5', value: 1 }
]

我像这样传递这个数组props：

<DownlineProgress data={arrayPassedViaProps} />

在DownlineProgress组件内部我定义了一个类型：

type DownlineProgressBarProps = {
  data: {
    key: string
    label: string
    value: number
  }[]
}

我正在使用这种类型props

export const DownlineProgress = ({data}: DownlineProgressBarProps) => ...

当我传递数组没有正确长度的道具时，我希望 Typescript 通知我，它应该包含两个或三个对象

我如何修改我type的以实现这种行为？

PS。目前我正在使用if语句来检查

if(data.length > 3 || data.length < 2){
  throw(`DownlineProgress need an array of length 2 or 3. You pass ${data.length}`)
}

标签： javascriptreactjstypescript

解决方案

这是一个纯 TypeScript 解决方案：

interface Data {
    key: string;
    label: string;
    value: number;
}

// The following type should have two or three elements of type Data
type ArrayWithTwoOrThreeDataElements = [ Data, Data, Data? ];

在您的情况下，由于在 props 值中您期望一个具有名为dataData 类型的属性的对象，您可以按如下方式定义 props 的类型：

type DownlineProgressBarProps = [
    { data: Data }, 
    { data: Data },
    { data: Data }?
];

如果您想避免重复数据属性键，自然可以为单个道具项目创建一个类型：

interface Data {
    key: string;
    label: string;
    value: number;
}

interface DownlineProgressBarProp {
    data: Data
}

type DownlineProgressBarProps = [
    DownlineProgressBarProp,
    DownlineProgressBarProp,
    DownlineProgressBarProp?
];

推荐阅读