为react组件库添加typescript类型提示的方法


Posted in Javascript onJune 15, 2020

以我自己的组件react-better-countdown为例,

首先在package.json里面添加types: types/index.d.ts

为react组件库添加typescript类型提示的方法

然后文件目录上添加对应文件夹和文件,

为react组件库添加typescript类型提示的方法

最后是index.d.ts文件的编写,具体看代码:

import * as React from 'react';

interface CountdownProps {
  count?: number;
  dayText?: string | React.ReactElement;
  hourText?: string | React.ReactElement;
  minuteText?: string | React.ReactElement;
  secondText?: string | React.ReactElement;
  callback?: Function;
  className?: string;
  style?: React.CSSProperties;
  rest?: any
}

interface CountdownState {
  count?: number;
}

declare module 'react-better-countdown' {
  export default class Countdown extends React.Component<CountdownProps, CountdownState> {
    state: CountdownState;
    timer: null | number;
    tick: () => void;
    componentDidMount(): void;
    componentDidUpdate(prevProps: CountdownProps): void;
    componentWillUnmount(): void;
    render: () => React.ReactElement;
  }
}

更多详细代码看仓库:https://github.com/leeseean/react-better-countdown顺便求个Star!

到此这篇关于为react组件库添加typescript类型提示的方法的文章就介绍到这了,更多相关react组件库添加typescript类型提示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 #Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 #Javascript
浅谈Vue 自动化部署打包上线
Jun 14 #Javascript
JS定时器如何实现提交成功提示功能
Jun 12 #Javascript
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
ng-alain的sf如何自定义部件的流程
Jun 12 #Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 #Javascript
You might like
php.ini中文版
2006/10/09 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
script标签属性用type还是language
2015/01/21 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
Javascript继承机制详解
2017/05/30 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
财务会计毕业生个人求职信
2014/02/03 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
优秀团队获奖感言
2014/02/19 职场文书
党员创先争优活动总结
2014/05/04 职场文书
模具专业自荐信
2014/05/29 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书