如何为延迟赋值的变量正确标注TypeScript类型（无需非空断言）

一、简化示例的解决方案 #

你的简化代码中，TypeScript无法追踪到doStuff函数对外部变量x的赋值操作，因此会认为返回的x仍可能为null。可以用以下两种方式解决：

方案1：直接在分支中赋值（避免间接函数修改） #

去掉中间函数，直接在if/else分支里给x赋值，TypeScript的控制流分析能直接识别x已被完全赋值：

function example(): number {
  let x: number; // 仅声明类型，不初始化（后续必定赋值）

  if(Math.random() > 0.5) {
    x = 1;
  } else {
    x = 2;
  }

  return x;
}

方案2：使用断言函数（保留函数逻辑） #

给doStuff添加断言类型，明确告诉TypeScript：调用该函数后，x的类型不再包含null：

function example(): number {
  let x: null | number = null;

  // 断言函数：调用后x必定为number类型
  function doStuff(n: number): asserts x is number {
    x = n;
  } 

  if(Math.random() > 0.5) {
    doStuff(1);
  } else {
    doStuff(2);
  }

  return x;
}

二、真实业务场景的解决方案 #

在你的Vue业务代码中，fetchCtrl.value虽然必定会被doFetch赋值（无论是直接调用还是watchEffect的立即执行），但TypeScript无法识别watchEffect的立即执行特性，因此需要通过断言函数来修正类型判断：

export function useElection(
    id: string | Ref<string>,
): {
   loading: Ref<boolean>, 
   error: Ref<any>,
   election: ComputedRef<Election>,
} {
    const fetchCtrl = ref<ReturnType<FetchElection> | null>(null);

    const store = useElectionsStore();
    const election: ComputedRef<Election> = computed(
        () => store.electionById(unref(id))
    );

    // 断言函数：调用后fetchCtrl.value必定为FetchElection的返回类型
    function doFetch(): asserts fetchCtrl.value is ReturnType<FetchElection> {
        fetchCtrl.value = (store.fetchElection as FetchElection)(unref(id), includingCandidates, autoUpdateInterval);
    }

    if (isRef(id)) {
        watchEffect(doFetch); // watchEffect会立即执行一次doFetch
    } else {
        doFetch();
    }

    // 此时TypeScript已确认fetchCtrl.value不为null，无需非空断言
    return {...fetchCtrl.value, election };
}

补充说明 #

• 断言函数是TypeScript 3.7+支持的特性，能在不破坏原有代码结构的前提下，让类型系统准确识别变量的类型变化。
• 如果你确定fetchCtrl.value在返回前100%被赋值，也可以用类型断言fetchCtrl.value as ReturnType<FetchElection>，但断言函数的方式更安全，因为它会强制约束doFetch的行为（如果后续修改doFetch导致未赋值，TypeScript会报错）。

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