让 js 模块支持 typescript

栏目: JavaScript · 发布时间: 5年前

内容简介:人类终究逃不过真香定律, 曾几何时,一度反感比如我们打开一个 支持当我们 使用其方法时 配合

人类终究逃不过真香定律, 曾几何时,一度反感 ts 的我, 如今写代码不用 ts 的智能提示就浑身难受 最近刚好维护 之前发布的一个 插件 react-jinke-music-player , 由于是 es6 写的 学习了下 怎么让其支持 ts

2. 观察

比如我们打开一个 支持 ts 的模块 scroll-into-view-if-needed , 当我们 cmd + 鼠标左键 点击的时候 会 自动跳转到 其模块的定义

让 js 模块支持 typescript

当我们 使用其方法时 配合 vscode 就有对应参数的提示

让 js 模块支持 typescript

这时候我们大概明白了, 要支持 ts 我们只需要提供一个 类型定义文件即可 , 官方把它称作 .d.ts 文件, 这这个文件中 我们需要编写接口 interface , 接下来以 react-jinke-music-player 为例, 我们编写一个 index.d.ts 文件

3. 开始动手吧

我们像往常一样

yarn add react-jinke-music-player
复制代码

然后引入, 这时候会发现报错了, 如图所示, 提示我们 找不到声明文件

让 js 模块支持 typescript

接下来开始编写 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> 是一个泛型, 我们将当前组件的 propsstate 声明即可, 这里的 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 是一个 必填 参数, 所以报错了

让 js 模块支持 typescript

有哪些参数, 参数的可选项是哪些, 一目了然

让 js 模块支持 typescript

5. 结语

在多人协助的项目中, 有完善类型定义的 ts 项目是非常有必要的, 让你在写代码或者重构的时候 非常悠闲放松, 那个参数类型不对, 参数值有哪些 一目了然, 当然前提别写 any : )


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

解构产品经理:互联网产品策划入门宝典

解构产品经理:互联网产品策划入门宝典

电子工业出版社 / 2018-1 / 65

《解构产品经理:互联网产品策划入门宝典》以作者丰富的职业背景及著名互联网公司的工作经验为基础,从基本概念、方法论和工具的解构入手,配合大量正面或负面的案例,完整、详细、生动地讲述了一个互联网产品经理入门所需的基础知识。同时,在此基础上,将这些知识拓展出互联网产品策划的领域,融入日常工作生活中,以求职、沟通等场景为例,引导读者将知识升华为思维方式。 《解构产品经理:互联网产品策划入门宝典》适合......一起来看看 《解构产品经理:互联网产品策划入门宝典》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具