typescript 如何避免在react中的null检查条件之后被反结构化的对象的属性上出现键入错误?

knpiaxh1  于 2023-01-21  发布在  TypeScript
关注(0)|答案(1)|浏览(106)

在文件吹我得到以下打字错误的结构化标题:

  • “类型”File“上不存在属性”title|未定义'. ts(2339)'*

我怎样才能避免这个错误被显示出来呢?我已经在重构之前提前检查了fileData,所以这将检查它是否未定义。在我看来,这个错误不应该在这种情况下抛出。

export interface File {
  title: string;
  author: string;
}

export interface IFileDetailsInfoProps {
  fileData?: File;
}

const FileDetails = ({ fileData }: IFileDetailsInfoProps) => {
  if (!fileData) {
    <p>No file data</p>;
  }

  const { title, author } = fileData;

  const renderValue = (value: any) => {
    if (!value) {
      return '-';
    }
    return value;
  };

  return (
    <>
      <label>Title</label>
      <p>{renderValue(title)}</p>

      <label>Author</label>
      <p>{renderValue(author)}</p>
    </>
  );
};

export default FileDetails;
lmvvr0a8

lmvvr0a81#

您需要返回类型检查:

if (!fileData) {
  <p>No file data</p>;
}

相关问题