TypeScript中如何引用父类型里数组子属性的元素类型？

在TypeScript开发中，若父类型的某个子属性是数组类型，直接通过父类型['子属性']获取到的是数组本身的类型，而非数组内部元素的类型，这会导致无法获得元素属性的自动补全。

问题示例 #

type A = {
    a: number,
    complex: {
        b:string,
    },
}

// 正常：可引用A中complex的类型，自动补全生效
function withComplexA(prop: A['complex']) {
    // prop. // <-- 输入时会自动提示'b'属性
}

type B = {
    a: number,
    complex: {
        b: string,
    }[],
}

// 异常：只能拿到数组类型，无法获取元素属性补全
function withComplexB(prop: B['complex']) {
    // prop. // <-- 提示的是数组方法，而非元素的'b'属性
}

解决方案 #

通过自定义工具类型SupaExtract，借助infer关键字提取数组的元素类型：

type SupaExtract<T> = T extends Array<infer U> ? U : never;

type C = {
    a: number,
    complex: {
        b: string,
    }[],
}

// 正常：可引用数组元素类型，自动补全生效
function withComplexC(prop: SupaExtract<C['complex']>) {
    // prop. // <-- 输入时会自动提示'b'属性
}

内容的提问来源于stack exchange，提问作者Page not found