javascript - 类型 'number[]' 缺少类型 '[number, number, number, number]' 的以下属性 : 0, 1、2、3

Question

type padding = [number, number, number, number]

interface IPaddingProps {
  defaultValue?: padding
  className?: string
  disabled?: boolean
  min?: number
  max?: number
  onChange?: (value: number | string) => void
}
interface IFieldSate {
  value: padding
}
export default class FieldPadding extends React.Component<IPaddingProps, IFieldSate> {

  readonly state = {
    value: [0, 0, 0, 0]
  }
  constructor(props: IPaddingProps) {
    super(props)
    if (props.defaultValue) {
      this.state.value = [...props.defaultValue]
    }
  }

我在 state 处收到一条错误消息:

Type 'number[]' is missing the following properties from type '[number, number, number, number]': 0, 1, 2, 3?

Answer 1

您的问题是 state 被推断为数组而不是 tuple .有几种解决方法，详见 this answer。 .我将在这里介绍其中一个。

假设您使用的是 TypeScript 3.0 或更高版本，您可以定义以下 tuple() 辅助函数，它接受任意数量的参数并返回这些参数的元组:

type Narrowable = string | number | boolean | undefined | null | void | {};
const tuple = <T extends Narrowable[]>(...t: T)=> t;

然后，您可以在 FieldPadding 类定义中使用它:

export default class FieldPadding extends React.Component<IPaddingProps, IFieldSate> {
  readonly state = {
    value: tuple(0, 0, 0, 0) 
  }
}

这给 value 类型 [0, 0, 0, 0]，一个包含 numeric literal 四个元素的元组类型输入 0。

---

更新:

因此您希望 state 为 readonly 但您希望将 state.value 的值从 0 更改> 到其他号码？ 🤷‍

在这种情况下，您希望 value 的类型为 [number, number, number, number]，它比 [0, 0, 0, 0] 但比 number[] 窄。你可以自己注释，如果你想对类型进行如此严格的控制，我建议你这样做:

export default class FieldPadding extends React.Component<IPaddingProps, IFieldSate> {
  readonly state = {
    value: [number, number, number, number] = [0, 0, 0, 0]
  }
}

你也可以这样做

export default class FieldPadding extends React.Component<IPaddingProps, IFieldSate> {
  readonly state = {
    value: tuple(0 as number, 0 as number, 0 as number, 0 as number) 
  }
}

或

const z: number = 0;
export default class FieldPadding extends React.Component<IPaddingProps, IFieldSate> {
  readonly state = {
    value: tuple(z, z, z, z)
  }
}

或者甚至制作一个不那么窄的tuple()函数

const wideTuple = <T extends any[]>(...t: T) => t;
export default class FieldPadding extends React.Component<IPaddingProps, IFieldSate> {
  readonly state = {
    value: wideTuple(0, 0, 0, 0) 
  }
}

任何这些都应该适合你。不过，对所问问题的简短回答是，您需要一个元组类型，而不是数组。具体如何获得取决于您。

---

希望对您有所帮助；祝你好运!