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

preface

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

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

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

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

案例

ionic react 项目

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

1.1 没有扩展前显示报错

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

这就是 interface 接口 合并

import { AxiosRequestConfig } from 'axios'

declare module 'axios' {

  export interface AxiosRequestConfig {
    loading?: boolean
  }
} 

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

啦啦啦，不报错啦

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 未扩展前

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

import { TooltipParams } from '@antv/f2'

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

3. 显然不报错了