typescript 如何创建一个类型的任何字符串值位于数组对象的属性名称?

smdncfj3  于 2023-03-13  发布在  TypeScript
关注(0)|答案(1)|浏览(169)
interface Icon {
    id: number,
    className: string,
    tags: string[]
}

const iconArr = [
  {
      id: 1,
      className: 'banana-class',
      tags: ['']
  },
  {
      id: 2,
      className: 'apple-class',
      tags: ['']
  }
];

我想创建一个type,如果写入除banana-classapple-class之外的任何其他值,该type将导致错误。
在字符串数组中,我会使用type iconStringType = typeof iconStringArr[number],但在我的例子中,我有一个对象数组。
谢谢!
我尝试使用:

type iconType = typeof iconArr[number]['className'];

但它不起作用-它允许任何字符串值。

kupeojn6

kupeojn61#

首先,您没有键入iconArr数组,因此无论您的Icon接口如何,iconArr[number]['className']类型都被推断为string
这可以通过显式设置Icon[]类型来轻松修复,如下所示:

const iconArr: Icon[] = [
    ...
];

如果你想严格控制className中允许的字符串,你可以创建一个联合类型'banana-class' | 'apple-class',并在Icon接口中使用它:

interface Icon {
    id: number,
    className: 'banana-class' | 'apple-class',
    tags: string[]
}

现在,type iconType = typeof iconArr[number]['className']将计算为您创建的联合类型。

在注解中澄清后编辑:

如果要在运行时推断Icon类型,可以:

const iconArr = [
  {
      id: 1,
      className: 'banana-class' as const,
      tags: ['']
  },
  {
      id: 2,
      className: 'apple-class' as const,
      tags: ['']
  }
];

type Icon = typeof iconArr[number];

type iconType = typeof iconArr[number]['className'];

例如,定义'apple-class' as const会告诉Typescript推断“最窄类型”,在您的情况下是'banana-class' | 'apple-class'(请参阅文档)

相关问题