为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下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
js 作用域和变量详解
Feb 16 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
js中生成map对象的方法
2014/01/09 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
jquery实现选项卡切换代码实例
2019/05/14 jQuery
微信小程序位置授权处理方法
2019/06/13 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python:socket传输大文件示例
2017/01/18 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python爬取个性签名的方法
2018/06/17 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
珠宝店促销方案
2014/03/21 职场文书
学前班语言教学计划
2015/01/20 职场文书