TypeScript中如何将String::match返回的类数组对象转为数组？

问题代码 #

const tokens = [
  {
    re: /^(#.*)$/,
    parse: function(line: string) {
      const style = styles.header;
      return {
        content: line,
        style,
      };
    }
  },
  {
    re: /^(__)([^_]+)(__)/,
    parse: function(_:string, g1:string, text:string, g2:string) {
       return {
         content: text
       };
    }
  }
];

const createChunks = (text: string) => {
  return text.split('\n').map((line: string) => {
    const chunk_parser = tokens.find(({re}) => re.test(line));
    if (chunk_parser) {
      const { parse, re } = chunk_parser;
      const m = line.match(re);
      if (m) {
        return parse(...m); // 此处TypeScript报错
      }
    }
    return {
      content: line
    };
  });
}

问题现象 #

在JavaScript环境中，String.match返回的类数组对象可以通过扩展运算符或Array.from转换成数组传递给parse函数，但TypeScript中会抛出错误：

• 使用扩展运算符时：

  A spread argument must either have a tuple type or be passed to a rest parameter.

• 尝试用Array.from(m)扩展传递时，依然会报类型不匹配错误：

  argument of type 'string[]' is not assignable to the parameter of type 'string'

Node.js运行时的匹配结果示例：

> '# foo'.match(/^(#.*)$/)
[ '# foo', '# foo', index: 0, input: '# foo', groups: undefined ]
> [...'# foo'.match(/^(#.*)$/)]
[ '# foo', '# foo' ]

原因分析 #

TypeScript对String.match的类型定义做了区分：当正则包含g标志时返回string[] | null，否则返回RegExpMatchArray | null。RegExpMatchArray是包含index、input等额外属性的类数组对象，但TypeScript不认为它是可直接扩展的数组/元组类型；再加上数组中每个parse函数的参数个数不一致，TypeScript无法自动推断匹配结果的结构与parse参数的兼容性。

解决方案 #

方案1：类型断言（快速解决）

既然已经通过re.test(line)确保匹配成功，且运行时m的结构完全符合parse函数的参数要求，可直接将m断言为unknown[]绕过类型检查：

if (m) {
  return parse(...(m as unknown[]));
}

方案2：定义精确泛型Token类型（类型安全）

如果希望保留类型约束，可定义泛型Token类型，明确每个正则匹配结果对应的parse参数类型：

// 泛型Token类型，T对应parse的参数列表
type Token<T extends any[]> = {
  re: RegExp;
  parse: (...args: T) => { content: string; style?: typeof styles.header };
};

// 为每个Token指定对应的参数元组类型
const tokens: Token<any>[] = [
  {
    re: /^(#.*)$/,
    parse: function(line: string) {
      const style = styles.header;
      return {
        content: line,
        style,
      };
    }
  },
  {
    re: /^(__)([^_]+)(__)/,
    parse: function(_:string, g1:string, text:string, g2:string) {
       return {
         content: text
       };
    }
  }
];

这种方式能让TypeScript更好地推断类型，同时保留类型检查的安全性。

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