为何函数体内变量隐式为any类型，外部作用域类型正常？

示例代码 #

const locationState = useLocation<navigationProps>().state || {};
// locationState 类型为 string | undefined

在外部作用域执行console.log(locationState)无类型错误，但在函数体内：

function doSomething() {
  console.log(locationState)
}

会提示：Variable 'locationState' implicitly has an 'any' type.

完整报错示例 #

useLocation来自React-Router：

export type navigationPropsWithPassedEvent = {
  type: "eventProps";
  processEvent?: boolean;
  eventId?: number;
};

export type navigationPropsWithAlert = {
  type: "alertProps";
  showNotice: boolean;
  noticetype: "success" | "error";
  message: string;
  description: string;
};

export type navigationPropsWithFormVal = {
  type: "formProps";
  roleName: string;
  accountNumber: string;
  setupMethod: SetupMethod;
};

export type navigationProps = navigationPropsWithAlert | navigationPropsWithPassedEvent | navigationPropsWithFormVal;


const ProcessingPage: React.FC<RouteProps> = () => {
   let noticetype, showNotice, message, description, processEvent, eventId, roleName, accountNumber;
   const locationState = useLocation<navigationProps>().state || {};


  if (locationState.type === "formProps") {
    ({ roleName, accountNumber } = locationState);
  }

  if (locationState.type === "alertProps") {
    ({ noticetype, showNotice, message, description } = locationState);
  }

  if (locationState.type === "eventProps") {
    ({ processEvent, eventId } = locationState);
  }
  
  console.log(processEvent)
  // 此处无类型错误

  function someFunc() {
    console.log(processEvent)
    // 此处报错：Variable 'processEvent' implicitly has an 'any' type.
  }
...

原因分析 #

1. 变量捕获的类型推断限制：内部函数someFunc捕获外部作用域的processEvent变量，但TypeScript无法确保该变量在内部函数执行时，仍保持外部通过类型守卫（if (locationState.type === "eventProps")）缩小后的类型。因为内部函数可能在类型守卫执行很久之后才被调用，变量类型存在变更可能性，TS只能将其推断为any。
2. 变量未显式声明类型：初始声明let processEvent时未指定类型，仅通过后续解构赋值赋予类型信息，这种隐式类型推断在跨函数作用域时会失效。

解决方案 #

1. 显式声明变量类型 #

在变量初始化时明确指定类型，让TS在所有作用域中都能识别变量类型：

// 为每个变量声明对应类型
let noticetype: "success" | "error" | undefined;
let showNotice: boolean | undefined;
let message: string | undefined;
let description: string | undefined;
let processEvent: boolean | undefined;
let eventId: number | undefined;
let roleName: string | undefined;
let accountNumber: string | undefined;

2. 将变量作为参数传入内部函数 #

把需要访问的变量作为参数传递给内部函数，避免依赖作用域捕获：

function someFunc(processEvent: boolean | undefined) {
  console.log(processEvent)
}
// 调用时传入变量
someFunc(processEvent);

3. 使用useRef保存变量 #

通过useRef存储变量，内部函数访问ref.current时能保留类型信息：

import { useRef } from 'react';

const ProcessingPage: React.FC<RouteProps> = () => {
  const processEventRef = useRef<boolean | undefined>(undefined);
  
  // ... 其他代码
  
  if (locationState.type === "eventProps") {
    processEventRef.current = locationState.processEvent;
  }
  
  function someFunc() {
    console.log(processEventRef.current)
    // 此处不会报错，类型为 boolean | undefined
  }
}

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