TypeScript中如何创建Magic类型别名，实现字段路径与函数参数类型的关联？

要实现让format函数的参数类型自动匹配path指定的字段路径类型，我们可以借助TypeScript的模板字符串类型、递归条件类型和映射类型，构建两个核心工具类型来完成类型关联：

第一步：生成所有合法路径的Paths<T> #

这个类型会递归遍历对象的所有嵌套属性，自动生成所有可能的点分隔路径字符串，完全匹配你需要的'field1' | 'field2' | 'field2.field21'...这类路径集合：

type Paths<T> = T extends object
  ? {
      [K in keyof T]: K extends string
        ? `${K}` | `${K}.${Paths<T[K]>}`
        : never;
    }[keyof T]
  : never;

第二步：根据路径提取对应值类型的Get<T, P> #

这个类型会接收路径字符串P，递归从对象T中提取对应路径的属性类型，这就是你需要替换Magic<T>的核心类型：

type Get<T, P extends string> = P extends `${infer K}.${infer Rest}`
  ? K extends keyof T
    ? Get<T[K], Rest>
    : never
  : P extends keyof T
  ? T[P]
  : never;

第三步：关联路径与格式化函数的类型 #

我们需要修改ColumnType和ColumnsType，让path的具体值和format的参数类型自动绑定，这里推荐两种实现方式：

方式一：泛型绑定（明确关联）

直接让ColumnType接受两个泛型参数，显式绑定路径和对应类型：

export interface ColumnType<T, P extends Paths<T>> {
  path: P;
  format?: (value: Get<T, P>) => string;
}

export type ColumnsType<T> = Array<ColumnType<T, Paths<T>>>;

方式二：联合类型自动推断（更简洁，推荐）

通过映射类型生成所有路径对应的ColumnType联合类型，TypeScript会自动根据你填写的path值推断format的参数类型：

type ColumnType<T> = {
  [P in Paths<T>]: {
    path: P;
    format?: (value: Get<T, P>) => string;
  };
}[Paths<T>];

export type ColumnsType<T> = ColumnType<T>[];

验证效果 #

现在你的列配置会自动获得完整的类型推断，无需手动指定参数类型：

export interface Item {
  field1: string,
  field2: {
    field21: number,
    field22: {
      field221: string;
      field222: string;
    },
  },
}

export const itemsColumns: ColumnsType<Item> = [
  { path: 'field1' }, // format参数自动为string类型
  { 
    path: 'field2', 
    // 参数自动推断为Item['field2']类型，能直接访问field21、field22
    format: ({field21, field22}) => field21 > 0 ? field22.field221 : field22.field222 
  },
  { 
    path: 'field2.field22', 
    // 参数自动推断为Item['field2']['field22']类型，能直接访问field221、field222
    format: ({field221, field222}) => `${field221} - ${field222}`
  },
  {
    path: 'field2.field21',
    // 参数自动推断为number类型，支持toFixed等数字方法
    format: (num) => num.toFixed(2)
  }
];

原理说明 #

• Paths<T>通过递归遍历对象的每个键，将当前键与子路径拼接，生成所有合法的点分隔路径集合。
• Get<T, P>通过模板字符串类型拆分路径的每一部分，逐层向下查找对象的属性类型，最终返回对应路径的值类型。
• 修改后的ColumnType通过泛型或联合类型，将path的具体值与format的参数类型强绑定，让TypeScript自动完成类型推断，完全省去手动定义类型的麻烦。

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