admin 管理员组

文章数量: 1087817

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

本文标签： typescript 扩展第三方库类型，添加属性成员

版权声明：本文标题：typescript 扩展第三方库类型，添加属性成员 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1694415360a251786.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。