为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 相关文章推荐
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
JavaScript 面向对象基础简单示例
Oct 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
python中global用法实例分析
2015/04/30 Python
Python实现堆排序的方法详解
2016/05/03 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python清除函数占用的内存方法
2018/06/25 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
手写一个python迭代器过程详解
2019/08/27 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
餐饮投资计划书
2014/04/25 职场文书
代领报检证委托书范本
2014/10/11 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
详解Vue slot插槽
2021/11/20 Vue.js
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python