Typescript如何定义仅支持指定键和下划线开头字符串的索引签名类型

问题描述 #

我想要在Typescript中定义一个类型，其索引签名仅接受特定的字面量键（例如"dog" | "cat"），以及所有以下划线_开头的字符串（即'_{string}'格式）。示例如下：

const results = {
    cat: true,
    dog: true,
    
    // 符合规则，类型校验通过
    _fish: true,
    
    // 不符合规则，类型校验报错
    invalid: false,
}

使用场景 #

我开发了一个表格组件，其接收的columns对象属性既可以是行数据自带的属性（例如firstName），也可以是自定义的计算属性（例如_actions）。

解决方案 #

TypeScript 4.1以上版本支持模板字面量类型，结合映射类型即可实现该需求，适配表格场景的泛型实现如下：

// 泛型参数T为表格行数据的类型，ColumnConfig可替换为你项目中列配置的实际类型
type TableColumns<T extends object, ColumnConfig = unknown> = {
  [K in keyof T | `_${string}`]?: ColumnConfig;
};

实际使用示例 #

// 定义你的行数据类型
interface OrderRow {
  orderId: string;
  totalPrice: number;
  createTime: string;
}

// 生成对应的columns类型
type OrderTableColumns = TableColumns<OrderRow, {
  title: string;
  render?: (row: OrderRow) => React.ReactNode;
}>;

// 合法的columns配置
const validColumns: OrderTableColumns = {
  orderId: { title: "订单编号" },
  totalPrice: { title: "订单金额" },
  _operations: { 
    title: "操作",
    render: (row) => <button onClick={() => handleEdit(row.orderId)}>编辑</button>
  }
};

// 非法配置，TS会直接抛出类型错误
const invalidColumns: OrderTableColumns = {
  orderId: { title: "订单编号" },
  // 键extra既不是行数据属性，也不是下划线开头，触发类型校验报错
  extra: { title: "额外字段" }
};

如果你的场景不需要动态适配行数据类型，只需要固定的几个字面量键加下划线开头的键，直接写死即可：

type FixedKeyType = {
  [K in "cat" | "dog" | `_${string}`]: boolean;
};

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