让 js 模块支持 typescript
栏目: JavaScript · 发布时间: 5年前
内容简介:人类终究逃不过真香定律, 曾几何时,一度反感比如我们打开一个 支持当我们 使用其方法时 配合
人类终究逃不过真香定律, 曾几何时,一度反感 ts
的我, 如今写代码不用 ts
的智能提示就浑身难受 最近刚好维护 之前发布的一个 插件 react-jinke-music-player , 由于是 es6
写的 学习了下 怎么让其支持 ts
2. 观察
比如我们打开一个 支持 ts
的模块 scroll-into-view-if-needed
, 当我们 cmd + 鼠标左键 点击的时候 会 自动跳转到 其模块的定义
当我们 使用其方法时 配合 vscode
就有对应参数的提示
这时候我们大概明白了, 要支持 ts
我们只需要提供一个 类型定义文件即可 , 官方把它称作 .d.ts
文件, 这这个文件中 我们需要编写接口 interface
, 接下来以 react-jinke-music-player
为例, 我们编写一个 index.d.ts
文件
3. 开始动手吧
我们像往常一样
yarn add react-jinke-music-player 复制代码
然后引入, 这时候会发现报错了, 如图所示, 提示我们 找不到声明文件
接下来开始编写 index.d.ts
文件
import * as React from 'react'; export interface ReactJkMusicPlayerAudioList { name: string | React.ReactNode, singer?: string | React.ReactNode, cover: string, musicSrc: string, lyric?: string, } export interface ReactJkMusicPlayerProps { audioLists: Array<ReactJkMusicPlayerAudioList>, mode: 'mini' | 'full' } export default class ReactJkMusicPlayer extends React.PureComponent<ReactJkMusicPlayerProps, any> { } 复制代码
假设我们的插件 支持一个 audioLists
的参数, 这个参数是一个数组, 每一个下标 是 name
, singer
, cover
, musicSrc
, lyric
组成的 object
React.PureComponent<props, state>
是一个泛型, 我们将当前组件的 props
和 state
声明即可, 这里的 props 也就是 ReactJkMusicPlayerProps
,
用户不需要支持 组件内部有哪些 state
, 所以写 any 即可, 这样我们就完成了 一个 d.ts
文件的编写, 那么问题来了, 编辑器怎么知道当前组件的 d.ts
文件在哪里呢?
4. 声明 typing 文件所在路径
其实很简单, 在 package.json
中 我们都知道 main
字段 声明 入口文件, 那么同理 typing
字段 声明 组件的 类型定义文件, 这里我们 写 index.d.ts
即可
{ "name": "react-jinke-music-player", "version": "4.3.2", "description": "Maybe the best beautiful HTML5 responsive player component for react", "main": "lib/index.js", "typing": "index.d.ts", } 复制代码
现在将这个组件发布 重新安装, 看下效果
npm publish . yarn add react-jinke-music-player 复制代码
可以看到, 编辑器已经能正确找到定义文件并推断出来, 这里我们定义的 audioLists
是一个 必填 参数, 所以报错了
有哪些参数, 参数的可选项是哪些, 一目了然
5. 结语
在多人协助的项目中, 有完善类型定义的 ts
项目是非常有必要的, 让你在写代码或者重构的时候 非常悠闲放松, 那个参数类型不对, 参数值有哪些 一目了然, 当然前提别写 any
: )
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 为nginx添加SSL支持模块
- Node.js 12中新的ECMAScript模块支持(译)
- Chrome 63 Beta:支持动态模块导入,新增设备内存 API
- Go 1.11 正式发布:添加对模块 "modules" 的初步支持
- gf v0.97beta 发布,更多模块支持、功能改进及文档完善
- GoLand 2018.2.2 正式发布,支持 Go 新版中的模块功能
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
解构产品经理:互联网产品策划入门宝典
电子工业出版社 / 2018-1 / 65
《解构产品经理:互联网产品策划入门宝典》以作者丰富的职业背景及著名互联网公司的工作经验为基础,从基本概念、方法论和工具的解构入手,配合大量正面或负面的案例,完整、详细、生动地讲述了一个互联网产品经理入门所需的基础知识。同时,在此基础上,将这些知识拓展出互联网产品策划的领域,融入日常工作生活中,以求职、沟通等场景为例,引导读者将知识升华为思维方式。 《解构产品经理:互联网产品策划入门宝典》适合......一起来看看 《解构产品经理:互联网产品策划入门宝典》 这本书的介绍吧!