仅在尝试获取记录 html 模板时才显示点 - TypeScript

在使用 TypeScript 进行开发时，有时我们需要在尝试获取记录 html 模板时，才显示一个点（loading 图标）。

这时我们可以使用 TypeScript 的条件类型来实现此功能。下面是一个简单的代码示例：

type LoadingType<T, K> = T extends Promise<infer R> ? Promise<R> & K : T;

function loadTemplate<T>(url: string): LoadingType<Promise<string>, {loading: boolean}> {
  console.log('fetching template...')
  return new Promise((resolve, reject) => {
    // simulate network delay
    setTimeout(() => {
      resolve(`<div>...</div>`);
    }, 2000);
  });
}

async function main(): Promise<void> {
  const template = await loadTemplate('http://example.com/template.html');
  console.log(template);
}

main();

这里我们定义了一个 LoadingType 类型，在类型 T 是 Promise<infer R> 的情况下，返回 Promise<R> & K，否则返回 T。

在 loadTemplate 函数中，我们返回的是一个 Promise<string> 类型的对象，同时也指定了一个可选的属性 loading，其值为布尔类型。

当我们调用 loadTemplate 函数时，我们会看到打印输出 fetching template...，然后等待 2 秒后，会输出 <div>...</div>。

在实际开发中，我们可以使用此方法显示一个点或加载动画，以指示用户等待时间。