为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 版本]
Mar 20 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue中的.$mount('#app')手动挂载操作
Sep 02 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
mysql limit查询优化分析
2008/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
canvas的神奇用法
2017/02/03 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python实现猜单词小游戏
2020/05/22 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
了解一下python内建模块collections
2020/09/07 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
建筑专业毕业生推荐信
2013/11/21 职场文书
任课老师推荐信范文
2013/11/24 职场文书
安全标准化实施方案
2014/02/20 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
营销与策划专业求职信
2014/06/20 职场文书
法学专业求职信
2014/07/15 职场文书
前台文员岗位职责
2015/02/04 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
详解Redis瘦身指南
2021/05/26 Redis
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android