如何修復 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,
}

這應該足夠了。