为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 chili图片远处放大插件
Nov 30 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
cookie的secure属性详解
Apr 08 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
动态加载js、css的实例代码
May 26 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 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
yii框架配置默认controller和action示例
2014/04/30 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
python:socket传输大文件示例
2017/01/18 Python
Python continue继续循环用法总结
2018/06/10 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python多进程并发demo实例解析
2019/12/13 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
挖掘机司机岗位职责
2014/02/12 职场文书
低碳环保标语
2014/06/12 职场文书
献爱心标语
2014/06/21 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫