TypeScript回调内赋值后变量类型错误推断问题求助

问题原因 #

TypeScript的控制流分析无法追踪到HTMLRewriter回调函数内部对全局变量title的修改。在TypeScript看来，title始终保持初始的null状态，因此当你写if (title !== null)时，它会认为这个条件永远不会成立，导致条件块内的title被推断为never类型。

解决方案 #

方案1：使用局部变量收集结果后赋值 #

将文本收集逻辑放在局部变量中，最后再赋值给title，让TypeScript能清晰跟踪类型变化：

let title: string | null = null;

const response = await fetch("https://example.com");

let collectedTitle = "";
const newResponse = await new HTMLRewriter()
  .on("#title", {
    text({ text }) {
      collectedTitle += text;
    },
  })
  .transform(response);

await newResponse.arrayBuffer();

title = collectedTitle || null;
if (title !== null) {
  title = title.trim();
}

export {};

方案2：使用包装对象绕过控制流分析限制 #

用对象包裹title，因为对象是引用类型，TypeScript能跟踪到对象属性的类型变化：

const titleWrapper = { value: null as string | null };

const response = await fetch("https://example.com");

const newResponse = await new HTMLRewriter()
  .on("#title", {
    text({ text }) {
      titleWrapper.value ??= "";
      titleWrapper.value += text;
    },
  })
  .transform(response);

await newResponse.arrayBuffer();

if (titleWrapper.value !== null) {
  titleWrapper.value = titleWrapper.value.trim();
}

export {};

方案3：显式类型断言（仅必要时使用） #

如果能确定条件块内title一定是string类型，可以用类型断言强制指定：

let title: string | null = null;

const response = await fetch("https://example.com");

const newResponse = await new HTMLRewriter()
  .on("#title", {
    text({ text }) {
      title ??= "";
      title += text;
    },
  })
  .transform(response);

await newResponse.arrayBuffer();

if (title !== null) {
  title = (title as string).trim();
}

export {};

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