typescript - react-admin dataProvider 类型扩展

Question

我正在为 react-admin 实现自定义 dataProvider。因为我们有许多数据类型，所以我想为不同的文件提供单独的资源提供程序。

但是，我在 transactionProvider 实现上遇到打字稿错误。

Type '(params: GetListParams) => Promise<{ data: Transaction[]; total: number; }>' is not assignable to type '<RecordType extends Record = Record>(params: GetListParams) => Promise<GetListResult<RecordType>>'.
  Type 'Promise<{ data: Transaction[]; total: number; }>' is not assignable to type 'Promise<GetListResult<RecordType>>'.
    Type '{ data: Transaction[]; total: number; }' is not assignable to type 'GetListResult<RecordType>'.
      Types of property 'data' are incompatible.
        Type 'Transaction[]' is not assignable to type 'RecordType[]'.
          Type 'Transaction' is not assignable to type 'RecordType'.
            'Transaction' is assignable to the constraint of type 'RecordType', but 'RecordType' could be instantiated with a different subtype of constraint 'Record'.

这是dataProvider.ts

import { ResouceProvider } from './resourceProvider';
import transactionProvider from './transactionProvider';

const providers: { [key: string]: ResouceProvider } = {
  transactions: transactionProvider,
};

const dataProvider: DataProvider = {
  getList: (resource: string, params: GetListParams) => {
    return providers[resource].getList(params);
  },

 ...
};

export default dataProvider;

资源提供者接口

export type ResouceProvider = {
  getList: <RecordType extends Record = Record>(
    params: GetListParams
  ) => Promise<GetListResult<RecordType>>;
...
};

TransactionProvider 实现

import { Transaction } from 'types';
import { ResouceProvider } from './resourceProvider';

const transactionProvider: ResouceProvider = {
  getList: async (params: GetListParams) => {
    const { start, end } = params.filter;
    const res = await fetchTransactions(start, end);
    const result = [];
    for (let item of res.data.data) {
      const transaction: Transaction = item.data;
      transaction.id = item.id;
      result.push(transaction);
    }

    return { data: result, total: result.length };
  },
...
};

export default transactionProvider;

标签： typescriptreact-admin

Answer 1

在 Github 上发布问题 https://github.com/marmelab/react-admin/issues/6739

我已经更新ResourceProvider为现在返回任何类型

export type ResouceProvider = {
  getList: (params: GetListParams) => Promise<GetListResult<any>>;