Khắc phục lỗi 'Property 'isAxiosError' does not exist on type 'AxiosStatic'' trong TypeScript

Bạn đang gặp phải lỗi "Property 'isAxiosError' does not exist on type 'AxiosStatic'" khi sử dụng Axios trong dự án TypeScript của mình? Đừng lo lắng, bài viết này sẽ cung cấp cho bạn giải pháp chi tiết, dễ hiểu cùng với các ví dụ minh họa cụ thể để bạn có thể nhanh chóng khắc phục vấn đề và tiếp tục công việc của mình một cách suôn sẻ. Chúng ta sẽ cùng nhau đi qua các bước từ xác định nguyên nhân, gỡ lỗi, đến các phương pháp sửa lỗi hiệu quả nhất.

Nguyên nhân gây ra lỗi 'isAxiosError' does not exist'

Lỗi này thường xuất hiện khi trình biên dịch TypeScript không thể nhận diện hàm isAxiosError trong đối tượng axios. Có một vài nguyên nhân chính dẫn đến tình trạng này:

• Thiếu hoặc sai lệch khai báo kiểu: TypeScript dựa vào các file khai báo kiểu (.d.ts) để hiểu cấu trúc và các hàm của thư viện. Nếu file khai báo kiểu cho Axios bị thiếu, hoặc phiên bản không tương thích, lỗi này có thể xảy ra.
• Cài đặt @types/axios không cần thiết: Từ phiên bản Axios 1.0.0 trở đi, Axios đã tích hợp sẵn các khai báo kiểu TypeScript. Việc cài đặt thêm gói @types/axios có thể gây xung đột và dẫn đến lỗi.
• Phiên bản Axios quá cũ: Các phiên bản Axios cũ hơn có thể không hỗ trợ đầy đủ các khai báo kiểu TypeScript, đặc biệt là hàm isAxiosError.

Các bước khắc phục lỗi 'isAxiosError'

1. Gỡ cài đặt @types/axios

Nếu bạn đã cài đặt gói @types/axios, hãy gỡ nó bằng lệnh sau:

npm uninstall @types/axios

Sau khi gỡ cài đặt, hãy đảm bảo rằng bạn đã xóa import không cần thiết này trong code:

import { AxiosError } from 'axios'; // Xóa dòng này nếu có

2. Cập nhật phiên bản Axios

Đảm bảo bạn đang sử dụng phiên bản Axios mới nhất. Bạn có thể cập nhật Axios bằng lệnh:

npm install axios@latest

Sau khi cập nhật, kiểm tra lại file `package.json` để chắc chắn phiên bản Axios đã được nâng cấp.

3. Import isAxiosError đúng cách

Để sử dụng hàm isAxiosError, bạn cần import nó từ Axios như sau:

import axios, { isAxiosError } from 'axios';

Cách import này đảm bảo rằng TypeScript có thể nhận diện chính xác hàm isAxiosError.

4. Sử dụng isAxiosError trong khối catch

Khi bắt lỗi từ một request Axios, hãy sử dụng isAxiosError để kiểm tra xem lỗi đó có phải là lỗi từ Axios hay không. Điều này giúp bạn xử lý lỗi một cách chính xác và an toàn.

import axios, { isAxiosError, AxiosError } from 'axios';

async function fetchData() {
    try {
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data);
    } catch (error) {
        if (isAxiosError(error)) {
            // Lỗi Axios
            console.error('Lỗi Axios:', error.message);
            if (error.response) {
                console.error('Dữ liệu lỗi:', error.response.data);
                console.error('Trạng thái lỗi:', error.response.status);
            }
        } else {
            // Lỗi không xác định
            console.error('Lỗi không xác định:', error);
        }
    }
}

Trong ví dụ trên, chúng ta kiểm tra xem `error` có phải là một `AxiosError` hay không. Nếu đúng, chúng ta có thể truy cập các thuộc tính như `error.message`, `error.response.data`, và `error.response.status` một cách an toàn.

Ví dụ nâng cao: Type Guard với Generic

Để làm cho việc xử lý lỗi trở nên mạnh mẽ hơn, bạn có thể sử dụng generic với isAxiosError để chỉ định kiểu dữ liệu trả về khi có lỗi.

interface ErrorResponse {
    message: string;
    code: number;
}

async function fetchData() {
    try {
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data);
    } catch (error) {
        if (isAxiosError<ErrorResponse>(error)) {
            // TypeScript biết rằng error.response.data có kiểu ErrorResponse
            console.error('Lỗi từ API:', error.response?.data.message);
            console.error('Mã lỗi:', error.response?.data.code);
        } else {
            console.error('Lỗi không xác định:', error);
        }
    }
}

Trong ví dụ này, chúng ta định nghĩa một interface `ErrorResponse` để mô tả cấu trúc dữ liệu lỗi từ API. Khi sử dụng isAxiosError<ErrorResponse>(error), TypeScript sẽ tự động nhận diện và cho phép bạn truy cập các thuộc tính của `error.response.data` một cách an toàn.

Kết luận

Việc xử lý lỗi "Property 'isAxiosError' does not exist on type 'AxiosStatic'" trong TypeScript có thể gây khó chịu, nhưng với các bước và ví dụ trên, bạn hoàn toàn có thể khắc phục nó một cách dễ dàng. Hãy nhớ kiểm tra phiên bản Axios, gỡ bỏ @types/axios nếu không cần thiết, và import isAxiosError đúng cách. Chúc bạn thành công và có những trải nghiệm lập trình tuyệt vời với Axios và TypeScript!