使用Create React App TypeScript模板解构对象时出现TypeScript错误

我使用Create React App的TypeScript模板创建了React应用，编写了一个简单的卡片组件，但在对对象进行解构操作时触发了TypeScript错误，错误提示为：Property 'title' does not exist on type '{}'（根据截图内容整理）。

以下是我的tsconfig.json配置：

{
  "compilerOptions": {
    "target":"ES2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module":"ES2020",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules"]
}

解决方案 #

问题核心是你未给解构对象指定明确类型，TypeScript默认将其推断为{}空对象类型，因此无法识别对象属性。

• 给组件Props定义接口（推荐）
  如果是组件接收的props需要解构，先定义对应类型接口：

  interface CardProps {
    title: string;
    content: string;
    // 添加组件需要的其他属性
  }
  
  const Card = ({ title, content }: CardProps) => {
    return (
      <div className="card">
        <h3>{title}</h3>
        <p>{content}</p>
      </div>
    );
  };
  

• 直接给局部解构对象指定类型
  若为局部变量解构，直接给对象添加类型注解：

  interface Item {
    title: string;
    id: number;
  }
  
  const item: Item = { title: "示例标题", id: 1 };
  const { title, id } = item;
  

• 临时使用类型断言（不推荐）
  若需临时绕过类型检查，可使用类型断言，但不建议长期依赖：

  const { title } = someObject as { title: string };
  

开启strict模式后TypeScript类型检查会更严格，这能帮你提前发现潜在错误，因此优先选择明确定义类型的方案，而非绕过检查。

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