带有 TypeScript 的 Watermelondb

Question

我正在构建一个 React 应用程序，我希望将 Watermelondb 用于离线存储，但我不知道如何将它与 TypeScript 一起使用。我已经从 Watermelondb 库创建了数据库以及我的课程和课程模型文件。在我的 App.tsx 中，我使用了如下数据库提供程序：

import 'react-native-gesture-handler';
import React from 'react';
import { View, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import DatabaseProvider from '@nozbe/watermelondb/DatabaseProvider';

import database from './database/index.js';

import AppProvider from './hooks';

import Routes from './routes';

const App: React.FC = () => (
  <NavigationContainer>
    <StatusBar barStyle="light-content" backgroundColor="#6548A3" translucent />
    <DatabaseProvider database={database}>
      <AppProvider>
      <View style={{ flex: 1, backgroundColor: '#6548A3' }}>
        <Routes />
      </View>
    </AppProvider>
    </DatabaseProvider>
  </NavigationContainer>
);

export default App;

然后我的功能组件中出现 Typescript 错误：

import React from 'react';
import { View } from 'react-native';
const Dashboard: React.FC = ({courses, lessons}) => {
return (
    <View>
    </View>
  );
}

在课程和课程中，我收到以下错误：

类型 '{ children?: ReactNode; 上不存在属性}'

如何使用 TypeScript 来解决这些错误？

Answer 1

React.FC 是一个依赖于 props 的泛型。键 courses 和 lessons 必须存在于您的道具类型中才能解构它们。当不设置泛型而只使用React.FC 时，这意味着该组件不使用任何道具。

你想要这样的东西：

interface DashboardProps {
  courses: Course[]; // an array of some Course type that you need to define
  lessons: Lesson[]; // same for lessons
}

const Dashboard: React.FC<DashboardProps> = ({courses, lessons}) => {
return (
    <View>
    </View>
  );
}