使用 Typescript 实现强类型 Rest 客户端

Question

我有这个界面：

export interface WorkoutLibrary {
"/Workout": {
    get: (
        input?: GetWorkoutListOptions
    ) => Promise<GetWorkoutList200Response | ErrorResponse>;
    post: (
        input: CreateWorkoutOptions
    ) => Promise<CreateWorkout201Response | ErrorResponse>;
    put: (
        input: UpdateWorkoutOptions
    ) => Promise<UpdateWorkout200Response | ErrorResponse>;
};
"/workout/{workoutId}": {
    get: (
        input?: GetWorkout200Response
    ) => Promise<GetWorkout200Response | ErrorResponse>;
    delete: (
        input?: DeleteWorkoutOptions
    ) => Promise<DeleteWorkout200Response | ErrorResponse>;
}

}

问题是我不知道如何实现它来实际调用我的 API。 有人可以提供一个示例，说明如何在类中实际实现此功能，以便使用 Axios 来进行 API 调用吗？

我可能在这里遗漏了一些关键的 Typescript 概念，但我对它有点陌生。
如果有人能指出我正确的方向，我将非常感激。

Answer 1

要实现此类型，您只需创建一个与这些属性和函数类型匹配的对象即可：

为了简单起见，让我们关注一个：

export interface WorkoutLibrary {
  "/Workout": {
    get: (input?: GetWorkoutListOptions) =>
      Promise<GetWorkoutList200Response | ErrorResponse>;
  }
}

现在你的问题缺少某些类型，所以假设这些都是谎言：

type ErrorResponse = { error: string }

type GetWorkoutListOptions = { type: 'arms' | 'legs' | 'core' }
type GetWorkoutList200Response = { name: string }[]

现在你可以像这样实现：

const workoutLibrary: WorkoutLibrary = {
  '/Workout': {
    get: async (input) => {
      const response = await fetch(
        `http://example.com/Workout?type=${input?.type ?? 'all'}`
      )
      
      try {
        const json = await response.json()
        return json
      } catch (error) {
        return { error }
      }
    }
  }
}

这将创建一个与

WorkoutLibrary

类型及其功能相匹配的对象。它使用

fetch()

来获取 URL，并在该 URL 中使用输入。如果发生错误，它会返回

ErrorReponse

形状的内容。

然后你可以像这样调用这个函数：

await workoutLibrary['/Workout'].get({ type: 'core' })

看游乐场

---

注意，有很多方法可以实现这一点，并且您可以使用许多库。该代码仅应被视为示例和起点。