动态实现接口内接口 TS

Question

我有这个打字稿界面，它作为我的 React 应用程序中 api 调用的通用结构。

export interface ICommonApiState {
    loading: boolean;
    data: any;
    serverError: string;
}

正如您所看到的，数据类型是any，但我希望该类型是动态的，因为我将在多个地方使用相同的接口，但我不想每次使用它时都创建一个新接口，那么，我如何根据我的需要将类型传递给数据？

例如，如果我对此服务器进行 api 调用，该调用将为我提供一组用户名，那么我如何使用相同的接口将该类型传递给数据？喜欢..

const [userNames, setUserNames] = useState<ICommonApiState<IUserNames>>(
{
 loading: false,
 serverError: '',
 data: [] -> **This receives inferred types from IUserNames**
}
)

Answer 1

一种解决方案是使其通用，如下所示：

export interface ICommonApiState<T> {
    loading: boolean;
    data: T;
    serverError: string;
}

这样您就可以控制在您正在使用的各个组件中推断出的内容。

您的代码中已经有该示例用法：ICommonApiState<IUserNames>