TypeScript未识别变量undefined类型，传递函数无报错问题咨询

核心问题原因 #

1. 数组索引访问的类型推断规则：TypeScript 默认不会将数组索引越界的情况纳入类型推断，只要索引是数字类型，就会直接返回数组元素的类型（这里是string），不会自动追加undefined。它无法在编译时确定索引是否合法，所以做了宽松处理。
2. 可选链的误用：你写的split('-')?.[index]里，?.完全多余——因为string.split()方法永远返回数组，不可能是undefined，所以可选链并没有处理索引越界的情况。
3. 代码笔误影响：你的函数参数srcPattern标注为string[]，但数组并没有split方法，这明显是笔误，应该是string类型。假设修正这个错误后，split('-')返回string[]，但 TypeScript 依然不会把索引访问的结果推断为string | undefined。

解决办法 #

1. 手动校验索引合法性 #

先判断索引是否在数组范围内，明确赋值undefined，让 TypeScript 识别到类型：

const fn = (srcPattern: string, index: number) => {
  const splitArr = srcPattern.split('-');
  const rawSrcPattern: string | undefined = index >= 0 && index < splitArr.length ? splitArr[index] : undefined;

  const formatAdvancedMethodsPatternToUi = (rawSrcPattern: string) => {
    // 函数逻辑
  };

  // 必须处理 undefined 才能调用函数
  if (rawSrcPattern) {
    const formattedSrcPattern = formatAdvancedMethodsPatternToUi(rawSrcPattern);
    // 后续逻辑
  } else {
    // 处理索引越界的异常情况
  }
};

2. 使用Array.at()方法（推荐） #

ES2022 新增的at()方法会在索引越界时返回undefined，TypeScript 能自动推断其返回类型为string | undefined：

const fn = (srcPattern: string, index: number) => {
  const rawSrcPattern = srcPattern.split('-').at(index); // 类型自动推断为 string | undefined

  const formatAdvancedMethodsPatternToUi = (rawSrcPattern: string) => {
    // 函数逻辑
  };

  // 这里会直接触发 TypeScript 错误，提示 rawSrcPattern 可能为 undefined
  // const formattedSrcPattern = formatAdvancedMethodsPatternToUi(rawSrcPattern);

  // 正确写法：先校验
  if (rawSrcPattern) {
    const formattedSrcPattern = formatAdvancedMethodsPatternToUi(rawSrcPattern);
  }
};

3. 开启严格索引检查 #

在tsconfig.json中启用noUncheckedIndexedAccess配置，强制 TypeScript 将所有数组索引访问的结果推断为元素类型 | undefined：

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true,
    // 其他编译配置
  }
}

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