詳解如何編寫一個(gè)Typescript的類型聲明文件

更新時(shí)間：2023年06月15日 14:38:49 作者：小p

我們知道TypeScript根據(jù)類型聲明進(jìn)行類型檢查，但有些情況可能沒有類型聲明，這個(gè)時(shí)候就需要我們自己寫一個(gè)，下面小編就來和大家聊聊如果寫一個(gè)Typescript的類型聲明文件呢

現(xiàn)在有這樣一個(gè)任務(wù)：給一個(gè)用 javascript 包寫一個(gè)類型文件。

這個(gè)包導(dǎo)出了一個(gè)函數(shù)calculator，它具有如下功能：

calculator.js文件

// operator: 只能是 plus | minus
function calculator(operator, numbers) {
  console.log(operator, numbers)
  return
}
calculator.plus = (numbers) => {
  return numbers
}
calculator.minus = (numbers) => {
  return numbers
}
export default calculator

先分析下calculator的結(jié)構(gòu)。

它首先是一個(gè)函數(shù)，這個(gè)函數(shù)傳遞兩個(gè)參數(shù)，第一個(gè)參數(shù)只能是plus和minus，第二個(gè)參數(shù)是一個(gè)數(shù)字?jǐn)?shù)組。

其次，它有兩個(gè)屬性，分別是plus和minus，參數(shù)都是一個(gè)數(shù)字?jǐn)?shù)組。

下面就來一步步完善這個(gè)類型文件。

第一步，創(chuàng)建一個(gè) calculator.d.ts 文件。因?yàn)?calculator 本身是一個(gè)函數(shù)，可以先定義一個(gè)函數(shù)類型：

calculator.d.ts文件

type IOperator = 'plus' | 'minus'
type ICalculate = (operator: IOperator, numbers: number[]) => number
declare const calculator: ICalculate
export default calculator

配置tsconfig.json：

"files": ["calculator.d.ts"]

index.ts文件

可以看到，我們寫的類型聲明文件生效了。

注意，這里在index.ts引入calculator.js的函數(shù)時(shí)，calculator.d.ts文件中也一定要加上export default calculator，否則會(huì)報(bào)錯(cuò)，報(bào)calculator.d.ts不是一個(gè)模塊。

但當(dāng)我們?cè)L問這個(gè)函數(shù)的屬性時(shí)，會(huì)報(bào)錯(cuò)：

這是因?yàn)槲覀冎宦暶魉且粋€(gè)函數(shù)，calculator 還有兩個(gè)屬性方法，那怎么辦呢？使用 interface:

interface Icalculator {
  (operator: Operator, numbers: number[]): number
  plus(numbers: number[]): number
  minus(numbers: number[]): number
}

這樣就大功告成了，最后把這個(gè)聲明文件提交到@types組織，然后通過npm install @types/calculator下載，這樣 typescript 會(huì)自動(dòng)讀取類似聲明文件。

注意：提交到@types時(shí)，類型文件的命名一定是index.d.ts

同時(shí)，我們的引入方式就變成了import calculator from 'calculator'。

下面讓我們來看一個(gè)axios庫類型定義文件是怎么寫的。下面對(duì)axios類型聲明文件進(jìn)行精簡(jiǎn)，保留了重要部分。

// 定義請(qǐng)求頭的格式，即 key 只能是字符串，value 是一個(gè)聯(lián)合類型 string | number | boolean
export type AxiosRequestHeaders = Record<string, string | number | boolean>;
// 定義了響應(yīng)頭的格式，即 key 和 value只能是字符串，同時(shí)利用 &(交叉類型) 把多個(gè)類型合并成一個(gè)類型
export type AxiosResponseHeaders = Record<string, string> & {
  "set-cookie"?: string[]
};
// 對(duì)請(qǐng)求的參數(shù)進(jìn)行轉(zhuǎn)換，此處對(duì)應(yīng)的就是轉(zhuǎn)換函數(shù)
export interface AxiosRequestTransformer {
  (data: any, headers?: AxiosRequestHeaders): any;
}
// 定義了所有請(qǐng)求方法的類型
export type Method =
  | 'get' | 'GET'
  | 'delete' | 'DELETE'
  | 'head' | 'HEAD'
  ...
// 定義了所有返回?cái)?shù)據(jù)的類型，可以是二進(jìn)制，也可以是json對(duì)象
export type ResponseType =
  | 'arraybuffer'
  | 'blob'
  | 'document'
  | 'json'
  ...
// 請(qǐng)求配置AxiosRequestConfig是一個(gè)接口，接口傳入了一個(gè)泛型，這個(gè)泛型就可以流入到里面的屬性或值里面。
export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  headers?: AxiosRequestHeaders;
  params?: any;
  data?: D;
  responseType?: ResponseType;
  ...
}
// 請(qǐng)求返回的數(shù)據(jù)類型，定義了一個(gè)interface，里面有data，status等，同時(shí)傳入了一個(gè)泛型，這個(gè)泛型可以流入到data里面，這樣我就定義了data的類型
export interface AxiosResponse<T = any, D = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: AxiosResponseHeaders;
  config: AxiosRequestConfig<D>;
  request?: any;
}
// 定義了一個(gè)Axios的類，這個(gè)類定義了構(gòu)造函數(shù)constructor，攔截器interceptors，以及一些調(diào)用方法get/post等
export class Axios {
  constructor(config?: AxiosRequestConfig);
  defaults: AxiosDefaults;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse>;
  };
  get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  post<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
  ...
}
// AxiosPromise 繼承于 Promise<AxiosResponse<T>>，Promise<AxiosResponse<T>>里面?zhèn)魅肓朔盒停@樣泛型流入到AxiosResponse里面
export interface AxiosPromise<T = any> extends Promise<AxiosResponse<T>> {
}
// 定義了一個(gè)Axios實(shí)例的接口
export interface AxiosInstance extends Axios {
  (config: AxiosRequestConfig): AxiosPromise;
  (url: string, config?: AxiosRequestConfig): AxiosPromise;
}
export interface AxiosStatic extends AxiosInstance {
  create(config?: AxiosRequestConfig): AxiosInstance;
  Axios: typeof Axios;
  ...
}
declare const axios: AxiosStatic;
export default axios;

首先我們引入import axios from 'axios'，這個(gè) axios 的類型就是 AxiosStatic，這個(gè)類型上有個(gè) create 的方法:

export interface AxiosStatic extends AxiosInstance {
  create(config?: AxiosRequestConfig): AxiosInstance;
  Axios: typeof Axios;
  ...
}

執(zhí)行 create 方法后，返回一個(gè)類型為 AxiosInstance 的變量:

export interface AxiosInstance extends Axios {
  (config: AxiosRequestConfig): AxiosPromise;
  (url: string, config?: AxiosRequestConfig): AxiosPromise;
}

這個(gè)變量首先是一個(gè)函數(shù)，這個(gè)函數(shù)可以這么使用(config: AxiosRequestConfig): AxiosPromise;，也可以這么使用(url: string, config?: AxiosRequestConfig): AxiosPromise;，同時(shí)它也繼承了Axios類型，Axios類型有g(shù)et, post等方法，所以它就有了如下使用方法:

import axios from 'axios'
const axiosInstance = axios.create()
// 發(fā)送請(qǐng)求的三種方式
axiosInstance({ url: 'test.url'})
axiosInstance(url: 'test.url', config: { method: 'get' })
axiosInstance.get('test.url')

到此這篇關(guān)于詳解如何編寫一個(gè)Typescript的類型聲明文件的文章就介紹到這了,更多相關(guān)Typescript類型聲明文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: