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

  • Post author:
  • Post category:其他




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. 显然不报错了

在这里插入图片描述



版权声明:本文为palmer_kai原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。