javascript - 当通过函数添加显式未定义检查时，为什么该对象可能在 typescript 中未定义？

Question

下面是一个小例子，我想问一下，为什么 typescript 的 eslinter 提示该对象，在这种情况下它可能是未定义的，实际上添加了未定义检查，只是它被提取到单独的函数，因此它得到了一个更有意义的名称。

import { ReactElement } from "react";
import "./styles.css";

interface Item {
  id?: string;
  images?: string[];
}

const itemHasImages = (item: Item): boolean =>
  item.images !== undefined && item.images.length > 0;

const renderItem = (item: Item): ReactElement => {
  if(itemHasImages(item)){ // <<< using this the compiler complains below in JSX that item could possibly be null
    // vs if(item.images !== undefined && item.images.length > 0) <<< here the compiler recognizes the check
    return (
      <>
        <img src={item.images[0]} alt={""} />
      </>
    );
  } else {
    return <></>
  }
};

export default function App() {
  const dummyItems = [
    {
      images: ["https://picsum.photos/200/300", "https://picsum.photos/200/300"]
    },
    {
      images: ["https://picsum.photos/200/300", "https://picsum.photos/200/300"]
    }
  ];

  if (itemHasImages(dummyItems[0])) {
    console.log("hello")
    renderItem(dummyItems[0]);
  } else {
    return <div>Hello</div>;
  }
  return <div>Hello</div>;
}

请为弱格式道歉，为了更好的交互，您可以在此处找到代码沙箱链接:
https://codesandbox.io/s/unruffled-bogdan-c74u6?file=/src/App.tsx

Answer 1

在您发布的代码中，Typescript 无法知道 boolean从您的函数返回的目的是作为 item 的类型保护。目的。
要解决此问题，您可以声明 type predicate作为函数的返回类型，指示 Typescript 应将返回的 bool 值解释为谓词的断言。您需要有一个描述 item 的类型/接口(interface)。需要images在谓词中使用的属性。
您可以通过扩展 Item 来显式执行此操作。接口(interface)和制作images所需的属性(property)。 ( sandbox , ts-playground )

interface Item {
  id?: string;
  images?: string[];
}

interface ItemWithImages extends Item {
  images: string[];
}

function itemHasImages(item: Item): item is ItemWithImages {
  return item.images !== undefined && item.images.length > 0;
}

const renderItem = (item: Item): ReactElement => {
  if (itemHasImages(item)) {
    // vs if(item.images !== undefined && item.images.length > 0) <<< here the compiler recognizes the check
    return (
      <>
        <img src={item.images[0]} alt={""} />
      </>
    );
  } else {
    return <></>;
  }
};

或者您可以实现 flagged duplicate 中描述的实用程序类型。它将可选属性转换为必需属性。 ( sandbox , ts-playground )

/**
 * @see https://stackoverflow.com/questions/52127082/ensure-existance-of-optional-property-in-typescript-interface
 */
 type MakeRequired<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>> &
 { [P in K]-?: Exclude<T[P], undefined> };

interface Item {
 id?: string;
 images?: string[];
}

function itemHasImages(item: Item): item is MakeRequired<Item, "images"> {
 return item.images !== undefined && item.images.length > 0;
}

const renderItem = (item: Item): ReactElement => {
 if (itemHasImages(item)) {
   // vs if(item.images !== undefined && item.images.length > 0) <<< here the compiler recognizes the check
   return (
     <>
       <img src={item.images[0]} alt={""} />
     </>
   );
 } else {
   return <></>;
 }
};