[TypeScript] 將TypeScript 導入到React專案的常見問題- 第三方套件的型別

先前的文章
- [TypeScript] 將TypeScript 導入到React專案 — 起手式
- [TypeScript] 將TypeScript 導入到React專案的常見問題- createRoot參數錯誤
- [TypeScript] 將TypeScript 導入到React專案的常見問題- Props的型別與預設值
- [TypeScript] 將TypeScript 導入到React專案的常見問題- 基本元件的Prop

如何設定第三方套件的型別

Chart.js

透過Chart.js 官網的文件的說明

Chart.js comes with built-in TypeScript typings and is compatible with all popular JavaScript frameworks including React , Vue , Svelte , and Angular . You can use Chart.js directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.

Chart.js 已經有內建他自己各個方法, 資料的型別, 所以不用特別在另外安裝. 但如果發現沒有的話, 可以透過DefinitelyTyped

DefinitelyTyped是收集了各個熱門常見的第三方library會用到的型別定義. 這些都是由一些熱心的網友協助定義並提供到這個github上, 可以透過這個地方下載自己所需的型別定義檔案, 如果有缺少自己所需要的定義也能自行擴充

不過官方網站文件沒有特別說要要如何使用

如果要參考相關範例可以透過react-chartjs-2的官方文件, 在How to use react-chartjs-2 with TypeScript? 有提供簡單的範例

以Line Chart 為例

import type { ChartData, ChartOptions } from 'chart.js';

interface LineProps {
  options: ChartOptions<'line'>;
  data: ChartData<'line'>;
}

如果要使用其他chart可以參考以下類型: 'bar', 'line', 'scatter', 'bubble', 'pie', 'doughnut', 'polarArea' 或'radar'.

如果要用更進階的類型就直接參考Chart.js 的API 文件

Axios

Axios 本身也有提供型別定義

如果有使用Axios中的interceptor 來規劃專案內的axios 架構的話, 可以用以下方式來設定來加入TypeScript

import axios, { AxiosResponse, AxiosError} from "axios";

const http = axios.create();

http.interceptors.response.use(
 function(response: AxiosResponse) {
  return response.data;
 },
 function(error: AxiosError) {
  if (error.response) {
   const response: AxiosResponse = error.response

   throw new Error(response.data.message, { cause: response });
  }
 }
);

export default http

透過AxiosResponse與AxiosError 我們就不用自己定義axios 回傳的response 以及error 內容, 這非常的便利

之後若要呼叫後端API就會大概會是以下形式

import http from 'http/index.ts'

type User = {
  name: string,
  age: number
}

async getUsers(): User[] {
  const users:User[] = await http.get('/users');

  return users
}