TypeScript中等待art.title加载完成后执行去空格操作报错如何解决

• 类型定义不匹配：你定义的Art接口中title声明为必填字符串，但实际首次加载时art.title运行时为undefined，类型定义和实际运行值不符，会触发TS静态检查报错和运行时异常。
• 异步逻辑同步取值错误：setTimeout是异步API，首次调用titleNoWhiteSpace时如果art.title未加载完成，函数进入else分支但没有返回值，因此初始的titleString拿到的是undefined，后续轮询的返回值不会同步赋值给初始声明的titleString变量。

第一步：修正Art接口定义 #

先把title的类型和实际运行情况对齐：

export interface Art {
  uri: string | undefined;
  mint: string | undefined;
  link: string;
  title?: string; // 改为可选类型，或者显式声明为 title: string | undefined
  artist: string;
  seller_fee_basis_points?: number;
  creators?: Artist[];
  type: ArtType;
  edition?: number;
  supply?: number;
  maxSupply?: number;
}

第二步：将轮询函数改造为返回Promise的异步函数 #

用Promise包裹轮询逻辑，等art.title加载完成后再返回结果：

function getTitleNoWhiteSpace(): Promise<string> {
  return new Promise((resolve) => {
    const check = () => {
      if (art.title) {
        const tempTitle = art.title.replace(/\s+/g, '');
        resolve(tempTitle);
      } else {
        setTimeout(check, 300);
      }
    }
    check();
  })
}

第三步：异步方式取值使用 #

因为结果是异步返回的，需要用async/await或者.then的方式获取值后再执行业务逻辑：

// 方式1：async/await（推荐）
async function yourBusinessLogic() {
  const titleString = await getTitleNoWhiteSpace();
  // 所有需要用到titleString的逻辑都写在这里，此时titleString肯定为string类型，不会存在undefined问题
}

// 方式2：.then回调
getTitleNoWhiteSpace().then(titleString => {
  // 此处编写使用titleString的逻辑
})

如果你使用React/Vue这类带响应式状态的框架，不需要用轮询，直接监听art的变化即可，性能更好：

• React：把art作为useEffect的依赖项，art.title存在时再执行去空格逻辑
• Vue：用watch监听art.title，有值时触发业务逻辑

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