JavaScript開発をレベルアップ！TypeScriptでnpmモジュールを作ってみよう

2024-06-15

TypeScript で npm モジュールを作成する

近年、Web 開発において TypeScript はますます人気が高まっています。型システムによる静的型付けの恩恵を受けられるため、コードの保守性や信頼性を向上させることができます。さらに、TypeScript で記述されたコードは、JavaScript へとコンパイルすることができ、既存の JavaScript エコシステムともシームレスに連携できます。

本記事では、TypeScript を用いて npm モジュールを作成する方法について、初心者向けに分かりやすく解説します。

ステップ 1: プロジェクトの初期化

新しいディレクトリを作成し、そのディレクトリ内で以下のコマンドを実行します。

npm init -y

上記のコマンドにより、package.json ファイルが生成されます。このファイルは、npm モジュールの基本情報 (名前、バージョン、ライセンスなど) を定義するために使用されます。

ステップ 2: TypeScript の設定

以下のコマンドを実行して、TypeScript コンパイラ (tsc) をインストールします。

npm install --save-dev typescript

tsconfig.json ファイルを作成し、TypeScript コンパイラの設定を記述します。最低限必要な設定は以下の通りです。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"]
}

src ディレクトリを作成し、その中に TypeScript ソースコードファイルを格納します。

ステップ 3: モジュールの開発

src ディレクトリ内で、モジュールの機能を実装する TypeScript ファイルを作成します。
型定義ファイル (.d.ts ファイル) を作成し、モジュールの公開 API の型を定義します。

ステップ 4: ビルドスクリプトの設定

package.json ファイルの scripts プロパティに、以下のビルドスクリプトを追加します。

{
  "scripts": {
    "build": "tsc"
  }
}

上記のスクリプトを実行すると、TypeScript ソースコードが JavaScript コードへとコンパイルされ、dist ディレクトリに出力されます。

ステップ 5: npm パッケージの公開

npm アカウントを作成していない場合は、作成します。
以下のコマンドを実行して、作成した npm モジュールを公開します。

npm publish

補足

上記は基本的な手順であり、状況に応じて詳細な設定が必要になる場合があります。

本記事では、npm モジュールの作成について基本的な内容を説明しました。より高度な機能を実装したり、テストコードを書いたりするには、さらに学習が必要です。

package.json

{
  "name": "my-npm-module",
  "version": "1.0.0",
  "description": "My first npm module",
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "keywords": [
    "typescript",
    "npm",
    "module"
  ],
  "author": "Your Name",
  "license": "MIT"
}

src/index.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

export declare function add(a: number, b: number): number;
export declare function subtract(a: number, b: number): number;

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"]
}

説明

package.json ファイルには、モジュールの基本情報 (名前、バージョン、ライセンスなど) と、ビルドスクリプトなどが定義されています。
src/index.ts ファイルには、モジュールの機能を実装する TypeScript コードが記述されています。この例では、2 つの関数を定義しています: add と subtract。
src/index.d.ts ファイルには、モジュールの公開 API の型を定義した型定義ファイルが記述されています。

使い方

このモジュールをインストールするには、以下のコマンドを実行します。

npm install my-npm-module

インストール後、モジュールを以下のようにインポートして使用することができます。

import { add, subtract } from 'my-npm-module';

const sum = add(10, 20);
console.log(sum); // 30

const difference = subtract(20, 10);
console.log(difference); // 10