TypeScript中如何正确访问GetAudioQuery的audio_tags类型用于useState？

场景说明 #

你有一段GraphQL Codegen生成的类型定义：

export type GetAudioQuery = { 
  audioByPk?: { 
    address: string, 
    id: any, 
    title?: string | null, 
    subtitle?: string | null, 
    audio_tags: Array<{ tagId: any }> 
  } | null 
};

尝试为React组件的state标注类型时，直接写useState<GetAudioQuery['audioByPk']['audio_tags']>([])会触发类型错误——因为audioByPk是可选属性且可能为null，TypeScript无法确保它存在，因此不能直接访问其audio_tags属性。

正确写法 #

方法一：用NonNullable排除空值后提取类型

const [currTags, setCurrTags] = useState<NonNullable<GetAudioQuery['audioByPk']>['audio_tags']>([]);

NonNullable<GetAudioQuery['audioByPk']>会排除audioByPk的null和undefined类型，确保后续访问的是有效的对象结构，再提取其audio_tags类型。

方法二：提前定义标签类型（更清晰）

先单独提取标签数组的元素类型，再定义state：

// 提取单个音频标签的类型
type AudioTag = NonNullable<GetAudioQuery['audioByPk']>['audio_tags'][number];
// 为state标注数组类型
const [currTags, setCurrTags] = useState<AudioTag[]>([]);

这种方式更易读，后续如果需要复用标签类型也更方便。

方法三：用条件类型推导

如果想通过类型推导直接获取audio_tags的类型，可以用条件类型：

const [currTags, setCurrTags] = useState<
  GetAudioQuery['audioByPk'] extends { audio_tags: infer T } ? T : never
>([]);

当audioByPk符合包含audio_tags的结构时，自动推导其类型，否则返回never。

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