为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 相关文章推荐
让元素在网页中可拖动示例代码
Aug 13 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
Js利用正则表达式去除字符串的中括号
Nov 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
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
简述php环境搭建与配置
2016/12/05 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
js调用css属性写法
2013/09/21 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
js实现表格数据搜索
2020/08/09 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
python基础教程之常用运算符
2014/08/29 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
公司年会搞笑主持词
2014/03/24 职场文书
小学班长竞选稿
2015/11/20 职场文书
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技