为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中自动切换焦点实现代码
Dec 15 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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中数组的三种排序方法分享
2012/05/07 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
js计算精度问题小结
2013/04/22 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
用Python实现数据的透视表的方法
2018/11/16 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python与pycharm有何区别
2020/07/01 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
python matlab库简单用法讲解
2020/12/31 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
产品开发计划书
2014/04/27 职场文书
4s店活动策划方案
2014/08/25 职场文书
宾馆安全管理制度
2015/08/06 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers