TypeScript引用泛型类型索引提示无法索引类型如何解决

你定义的泛型参数ThisMessageUpdateBody未设置类型约束，TypeScript无法确认该类型一定存在data可索引键，因此抛出索引错误。

方案1：沿用原有逻辑，仅添加泛型约束 #

给ThisMessageUpdateBody添加强制继承MessageUpdateBody的约束，让TypeScript确认该类型必然包含code和data属性：

// 仅增加 extends 约束，完全兼容原有逻辑
function createMessage<ThisMessageUpdateBody extends MessageUpdateBody>(
  code: string, 
  data?: ThisMessageUpdateBody['data']
): MessageUpdate<ThisMessageUpdateBody> {
  const message = {
    header: {
      id: '123',
      type: 'UPDATE'
    },
    body: {
      code,
      data
    }
  } as MessageUpdate<ThisMessageUpdateBody>;
  return message
}

方案2：优化使用体验，简化泛型传入逻辑 #

可以直接将泛型参数绑定到data的类型，避免使用者每次都需要手动定义完整的body结构，调用时还能自动推导data类型：

// 泛型直接对应data的类型，使用成本更低
function createMessage<TData extends UnknownRecord = UnknownRecord>(
  code: string, 
  data?: TData
): MessageUpdate<{code: string, data?: TData}> {
  return {
    header: {
      id: '123',
      type: 'UPDATE'
    },
    body: {
      code,
      data
    }
  }
}

// 调用示例：自动推导data类型为 {foo: string} | undefined
const msg = createMessage('SOME_UPDATE', {foo: 'bar'});

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