TypeScript中如何正确解构useState中的ITopic类型对象？

先明确你的错误原因：

1. Property 'title' does not exist on type 'ITopic | undefined'：调用useState<ITopic>()时未提供初始值，导致状态类型为ITopic | undefined，直接解构对象属性时，TypeScript会提示你可能从undefined上读取属性。
2. Tuple type '[ITopic | undefined, Dispatch<SetStateAction<ITopic | undefined>>]' of length '2' has no element at index '2'：你把类型标注ITopic放在了解构对象的后面，导致TypeScript对元组结构的解析出现偏差，正确的类型指定方式是通过useState的泛型参数，而非解构对象的标注。

以下是几种可行的解决方案：

方案1：提供符合接口的初始值（最安全） #

由于ITopic中title是必填项，初始化时传入一个完整符合接口的对象，此时状态类型会被推断为ITopic，解构可直接生效：

import { useState } from 'react';
import { ITopic } from './your-path';

const [{ title, text, posts }, setTopic] = useState<ITopic>({
  title: '', // 必填属性必须初始化
  text: '',
  posts: []
});

方案2：处理undefined状态（适合无需初始值的场景） #

如果不需要一开始就提供完整初始值，可以先拿到状态变量，再通过兜底值处理属性的undefined情况：

import { useState } from 'react';
import { ITopic } from './your-path';

const [topic, setTopic] = useState<ITopic>();
// 用空对象兜底，给可选属性设置默认值
const { title = '', text = '', posts = [] } = topic ?? {};

也可以用类型守卫确保状态存在后再解构：

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

if (topic) {
  // 此处TypeScript会自动推断topic为ITopic类型，可安全解构
  const { title, text, posts } = topic;
  // 在这里使用属性
}

方案3：非空断言（谨慎使用） #

如果你能确保状态在使用前一定会被赋值，可以用非空断言!跳过TypeScript的undefined检查，但注意这会放弃类型安全，运行时若状态仍为undefined会报错：

const [topic, setTopic] = useState<ITopic>();
// 断言状态不为undefined后解构
const { title, text, posts } = topic!;

内容的提问来源于stack exchange，提问作者Galivan