typescript 如何在打印脚本中使用嵌套对象的索引签名?

kr98yfug  于 2022-12-19  发布在  TypeScript
关注(0)|答案(3)|浏览(131)

如何指定嵌套对象的索引签名?我有一个组件,我需要为它定义类型。

const data = {
  name:'Jack',
  age:10,
  address: {
    city:'Boston',
    country:'USA'
  }
}

const DataCell = (data:{[key: string]: string })=> {
  return <span>{data.address.country}</span>
}

如果我这样指定它,我会得到Property 'country' does not exist on type 'String'.,我不想硬编码接口。

wnavrhmk

wnavrhmk1#

若要为嵌套对象指定索引签名,可以使用以下语法:

const DataCell = (data: { [key: string]: { [key: string]: string } }) => {
  return <span>{data.address.country}</span>
}

这指定数据对象具有字符串索引签名,并且对象中每个属性的值具有另一个字符串索引签名。这允许您使用点标记法(如data.address.country)访问嵌套对象的属性。
或者,可以使用类型别名定义嵌套对象的形状:

type Address = {
  [key: string]: string
}

const DataCell = (data: { [key: string]: Address }) => {
  return <span>{data.address.country}</span>
}

这使您可以在代码中的其他位置重用Address类型,并使类型定义更易于阅读和理解。

68de4m5k

68de4m5k2#

我不明白您要做什么,但您的声明将导致值data.addressstring
您可以将其样式改为:

interface Data {
  name: string
  age: number
  address: {
    city: string
    country: string
  }
}

const DataCell = (data: Data)=> {
  return <span>{data.address.country}</span>
}
mfuanj7w

mfuanj7w3#

既然你知道你的对象看起来像什么,你可以简单地使用它作为类型。

type User = {
  name: string;
  age: number
  address: {
    city: string
    country: string
  }
}

const DataCell = (data: User)=> {
  return <span>{data.address.country}</span>
}

相关问题