TypeScript React Native类型不兼容求助：TaskListProps[]无法赋值

核心问题 #

你的类型定义存在两处关键错误：

1. TaskListProps中tasks使用了元组语法[]，TypeScript会把它识别为固定长度为1的数组，而非可容纳多个任务的普通数组。
2. 主组件中把state类型设为TaskListProps[]，这表示你声明了一个TaskListProps对象的数组，但TaskList组件接收的是单个TaskListProps对象，且tasks的类型完全不匹配。

修正步骤 #

1. 重构类型定义

先单独定义Task接口，再让TaskListProps的tasks字段指向这个接口的数组类型：

// @/types/TaskListProps.ts
export interface Task {
  list_id: string;
  title: string;
  description: string;
  status: string;
  deleted: boolean;
  deleted_at: string;
  created_at: string;
  updated_at: string;
}

export default interface TaskListProps {
  tasks: Task[]; // 普通数组类型，而非固定长度的元组
}

2. 修正TaskList组件（无需大改，类型会自动匹配）

import React from 'react';
import { FlatList, Text } from 'react-native';
import TaskListProps from '@/types/TaskListProps';

const TaskList: React.FC<TaskListProps> = ({ tasks }) => {
  return (
    <FlatList
      data={tasks}
      keyExtractor={(item) => item.list_id}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
};

export default TaskList;

3. 修正主组件的state类型

主组件中从API获取的任务列表是Task类型的数组，所以state类型应该设为Task[]，而非TaskListProps[]：

// App.tsx
import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import TaskList from './TaskList';
import { Task } from '@/types/TaskListProps';

const App = () => {
  const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    // 模拟API请求
    const fetchTasks = async () => {
      const res = await fetch('你的API地址');
      const data = await res.json();
      setTasks(data); // 假设返回的是Task[]格式的数据
    };
    fetchTasks();
  }, []);

  return (
    <View>
      {/* 直接传递tasks数组，符合TaskListProps的要求 */}
      <TaskList tasks={tasks} />
    </View>
  );
};

export default App;

为什么之前的封装尝试没用？ #

你之前尝试把state封装到数组里，本质是传递了Task[][]（二维数组），但TaskList需要的是Task[]类型的tasks属性，完全不符合类型要求，所以错误依然存在。

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