如何在函数参数中复用嵌套Interface的pointData类型？

问题描述 #

已有如下TypeScript接口：

interface AllTheDatas{
 id: string
 pointData: {
  square: string
  triangle: string
 }
}

需要编写一个仅接收pointData对象作为参数的函数，希望直接复用AllTheDatas接口来定义参数类型，而非重新手动声明{square: string, triangle: string}。尝试过Partial、Pick<AllTheDatas, 'pointData'>均无效，报错要求传入包含内部两个键值对的对象。当前函数及调用代码如下：

// 调用代码
buildPointData(AllTheDatas.pointData)

function buildPointData(pointData: ?????){
 // 处理逻辑
 return `${AllTheDatas.square}--${AllTheDatas.triangle}`
}

解决方案 #

可以通过索引访问类型直接获取AllTheDatas中pointData的类型，写法为AllTheDatas['pointData']，这是TypeScript中复用已有接口内嵌类型的标准方式。

正确代码示例 #

interface AllTheDatas{
 id: string
 pointData: {
  square: string
  triangle: string
 }
}

// 用索引访问类型定义参数类型
function buildPointData(pointData: AllTheDatas['pointData']){
 // 处理逻辑
 return `${pointData.square}--${pointData.triangle}`
}

// 调用示例（需基于AllTheDatas类型的实例）
const data: AllTheDatas = {
 id: '1',
 pointData: { square: 'sq', triangle: 'tri' }
}
buildPointData(data.pointData)

为什么之前的方法无效？ #

• Partial<AllTheDatas>：会将AllTheDatas的所有属性转为可选，但得到的仍是包含id和pointData的对象类型，并非pointData本身的结构。
• Pick<AllTheDatas, 'pointData'>：得到的是包含pointData属性的对象类型（即{ pointData: { square: string; triangle: string } }），而非pointData的内部结构，不符合参数要求。

内容的提问来源于stack exchange，提问作者Lucy