TypeScript如何提取泛型的嵌套类型来构造新的返回类型？

解决方案 #

你原来的写法不生效是因为Pick工具类型仅支持选择目标类型的顶层属性，不支持传入style.childrenStyles这类嵌套路径，正确实现如下：

1. 使用TypeScript内置的索引访问类型逐层获取嵌套属性的类型
2. 可给泛型T增加类型约束，避免传入不符合要求的类型参数导致报错

修正后的核心代码 #

// 给泛型T增加约束，确保存在style.childrenStyles属性
function wrapper<T extends { style: { childrenStyles: unknown } }>() {
  return function core() {
    return {} as T & {
      // 直接用索引访问获取嵌套类型
      childrenStyles: T['style']['childrenStyles']
    }
  }
}

完整可运行代码 #

type ChildrenStyles = {
  Main: {
    [index: string]: string;
  }
};

type Styles = {
  [index: string]: string;
} & {
  childrenStyles: ChildrenStyles;
}

type Props = {
  style: Styles;
}

function wrapper<T extends { style: { childrenStyles: unknown } }>() {
  return function core() {
    return {} as T & {
      childrenStyles: T['style']['childrenStyles']
    }
  }
}

const resultedCore = wrapper<Props>()();

// 此处可以正确触发VSCode语法提示
console.log(resultedCore.childrenStyles.Main)

注意：请确保属性名拼写一致，避免因拼写错误（如将childrenStyles误写为childernStyles导致类型不生效。

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