TypeScript中如何挑选并重命名类型键，保留JSDoc与属性链接？

直接通过Type['Prop']的方式提取属性类型，确实会丢失原属性的JSDoc和编辑器里的属性链接。要解决这个问题，可以用映射类型实现属性的挑选与重命名，完整保留原属性的元信息。

第一步：实现重命名属性的工具类型 #

先写一个通用工具类型RenameProp，它能把目标类型里的指定属性重命名为新名称，同时保留原属性的所有类型信息和JSDoc：

type RenameProp<
  T extends object,
  OldKey extends keyof T,
  NewKey extends string
> = Omit<T, OldKey> & {
  [K in NewKey]: T[OldKey]
}

这个工具类型的逻辑很直白：

• 用Omit<T, OldKey>移除原类型里要重命名的属性
• 通过映射类型把原属性的类型绑定到新属性名上

第二步：应用到你的示例中 #

把原来的ChildProps写法改成用这个工具类型，结合接口继承实现需求：

interface BoxProps {
  /** Some elaborate description */
  className: string
}

interface LayoutProps {
  /** Different elaborate description */
  className: string
}

// 先把LayoutProps的className重命名为outerClassName
type RenamedLayoutProps = RenameProp<LayoutProps, 'className', 'outerClassName'>

// 合并BoxProps和重命名后的属性
interface ChildProps extends BoxProps, RenamedLayoutProps {}

declare const x: ChildProps

现在在编辑器里查看x.outerClassName时，就能看到原LayoutProps.className的JSDoc，并且能跳转到原属性的定义处，完全保留了元信息。

简化写法（可选） #

如果只需要提取单个属性并重命名，也可以省略单独定义RenamedLayoutProps的步骤：

interface ChildProps 
  extends BoxProps, 
  RenameProp<Pick<LayoutProps, 'className'>, 'className', 'outerClassName'> {}

用Pick先选中LayoutProps里的className，再用RenameProp重命名，效果完全一致。

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