開發一個屬性名提示友好的Vue元件

从前有匹马叫代码發表於2024-08-18
Vue元件

這兩天開發了一個元件，開發好之後想著先本地npm link 用一用試試，然後在vue3 專案中link了過來，發現VSCODE沒有屬性提示，鑑於考慮到一個好的元件應該是提示友好的，於是給元件準備加上屬性提示。

首先，我的元件包名叫 "xxx-xx"這種，然後我是提供了全域性安裝和僅匯入元件的方式

import ErasableLayer from "./ErasableLayer.vue";
import { createApp } from 'vue';


export { ErasableLayer };
export default {
  install(app: ReturnType<typeof createApp>) {
    app.component("ErasableLayer", ErasableLayer);
  }
};

於是寫型別檔案的話，就要按照入口檔案的內容來寫

declare module "erasable-pkg" {
  import { App, DefineComponent } from "vue";


  export const ErasableLayer: DefineComponent<{
    layerColor?: string;
    renderLayer?: (ctx: CanvasRenderingContext2D, w: number, h: number) => void;
  }, {}, {
    done: () => void;
  }>;

  export default {
    install(app: App) {
      app.component("ErasableLayer", ErasableLayer);
    },
  };
}

首先定義一個module表示我這個模組，然後借用Vue的DefineComponent來生成我的元件的屬性，和emit事件的型別，

然後匯出一個vue.use安裝外掛的方法，最後需要在你的包的package.json中指定你的types,

{
  "name": "erasable-pkg",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.js",

  "types": "./types/index.d.ts"
}

這樣的話，在使用元件的時候就會有屬性提示了，如圖：

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

經過我測試，發現VSCode是可以提示的，webstorm屬性提示載入不出來。

相關文章