0Pricing
Vue Academy · レッスン

コンポーネントライブラリのTypeScript宣言

vite-plugin-dts、.d.tsファイルの生成、ライブラリ利用者向けコンポーネントpropsの型付け

「コンポーネントライブラリのTypeScript宣言」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

型宣言が必要な理由

TypeScriptの利用者は、コンポーネントやpropsの自動補完と型チェックを利用するために .d.ts ファイルを必要とします。公開するライブラリでは、生成した宣言ファイルをJSとともに提供する必要があります。

vite-plugin-dts

vite-plugin-dts はViteのビルド中にソースから .d.ts ファイルを生成し、.vue の単一ファイルコンポーネントの型も含めます。

npm install -D vite-plugin-dts

プラグインを追加する

plugins配列に dts() を追加します。コンパイル後に実行され、宣言ファイルを dist に出力します。

import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [vue(), dts()]
});

insertTypesEntry

insertTypesEntry オプションを使うと、すべての型を再エクスポートする単一の index.d.ts エントリが出力され、JSのエントリーポイントと対応します。

dts({
  insertTypesEntry: true
})

生成されたd.tsファイル

ビルド後の dist には、ソースを反映した .d.ts ファイルと、集約されたエントリ宣言が含まれます。これらはコンポーネントのprops、emits、エクスポートを記述します。

// dist/index.d.ts
export { MyButton } from "./MyButton.vue";
// dist/MyButton.vue.d.ts describes its props

package.jsonのtypesフィールド

types（または typings）フィールドでエントリ宣言を利用者に示し、TypeScriptがライブラリの型を解決できるようにします。

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

exportsマップのtypes

モダンなパッケージでは、exports マップの各エントリに対しても型を公開し、サブパスインポートを正しく解決できるようにします。

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js"
    }
  }
}

グローバルコンポーネントの自動補完

利用者がコンポーネントをグローバル登録する場合、テンプレートの自動補完とpropsの型チェックを利用できるように、TypeScriptでは GlobalComponents インターフェースにそのコンポーネントを宣言する必要があります。

GlobalComponentsを拡張する

vue の GlobalComponents にコンポーネントを追加するモジュール拡張を提供します。型を参照する利用者は、テンプレートでIntelliSenseを利用できます。

// global.d.ts
import MyButton from "./MyButton.vue";

declare module "vue" {
  export interface GlobalComponents {
    MyButton: typeof MyButton;
  }
}
export {};

コンポーネントのpropsに型を付ける

TypeScriptの型とともに defineProps を使用し、生成される宣言に正確なpropsの型を利用者へ引き継がせます。

// MyButton.vue <script setup lang="ts">
defineProps<{
  label: string;
  disabled?: boolean;
}>();

型を検証する

公開前に、サンプル利用者プロジェクトで tsc --noEmit を実行するか、attw/are-the-types-wrongのようなツールを使って、宣言が解決されpropsがチェックされることを確認します。

npx tsc --noEmit

理解度チェック

GlobalComponents の拡張によって、ライブラリの利用者は何を得られますか。

まとめ

vite-plugin-dts と insertTypesEntry を使って .d.ts ファイルを生成し、package.json の types フィールド（および exports マップ）をエントリ宣言に設定します。また、GlobalComponents の拡張を提供して、利用者がテンプレートの自動補完を利用できるようにします。defineProps でpropsに型を付け、tsc --noEmit で検証します。

よくある質問

「コンポーネントライブラリのTypeScript宣言」レッスンは無料ですか？

はい。「コンポーネントライブラリのTypeScript宣言」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「コンポーネントライブラリのTypeScript宣言」で何を学びますか？

vite-plugin-dts、.d.tsファイルの生成、ライブラリ利用者向けコンポーネントpropsの型付け ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「コンポーネントライブラリのTypeScript宣言」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Viteライブラリモードの設定
  2. コンポーネントライブラリのTypeScript宣言
  3. Tree Shakingと自動インポート
  4. npmへの公開とセマンティックバージョニング
← Vue Academyに戻る