Reactjs 获取React并发承诺包装器以继承返回的接口对象

我在React中尝试并发模式和暂挂，当我试图将一些模拟数据从父组件钻取到子组件时，得到了一个类型错误，因为我的promise包装器本身并不知道要读取的类型。我收到的错误消息是：

TS2739:类型{data:any；}在中缺少以下属性 键入“MockData”：标题、名称、地址、城市

既然我想将此承诺包装器用于可能返回其他接口的其他回迁，那么如何让我的承诺包装器知道返回到它的类型，而不显式地说

export const promiseWrapper=（承诺：承诺）：promiseWrapper=>{…

sampleComponent.tsx:

import * as React from 'react';
import api, { MockData } from 'api/api';

const resource = api.getMockData();

const SampleComponent: React.FC = () => {
  const mockData = resource.mockData.read();
  return (
    <ChildComponent mockData={mockData} /> // type error received here
  );
};

interface ChildProps {
  mockData: MockData;
}

const ChildComponent: React.FC<ChildProps> = ({ mockData }) => (
  <div>
    <h1>{mockData.title}</h1>
    <h1>{mockData.name}</h1>
    <h1>{mockData.address}</h1>
    <h1>{mockData.city}</h1>
  </div>
);

import { PromiseWrapper, promiseWrapper } from './promiseWrapper';

export interface Resource {
  [key: string]: PromiseWrapper;
}

export interface MockData {
  title: string;
  name: string;
  address: string;
  city: string;
}

const mockData = {
  title: 'this is a title',
  name: 'John Smith',
  address: '102 Street',
  city: 'Pittsburgh',
};

const mockDataPromise = (): Promise<{ data: MockData }> => new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      data: mockData,
    });
  }, 1000);
});

const getMockData = (): Resource => {
  const getMockDataPromise = mockDataPromise();
  return {
    mockData: promiseWrapper(getMockDataPromise),
  };
};

export default {
  getMockData,
};

export interface PromiseWrapper {
  read(): {
    data: any;
  };
}

export const promiseWrapper = (promise: Promise<any>): PromiseWrapper => {
  let status = 'pending';
  let result: object;
  const suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    },
  );
  return {
    // @ts-ignore
    // eslint-disable-next-line consistent-return
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
};

import*as React from'React'；
从“api/api”导入api，{MockData}；
const resource=api.getMockData（）；
常量SampleComponent:React.FC=（）=>{
const mockData=resource.mockData.read（）；
返回(
//此处收到类型错误
);
};
界面小道具{
mockData：mockData；
}
const ChildComponent:React.FC=（{mockData}）=>(
{mockData.title}
{mockData.name}
{mockData.address}
{mockData.city}
);

api.ts:

import * as React from 'react';
import api, { MockData } from 'api/api';

const resource = api.getMockData();

const SampleComponent: React.FC = () => {
  const mockData = resource.mockData.read();
  return (
    <ChildComponent mockData={mockData} /> // type error received here
  );
};

interface ChildProps {
  mockData: MockData;
}

const ChildComponent: React.FC<ChildProps> = ({ mockData }) => (
  <div>
    <h1>{mockData.title}</h1>
    <h1>{mockData.name}</h1>
    <h1>{mockData.address}</h1>
    <h1>{mockData.city}</h1>
  </div>
);

import { PromiseWrapper, promiseWrapper } from './promiseWrapper';

export interface Resource {
  [key: string]: PromiseWrapper;
}

export interface MockData {
  title: string;
  name: string;
  address: string;
  city: string;
}

const mockData = {
  title: 'this is a title',
  name: 'John Smith',
  address: '102 Street',
  city: 'Pittsburgh',
};

const mockDataPromise = (): Promise<{ data: MockData }> => new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      data: mockData,
    });
  }, 1000);
});

const getMockData = (): Resource => {
  const getMockDataPromise = mockDataPromise();
  return {
    mockData: promiseWrapper(getMockDataPromise),
  };
};

export default {
  getMockData,
};

export interface PromiseWrapper {
  read(): {
    data: any;
  };
}

export const promiseWrapper = (promise: Promise<any>): PromiseWrapper => {
  let status = 'pending';
  let result: object;
  const suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    },
  );
  return {
    // @ts-ignore
    // eslint-disable-next-line consistent-return
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
};

从“/PromiseWrapper”导入{PromiseWrapper，PromiseWrapper}；
导出接口资源{
[键：字符串]：PromiseWrapper；
}
导出接口数据{
标题：字符串；
名称：字符串；
地址：字符串；
城市：字符串；
}
常数mockData={
标题：“这是一个标题”，
姓名：“约翰·史密斯”，
地址:"102街",，
城市：“匹兹堡”，
};
const mockDataPromise=（）：Promise=>newpromise（（解析）=>{
设置超时（（）=>{
决心({
数据：模拟数据，
});
}, 1000);
});
const getMockData=（）：Resource=>{
const getMockDataPromise=mockDataPromise（）；
返回{
mockData:promiseWrapper（getMockDataPromise），
};
};
导出默认值{
getMockData，
};

promiseWrapper.ts:

import * as React from 'react';
import api, { MockData } from 'api/api';

const resource = api.getMockData();

const SampleComponent: React.FC = () => {
  const mockData = resource.mockData.read();
  return (
    <ChildComponent mockData={mockData} /> // type error received here
  );
};

interface ChildProps {
  mockData: MockData;
}

const ChildComponent: React.FC<ChildProps> = ({ mockData }) => (
  <div>
    <h1>{mockData.title}</h1>
    <h1>{mockData.name}</h1>
    <h1>{mockData.address}</h1>
    <h1>{mockData.city}</h1>
  </div>
);

import { PromiseWrapper, promiseWrapper } from './promiseWrapper';

export interface Resource {
  [key: string]: PromiseWrapper;
}

export interface MockData {
  title: string;
  name: string;
  address: string;
  city: string;
}

const mockData = {
  title: 'this is a title',
  name: 'John Smith',
  address: '102 Street',
  city: 'Pittsburgh',
};

const mockDataPromise = (): Promise<{ data: MockData }> => new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      data: mockData,
    });
  }, 1000);
});

const getMockData = (): Resource => {
  const getMockDataPromise = mockDataPromise();
  return {
    mockData: promiseWrapper(getMockDataPromise),
  };
};

export default {
  getMockData,
};

export interface PromiseWrapper {
  read(): {
    data: any;
  };
}

export const promiseWrapper = (promise: Promise<any>): PromiseWrapper => {
  let status = 'pending';
  let result: object;
  const suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    },
  );
  return {
    // @ts-ignore
    // eslint-disable-next-line consistent-return
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
};

导出接口PromiseWrapper{
read（）：{
资料：有；
};
}
导出常量promiseWrapper=（承诺：承诺）：promiseWrapper=>{
let status='pending'；
让结果：对象；
const吊杆=承诺(
（r） =>{
状态=‘成功’；
结果=r；
},
（e） =>{
状态='错误'；
结果=e；
},
);
返回{
//@ts忽略
//eslint禁用下一行一致返回
读（）{
如果（状态=='pending'）{
吊杆；
}否则如果（状态=='error'）{
投掷成绩；
}否则如果（状态==‘成功’）{
返回结果；
}
},
};
};

导出接口PromiseWrapper{
read（）：{data:T}
}
导出函数promiseWrapper（promise:promise）：promiseWrapper{
let status='pending'
let结果：{data:T}
/*函数的其余部分保持不变*/
}