パッケージの使い方

パッケージをインストールしたら、コードの中でそのパッケージを使えるようになります。ここでは、パッケージの基本的な使い方を説明します。

インストールしたパッケージをimportする

パッケージを使うには、import文でパッケージ名を指定します。自分のファイルをimportするときは./で始まる相対パスを書きますが、パッケージの場合はパッケージ名をそのまま書きます。

ts
import { z } from "zod";

ts
import { z } from "zod";

この"zod"の部分がパッケージ名です。./zodのように相対パスにしないように注意してください。相対パスで書くと、ローカルファイルを探しに行ってしまいます。

パッケージをimportしたら、そのパッケージが提供する機能を使えます。

ts
import { z } from "zod";
 
const schema = z.string();
const result = schema.safeParse("hello");
console.log(result.success);

ts
import { z } from "zod";
 
const schema = z.string();
const result = schema.safeParse("hello");
console.log(result.success);

import構文の詳細については、次のページを参照してください。

📄️ import、export、require

実務でアプリケーションを作る場合、複数のJavaScriptファイルを組み合わせて、ひとつのアプリケーションを成すことが多いです。いわゆるモジュール指向の開発です。ここではJavaScriptとTypeScriptでのモジュールと、モジュール同士を組み合わせるためのimport、export、requireについて説明します。

TypeScript向けパッケージと型定義

TypeScriptでパッケージを使うとき、そのパッケージに型定義があるかどうかが重要です。型定義があると、エディターの補完やコンパイル時の型チェックが効くようになります。

型定義が同梱されているパッケージ

TypeScriptで書かれたパッケージや、型定義ファイル(.d.ts)を同梱しているパッケージは、インストールするだけでそのまま使えます。

shell
npm install zod

shell
npm install zod

ts
import { z } from "zod";
 
// zの型情報が利用でき、エディターの補完が効く
const schema = z.number();

ts
import { z } from "zod";
 
// zの型情報が利用でき、エディターの補完が効く
const schema = z.number();

zodやdate-fnsなどは型定義が同梱されているパッケージの例です。

型定義が別パッケージのもの

JavaScriptで書かれたパッケージの中には、型定義が別のパッケージとして提供されているものがあります。たとえば、WebフレームワークのexpressはJavaScriptで書かれており、型定義は@types/expressという別パッケージで配布されています。

このようなパッケージを使うには、パッケージ本体と型定義パッケージの両方をインストールします。

shell
npm install express
npm install -D @types/express

shell
npm install express
npm install -D @types/express

-Dオプションは、開発時にのみ必要な依存関係としてインストールするオプションです。型定義はTypeScriptのコンパイル時にだけ使われ、実行時には不要なため、-Dをつけてインストールするのが一般的です。

@types/で始まるパッケージは、DefinitelyTypedというコミュニティプロジェクトで管理されている型定義パッケージです。多くの有名パッケージの型定義がここで提供されています。

npmjs.comでの型定義の見分け方

npmjs.comのパッケージページでは、型定義の有無をアイコンで確認できます。

• TSアイコン ─ パッケージに型定義が同梱されています。追加のインストールは不要です。
• DTアイコン ─ @types/パッケージとして型定義が存在します。クリックすると、インストールするべき@typesパッケージ名がわかります。
• アイコンなし ─ 型定義が公開されていません。

型定義がないパッケージを使う場合

アイコンがないパッケージをTypeScriptで使いたい場合は、いくつかの対処方法があります。

1. // @ts-ignoreで一時的に型チェックを無視する: 手っ取り早い方法ですが、型安全性が失われるため推奨しません。
2. 自分で型定義ファイルを作る: プロジェクト内に.d.tsファイルを作成し、最低限の型情報を記述する方法です。
3. 別のパッケージを検討する: 同じ目的で型定義が充実しているパッケージがあれば、そちらを使うのも賢い選択です。

初学者の方は、まずはTSアイコンやDTアイコンがあるパッケージを優先的に選ぶことをお勧めします。

型定義ファイルの詳細については、次のページを参照してください。

📄️ 型定義ファイル

自身のプロジェクトでTypeScriptでコーディングする場合は型を宣言することにより、IDEやエディターの補完機能やコードチェックを行えます。しかし外部のパッケージ(npm)を利用する場合は型定義ファイルが含まれているとは限りません。

学びをシェアする

・パッケージはimport文でパッケージ名を指定して使う
・型定義同梱パッケージはそのまま利用可能
・型定義が別のものは@types/パッケージ名を追加する
・npmjs.comのTS/DTアイコンで型定義の有無を確認できる

『サバイバルTypeScript』より

この内容をXにポストする