TypeScript模板字符串类型如何定义排除'on'开头的字段约束

TypeScript 暂不支持直接在索引签名的模板字面量中编写“不以指定字符串开头”的匹配规则，你需要结合映射类型的as重映射语法+条件类型来实现需求，完整实现代码如下：

type Event = {
  // 匹配所有以 on 开头的键
  [K in string as K extends `on${infer _}` ? K : never]: (e: string) => void
} & {
  // 匹配所有不以 on 开头的键，对应方法参数为number
  [K in string as K extends `on${infer _}` ? never : K]: (e: number) => void
}

验证示例 #

你可以用以下代码验证类型是否符合预期：

const demo: Event = {
  onSubmit: (val) => {
    // val 会被自动推断为 string 类型
    console.log(val.toUpperCase())
  },
  calc: (val) => {
    // val 会被自动推断为 number 类型
    console.log(val * 100)
  }
}

如果你的对象键是可枚举的，还可以用泛型版本获得更严格的类型校验：

type Event<T extends string> = {
  [K in T as K extends `on${infer _}` ? K : never]: (e: string) => void
} & {
  [K in T as K extends `on${infer _}` ? never : K]: (e: number) => void
}

// 传入所有可能的键的联合类型
type MyEvent = Event<'onClick' | 'onFocus' | 'getTotal' | 'clear'>

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