嵌套映射类型中以斜杠开头的字符串索引为何触发不兼容报错

问题根因 #

• 以/开头的字符串在TypeScript中没有特殊含义，报错由模板字面量索引签名的校验规则触发：
  1. 你定义的Test类型中，/${string}模板字面量索引签名要求：所有键名匹配/开头格式的属性，其属性值必须同时包含POST和GET两个完整的方法结构
  2. ExtendedTest中的/slash属性仅定义了POST方法，缺失了约束要求的GET方法，因此不满足Test的类型约束
  3. 你观察到的两种无报错场景的逻辑：
     • 映射类型不嵌套时：索引签名对属性值的约束更简单，只要符合基础类型要求就不会触发校验失败
     • 键名无开头斜杠时：键名不匹配/${string}的规则，不会被该索引签名校验，自然不会报错

修复方案 #

按需选择以下两种修复方式：

方式1：补全ExtendedTest中缺失的GET方法 #

type ExtendedTest = { 
  '/slash': {
    'POST': {
      parameter: unknown
    },
    // 补全约束要求的GET方法
    'GET': {
      parameter: unknown
    }
  }
}

方式2：修改Test类型，将请求方法标记为可选 #

如果你允许匹配路径下仅存在部分请求方法，可以给方法加可选标记：

type Test = { 
  [slasher in `/${string}`]: {
    // 加?表示方法可选
    [method in 'POST' | 'GET']?: {
      parameter: unknown
    }
  }
}

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