如何修复 TypeScript 接口错误？

Question

我有一个 TypeScript 问题。

我在 state 中设置了某个接口或空的 object 将到达那里。 我从这个state获取组件的信息。但是这个组件发誓state中不能有一个空的state因为接口。 请告诉我，如何配置才能使 TypeScript 不发誓并且错误消失。 谢谢！

const OneNews: FC<NewsObjectInterface> = ({image, title, createdAt, preview, description}) => {


    return (
        <>
            <Header/>
            <div className="single-blog one-news">
                <div className="single-blog-img">
                    <img src={image} alt={`Image for ${title}`}/>
                </div>
                <div className="blog-meta">
                 <span className="date-type">
                      <i className="bi bi-calendar"></i>{createdAt}
                 </span>
                </div>
                <div className="blog-text">
                    <h4>{title}</h4>
                    <p>{preview}</p>
                    <p>{description}</p>
                </div>
            </div>
            <Footer/>
        </>
    )
}

export default OneNews;



export interface NewsObjectInterface {
    createdAt: string,
    description: string,
    id: string,
    image: string,
    preview: string,
    title: string,
}






const [oneNewsData, setOneNewsData] = useState<NewsObjectInterface | {}>({});

<Route path="/one-news"
                   element={<OneNews title={oneNewsData.title} preview={oneNewsData.preview} image={oneNewsData.image} id={oneNewsData.id} createdAt={oneNewsData.createdAt} description={oneNewsData.description}/>}/>
        </Routes>

Answer 1

您已将 state 声明为以下类型：

NewsObjectInterface | {}

这意味着您要么拥有一个充满预期属性的 object，要么拥有一个空的 object。当您执行oneNewsData.title Typescript 时，强制该联合的双方都必须具有该属性。 空的 object 没有任何属性。

---

似乎在加载实际值时需要一个临时值。 在这种情况下，我建议您将 state 的类型更改为：

useState<NewsObjectInterface | null>(null);

现在默认值为null 。 稍后可能会在 state 中设置一个NewsObjectInterface 。

然后您只需在使用 state 值之前检查null ：

<Route path="/one-news"
  element={
    oneNewsData && <OneNews // check oneNewsData before use
      title={oneNewsData.title}
      preview={oneNewsData.preview}
      image={oneNewsData.image}
      id={oneNewsData.id}
      createdAt={oneNewsData.createdAt}
      description={oneNewsData.description}
    />
  }
/>

Answer 2

像这样更改您的界面（注意?符号）：

export interface NewsObjectInterface {
    createdAt?: string,
    description?: string,
    id?: string,
    image?: string,
    preview?: string,
    title?: string,
}

这应该足够了。