useState：解构嵌套的 object 和 typescript

Question

I'm trying to destructure an object in useState so I can directly use the properties. But I am not sure about the correct syntax to use with typescript.

Here is the interface for "topic":

export interface ITopic{
    title: string
    text?: string
    posts?: string[]
}

Without destructuring it would look like:

const [topic, setTopic] = useState<ITopic>()

To destructure, I have tried a few things,for instance this doesn't work:

const [{title, text, posts}: ITopic, setTopic] = useState<ITopic>();

It says (if I hover over title and setTopic):

• Property 'title' does not exist on type 'ITopic | undefined'
• Tuple type '[ITopic | undefined, Dispatch<SetStateAction<ITopic | undefined>>]' of length '2' has no element at index '2'.

Answer 1

Use an initial value. Because you don't have an initial value, it detects on the first render that this cannot be destructured.

export interface ITopic{
    title: string
    text?: string
    posts?: string[]
}

const [{title, text, posts}, setTopic] = useState<ITopic>({
    posts: [],
    text: '',
    title: ''
});

Answer 2

The second approach is to add a check in the forms of loading data:

const [topic, setTopic] = useState<ITopic | undefined>() 
// explicitly define the type as "undefined", which is unnecessary, but a good indicator

if(!topic) return <div>loading</div>;

const {title, text, posts} = topic; // then you can safely destructure the object