TypeScript联合类型变量报“赋值前使用”错误如何解决

TypeScript控制流分析检测到：style变量的所有赋值逻辑都包裹在try块内，一旦try块中字体加载、字体注册等任意步骤抛出异常，代码会进入catch块打印错误后，直接走到return style逻辑，此时style从未被赋值，存在返回undefined的风险，因此抛出Variable 'style' is used before being assigned错误。

另外原代码的返回值类型声明Promise<Object>也存在问题：style的类型是object | string联合类型，方法实际可能返回字符串，和声明的返回类型不匹配，修复时需要同步调整。

可根据业务场景选择以下任意一种方案：

• 方案1：声明变量时设置符合类型要求的初始默认值
  这是改造成本最低的方案，给style设置兜底初始值即可覆盖异常场景的未赋值问题：

  async myFunction(typography: Typography, valueOnly: Boolean): Promise<object | string> {
    // 初始值符合object | string的联合类型要求
    let style: object | string = '';
  
    try {
      const customFontName = `custom-font-${uuid.v1()}`;
      const customFontFace = new FontFace(customFontName, `url(${typography.custom_font})`);
      const loadedFace = await customFontFace.load();
      ((document as any).fonts as any).add(loadedFace);
  
      if (valueOnly) {
        style = customFontName;
      } else {
        style = {
          'font-family': customFontName
        };
      }
    } catch (err) {
      console.log(err);
    }
  
    return style;
  }
  

• 方案2：在catch分支补全赋值逻辑
  如果需要异常场景返回特定兜底值，可以在catch块中给style赋值，保证所有执行路径下变量都有明确值：

  async myFunction(typography: Typography, valueOnly: Boolean): Promise<object | string> {
    let style: object | string;
  
    try {
      const customFontName = `custom-font-${uuid.v1()}`;
      const customFontFace = new FontFace(customFontName, `url(${typography.custom_font})`);
      const loadedFace = await customFontFace.load();
      ((document as any).fonts as any).add(loadedFace);
  
      style = valueOnly 
        ? customFontName 
        : { 'font-family': customFontName };
    } catch (err) {
      console.log(err);
      // 异常场景赋值兜底
      style = valueOnly ? '' : {};
    }
  
    return style;
  }
  

• 方案3：调整返回逻辑位置，异常场景提前返回
  如果不需要异常场景执行后续统一返回逻辑，可以把正常流程的return放在try块内，catch块直接返回兜底值：

  async myFunction(typography: Typography, valueOnly: Boolean): Promise<object | string> {
    try {
      const customFontName = `custom-font-${uuid.v1()}`;
      const customFontFace = new FontFace(customFontName, `url(${typography.custom_font})`);
      const loadedFace = await customFontFace.load();
      ((document as any).fonts as any).add(loadedFace);
  
      const style: object | string = valueOnly 
        ? customFontName 
        : { 'font-family': customFontName };
      return style;
    } catch (err) {
      console.log(err);
      // 异常时直接返回兜底值
      return valueOnly ? '' : {};
    }
  }
  

注意：不推荐使用return style!非空断言绕过类型校验，这种方式仅会屏蔽TS的类型提示，不会解决运行时可能返回undefined的问题，容易埋下潜在bug。

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