为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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
JS验证码实现代码
Sep 14 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
微信小程序 生成携带参数的二维码
Oct 23 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python实现单词拼写检查
2015/04/25 Python
python跳出双层for循环的解决方法
2019/06/24 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python输出pdf文档的实例
2020/02/13 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
房展策划方案
2014/06/07 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书