Modern Frontend Development's Secret Weapon: Aspida for Simple and Type-safe API Calls
Tags: javascript, typescript, aspida, beginners
Published: 2023-08-02 06:02:52



In this article, I'm going to introduce you to Aspida, a fantastic library for making API calls efficient and type-safe in frontend development using TypeScript.

## Table of Contents
1. [What is Aspida?](#what-is-aspida)
2. [Benefits of Aspida](#benefits-of-aspida)
3. [Installing Aspida](#installing-aspida)
4. [Defining API Endpoints](#defining-api-endpoints)
5. [Generating HTTP Client Code](#generating-http-client-code)
6. [Using the Generated HTTP Client](#using-the-generated-http-client)
7. [Conclusion](#conclusion)

## What is Aspida?

Aspida is a HTTP client generation library for TypeScript, mainly making API calls easier and more secure in frontend development.

## Benefits of Aspida

Here are the main features and benefits of Aspida:

1. **Type Safety**: Aspida is strongly supported by TypeScript, ensuring that the API response matches the expected type. This is useful for knowing the shape of data returned from the API in advance, making it easier to catch errors when unexpected data is returned.
2. **Automatic Code Generation**: Aspida automatically generates HTTP client code from the definition of API endpoints. This eliminates the need to write API call code manually, ensuring consistency and reliability.
3. **Flexibility and Compatibility**: Aspida is compatible with various HTTP client libraries such as axios and fetch. This allows you to easily integrate Aspida into existing projects.
4. **Development Efficiency**: As response type definitions and endpoint generation are automated, developers can focus on implementing APIs and business logic. Also, even if there are changes to the API, you can use Aspida to automatically generate new type definitions and endpoints.

## Installing Aspida

To install Aspida, you first need to set up the project. Make sure Node.js and npm are installed. Then, install Aspida by running the following command:

```
npm install @aspida/node-fetch aspida
```

Here we use `node-fetch` as the HTTP client library. If you want to use `axios`, you can install `@aspida/axios` instead.

## Defining API Endpoints

Aspida generates HTTP client code from the definition of API endpoints. Define the API endpoints in a directory structure like this:

```
/api
  /users
    index.ts
    /$userId.ts
```

For example, you can write the following code in `index.ts`:

```typescript
// /api/users/index.ts

type Methods = {
  get: {
    resBody: {
      id: number
      name: string
    }[]
  }
  post: {
    reqBody: {
      name: string
    }
    resBody: {
      id: number
    }
  }
}

export default Methods
```

This defines the `GET /users` and `POST /users` endpoints.

## Generating HTTP Client Code

Generate the HTTP client code from the defined API endpoints by running the following command:

```
npx aspida
```

This generates HTTP client code from all the API endpoint definitions in the `/api` directory.

## Using the Generated HTTP Client

You can use the generated HTTP client to call APIs. For example, you can call the API like this:

```typescript
import api from '@/api/$api'

const main = async () => {
  const users = await api.users.get()
  console.log(users)

  const newUser = await api.users.post({ body: { name: 'John' } })
  console.log(newUser)
}

main()
```

## Conclusion

By using Aspida, you can make API calls easier and safer. There's no doubt that it will contribute to improving development efficiency and reducing bugs. Try Aspida in your next project and experience the difference it makes!

---

I hope you found this article helpful! If you have any questions or comments, feel free to leave them below. Happy coding!