难以理解类型谓语在打字稿中的使用

Question

我是TypeScript的新手，读过关于类型缩小和类型守卫的文章。我看到了下面的代码，其中类型记录编译器显示了一个错误，作者使用类型谓词来解决它。例如，https://dev.to/smeijer/typescript-type-guards-and-type-predicates-4m5e，

type Article = {
  frontMatter: Record<string, unknown>;
  content: string;
}

type NotFound = { 
  notFound: true;
}

type Page = Article | NotFound;

function handleRequest(slug: string): string {
  const article = db.articles.findOne({ slug });
  const page = article ?? { notFound: true };
  return render(page);
}

function render(page: Page) {
  if (page.content) { -------> Typescript showing Error
    return page.content; -----> Typescript showing Error
  }

  return '404 — not found';
}

如您所见，在呈现函数中，类型记录编译器显示错误，说明

Property 'content' does not exist on type 'Page'.
  Property 'content' does not exist on type 'NotFound'

我的问题是，在if块中，我已经知道content作为page的一个属性存在，那么为什么它会显示错误，以及为什么使用谓词解决了如下问题。

function isArticle(page: Page): page is Article {
  return typeof (page as Article).content !== 'undefined';
}

function render(page: Page) {
  if (isArticle(page)) {
    return page.content;
  }

  return '404 — not found';
}

提前谢谢你的帮助。

Answer 1

if (page.content) { -------> Typescript showing Error

类型记录设置为不允许您访问属性，除非它们确实存在。所以，正如你所知道的，这一行是一个错误。

我的问题是，在if块中，我已经知道内容作为页面的属性存在，那么为什么它会显示错误，以及为什么使用谓词解决了如下问题。

你可能知道，但打字本不知道。当类型记录在第一行遇到错误时，它会中止任何试图缩小类型的逻辑。类型记录基本上是在等待您修复错误。在完成之前，类型记录不会缩小类型，这意味着page被视为Article | NotFound，因此访问page.content仍然是非法的。

您编写的自定义类型保护是修复错误的一种可能方法，但您也可以通过page.content操作符检查in是否存在而不访问它：

if ('content' in page) {