为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入门知识简介
Mar 04 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
学习Angularjs分页指令
Jul 01 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
原生JS实现留言板功能
Feb 08 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中$this-&amp;gt;含义分析
2009/11/29 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python 统计代码行数简单实例
2017/05/04 Python
Python管理Windows服务小脚本
2018/03/12 Python
Django中url的反向查询的方法
2018/03/14 Python
用Python读取几十万行文本数据
2018/12/24 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python打开音乐文件的实例方法
2020/07/21 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
市场专员岗位职责
2014/02/14 职场文书
销售主管竞聘书
2014/03/31 职场文书
安全生产目标责任书
2014/04/14 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
安全生产月宣传标语
2014/10/06 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
新员工入职欢迎词
2015/01/23 职场文书