typescript 扩展第三方库类型，添加属性成员

曾经终败给现在 2023-03-03 05:58 16阅读 0赞

## preface ##

之前在使用 axios 的时候，需要在 `AxiosRequestConfig` 中添加自定义属性，比如说

1.  配置是否使用 loading 效果
2.  配置 业务报错是否 自动提示  
    …

我选择了通过过 扩展接口， 然后**自定义了一个函数，在函数内部 才会使用 axios 解决了这个问题**

当然 开始我是**通过 声明文件 解决这个问题**， 下面记录下怎么通过声明文件解决问题的

## 案例 ##

> ionic react 项目

### 1. 扩展 axios 的 AxiosRequestConfig 接口属性成员 ###

#### 1.1 没有扩展前显示报错 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]

#### 1.2 项目 `src目录下` 创建 `shims.axios.d.ts` 声明文件 ####

> 这就是 **interface 接口 合并**

import { AxiosRequestConfig } from 'axios'
    
    declare module 'axios' {
    
      export interface AxiosRequestConfig {
        loading?: boolean
      }
    }

#### 1.3 添加 扩展属性成员声明后 ####

啦啦啦，不报错啦  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]

### 2. 扩展 antv/f2 chart.tooltip config 的 layout 属性 ###

> 最近 在写移动端 charts 项目， 然后选择了 `antv/f2` ，对比了 echarts ， hightcharts ，最后选择了 antv/f2
> 
> 1.  因为 highcharts 需要授权，之前用过，但是公司估计不愿意话费这笔钱还是放弃
> 2.  echarts 应该是可以满足需求的
> 3.  antv/f2 是针对移动端的，而且以后小程序 可以使用，看了效果还不错， 所以选择用这款框架
> 4.  背后有 阿里爸爸

> 这个问题 感觉是该项目的一个bug， 后期应该会改的

#### 2.1 未扩展前 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 2]

#### 2.2 src 目录添加 shims.antv-f2.d.ts ####

import { TooltipParams } from '@antv/f2'
    
    declare module '@antv/f2' {
      export interface TooltipParams {
        layout?: string
      }
    }

#### 3. 显然不报错了 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]: /images/20230208/66ce6605225c4bb0a415dfb36f6b1435.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]: /images/20230208/9f9177e2cec64adfb496f8c22ea94504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 2]: /images/20230208/a5a7771f496349598f1944d7add64176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 3]: /images/20230208/ece99b80134345e498377c51d9af082b.png