讓 js 模塊支持 typescript

1. 前言

人類終究逃不過真香定律, 曾幾什麼時候,一度反感 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 : )