How to fix error with TypeScript interface?

Question

I have a TypeScript question.

I set in state that either a certain interface or an empty object will get there. I take information for the component from this state. But this component swears that there cannot be an empty object in the state because of the interface. Tell me, please, how to configure so that TypeScript does not swear and the error disappears. Thanks!

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

You have declared your state to be of type:

NewsObjectInterface | {}

Which means you either have an object full of your expected properties, or you have an empty object. And when you do oneNewsData.title Typescript enforces that both sides of that union must have that property. And an empty object has no properties.

---

It seems like you need a temporary value while the real value loads. In this case I would recommend you change the type of your state to:

useState<NewsObjectInterface | null>(null);

Now the default value is null . Something else may set a NewsObjectInterface in state later.

And then you simply check for null before you use the state value:

<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

Change your interface like this (mind the ? symbol):

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

This should be enough.