0Pricing
TypeScript Academy · レッスン

型定義付きパッケージの公開

第一級の型定義を備えたライブラリを公開します。tscで.d.tsを出力し、package.jsonから参照させ、ESM/CJSのexportを処理して公開前にテストします

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

はじめに

目標：確かな型定義を備えたパッケージを公開します。.d.ts ファイルを出力し、package.json を正しく接続し、exports で ESM/CJS をサポートして、サンプルアプリで tsc --noEmit を使って検証します。

  • 宣言ファイルの出力
  • types（またはエントリごとの exports）を指定
  • 公開前のテスト

宣言ファイルの出力

declaration を有効にして .d.ts を出力します。専用のビルド設定を使い、アプリの tsconfig を厳格かつクリーンに保ちます。

// tsconfig.build.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "declaration": true,
    "emitDeclarationOnly": false,
    "outDir": "dist",
    "rootDir": "src",
    "stripInternal": true
  },
  "include": ["src/**/*"]
}

package.json の types/exports

ルートの宣言ファイルを types に指定します。サブパスのエクスポートでは types エントリを含め、エディターがモジュールごとの .d.ts を解決できるようにします。

// package.json
{
  "name": "@acme/widgets",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    },
    "./utils": {
      "types": "./dist/utils.d.ts",
      "import": "./dist/utils.js",
      "require": "./dist/utils.cjs"
    }
  }
}

ソースと .d.ts

公開 API に適切な型が付いていることを確認します。宣言はソースのシグネチャを反映するため、利用者は自動補完とチェックを利用できます。

// src/index.ts
export interface Widget { id: string; name: string }
export function greet(w: Widget): string { return `Hello, ${w.name}` }

// dist/index.d.ts (emitted)
export interface Widget { id: string; name: string }
export declare function greet(w: Widget): string

利用者側でのテスト

公開前に、tsc --noEmit を使って小さな利用者側プロジェクトでテストします。無効な使用方法に対して正しいエラーが出ることを確認します。

// consumer/tsconfig.json
{
  "compilerOptions": { "strict": true, "target": "ES2020", "module": "ESNext" },
  "include": ["./src"]
}

// consumer/src/app.ts
import { greet } from "@acme/widgets"

// Type checks in the consumer
console.log(greet({ id: "w1", name: "Ada" }))
// @ts-expect-error: missing name
// console.log(greet({ id: "w1" }))

ヒントと落とし穴

ヒント：

  • エントリごとの types を持つサブパス exports を優先します。
  • 内部型はエクスポートしないか、@internal を付けます。
  • npm publish の前にビルドするため、prepare スクリプトを使います。

型公開の確認

確認問題：型を公開するための最小限の正しい設定はどのようなものですか？

まとめ

まとめ：tsc で宣言ファイルを出力し、package.json（types/exports）を設定して、公開前に利用者側アプリで検証します。

よくある質問

「型定義付きパッケージの公開」レッスンは無料ですか？

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

「型定義付きパッケージの公開」で何を学びますか？

第一級の型定義を備えたライブラリを公開します。tscで.d.tsを出力し、package.jsonから参照させ、ESM/CJSのexportを処理して公開前にテストします ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「型定義付きパッケージの公開」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. .d.tsの基本、export typeとexport
  2. 型定義付きパッケージの公開
← TypeScript Academyに戻る