TypeScript中为何用matches?.[1]而非matches[1]？求技术解答

问题背景 #

我首次接触TypeScript代码，大部分逻辑均能理解，但对最后一行代码存在疑问。我识别到该行使用了Nullish coalescing operator（空值合并运算符），但不明白为何正则匹配结果要写成matches?.[1]，看起来matches[1]也能正常运行，希望获得技术解答。

代码示例：

const titleRegex = /<title(?:.*?)>(.*?)<\/title>/
const extractTitle = (website: string): string => {
  const matches = titleRegex.exec(website)
  return matches?.[1] ?? ''
}

解答 #

• matches可能为null：当正则表达式在输入字符串中完全匹配不到任何结果时，RegExp.exec()会返回null而非空数组。此时直接写matches[1]会触发运行时错误Cannot read properties of null (reading '1')，同时TypeScript的类型检查也会报错——因为null没有索引属性。
• 可选链操作符?.的安全作用：matches?.[1]是TypeScript的可选链语法，它会先判断matches是否为null或undefined。如果是，就直接返回undefined，不会尝试访问索引[1]，避免了程序崩溃。
• 配合空值合并运算符的完整逻辑：当matches为null导致matches?.[1]返回undefined时，??会将结果替换为空字符串''，确保函数始终返回符合类型声明的string值，不会出现undefined或null的情况。

如果去掉?.直接写matches[1]，只有在正则100%能匹配到结果的场景下才不会出错，但实际业务中输入的website字符串可能不含<title>标签，这时代码必然报错，所以?.是必要的安全防护。

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