TypeScript (Axios)

# TypeScript (Axios)

# TypeScript with Axios: Best Practices and Integration

## Introduction

Axios is a promise-based HTTP client for the browser and Node.js. It provides a simple-to-use library in a small package with a very extensible interface. When combined with TypeScript, Axios can be even more powerful, providing type safety and better developer experience.

## Setting Up Axios with TypeScript

1. **Install Axios and TypeScript**:
   ```bash
   npm install axios
   npm install typescript --save-dev
   ```

2. **Create a TypeScript configuration file**:
   ```bash
   npx tsc --init
   ```

3. **Basic Axios Setup**:
   ```typescript
   import axios from 'axios';

   const apiClient = axios.create({
     baseURL: 'https://api.example.com',
     headers: {
       'Content-Type': 'application/json',
     },
   });
   ```

## Best Practices

- **Type Safety**: Define interfaces for your API responses and requests to ensure type safety.
  ```typescript
  interface User {
    id: number;
    name: string;
  }

  const fetchUser = async (id: number): Promise<User> => {
    const response = await apiClient.get<User>(`/users/${id}`);
    return response.data;
  };
  ```

- **Error Handling**: Implement robust error handling to manage API errors gracefully.
  ```typescript
  try {
    const user = await fetchUser(1);
    console.log(user);
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.error('Axios error:', error.message);
    } else {
      console.error('Unexpected error:', error);
    }
  }
  ```

- **Interceptors**: Use interceptors for request and response manipulation.
  ```typescript
  apiClient.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  });
  ```

## Advanced Usage

- **Custom Instances**: Create custom Axios instances for different parts of your application.
  ```typescript
  const authApiClient = axios.create({
    baseURL: 'https://auth.example.com',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  ```

- **Cancellation**: Implement request cancellation to improve performance and user experience.
  ```typescript
  const source = axios.CancelToken.source();

  apiClient.get('/users', {
    cancelToken: source.token
  }).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // handle error
    }
  });

  // Cancel the request
  source.cancel('Operation canceled by the user.');
  ```

## Conclusion

Integrating Axios with TypeScript not only enhances the robustness of your API calls but also improves the maintainability and scalability of your code. By following the best practices outlined above, you can ensure that your application handles API communication efficiently and effectively.