SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptの限界を超える!TypeScript初めの一歩

【TypeScriptの基礎を学ぶ】外部ライブラリを安全に使いこなす!型定義の扱いとエコシステムの活用法

JavaScriptの限界を超える!TypeScript初めの一歩 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Node.jsの型

 実は、Node.js自体にも型がないです。そのため、TypeScriptでNode.jsのモジュール群を利用したい場合は、Node.jsの型を導入する必要があります。Node.jsの型は、次のコマンドで導入できます。

npm install --save @types/node

@types/node - npm

 それでは少し、TypeScriptとNode.jsを使ったプログラムを書いてみましょう。

実践1:Node.jsプロジェクトに型定義を追加する

 サンプルのプロジェクトを作ります。package.jsonnpm init -yで作り、手動で修正します。また、tsconfig.jsonnpx tsc --initで作り、手動で修正します。そして、フォルダーやファイルを次のような構成にします。

▶ファイル構成

  • プロジェクトのルート/
    • dist/
    • src/
      • index.ts
    • package.json
    • tsconfig.json

 package.jsonの中身を示します。

package.json
{
  "name": "with_node",
  "version": "1.0.0",
  "main": "dist/index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

 tsconfig.jsonの中身を示します。

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2024",
    "module": "ESNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,

    "rootDir": "./src",
    "outDir": "./dist",
    "moduleResolution": "node",
  },
  "include": ["src"]
}

 そしてindex.tsに、次のようなコードを書きます。

import fs from "node:fs";

let t = fs.readFileSync("tsconfig.json", 'utf8');
let lines = t.replace(/\n/g, '').split("\n");
lines = lines.slice(0, 3);
lines.forEach(line => console.log(line));

 シンプルなコードですが、最初の行のnode:fsと、最後の行のlineにエラーが表示されます。

 エラーの内容は、最初の行のnode:fsは、Cannot find module 'node:fs' or its corresponding type declarations.(モジュール 'node:fs' またはそれに対応する型宣言が見つかりません。)です。

 最後の行のlineは、Parameter 'line' implicitly has an 'any' type.(パラメータ 'line' は暗黙的に 'any' タイプを持ちます。)です。

 処理の基点であるfs.readFileSyncに戻り値の型がないためにany型と見なされ、後続の全ての処理がany型として処理されているのが原因です。

 それでは、このプロジェクトにNode.jsの型を導入しましょう。プロジェクトのルートでターミナルを開き、次のコマンド実行します。

npm install --save @types/node

 node_modules/@types/nodeの中に型定義ファイルがダウンロードされて利用可能になります。

 先ほどのコードのfs.readFileSyncにマウスカーソルを重ねてください。戻り値の型注釈が: stringになっています。また、lineにマウスカーソルを重ねると(parameter) line: stringと表示されて、型を正しく推論されるようになったのが分かります。

実践2:型定義が同梱されたパッケージを利用する

 続いてきちんと型定義があるパッケージを導入して利用してみましょう。日時を扱うdayjsをインストールします。

npm install dayjs --save

dayjs - npm

 そして、src/index.tsの末尾に次のコードを足します。

import dayjs from 'dayjs';

const now: dayjs.Dayjs = dayjs();
const formatted: string = now.format('YYYY-MM-DD');
console.log(formatted);

 dayjs()の戻り値として、dayjs.Dayjs型の値が取得でき、安全に処理をおこなえることが分かります。

 node_modules/dayjs/package.jsonを見てみましょう。抜粋して掲載します。

  "main": "dayjs.min.js",
  "types": "index.d.ts",

 mainで指定されているエントリーファイルとは別に、typesで型定義ファイルを書いているのが分かります。

 このように、型定義がないなら追加でインストールして、型定義があるならそのまま利用できます。

 @typesで適切な型がない場合は、前回作成したように自作することも可能です。

次のページ
第2章 TypeScriptの開発を加速するエコシステム

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptの限界を超える!TypeScript初めの一歩連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/21599 2025/10/02 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング