トップ > TypeScript > 【初心者向け】TypeScript 入門編（インストール～テスト）

【初心者向け】TypeScript 入門編（インストール～テスト）

TypeScript 初心者向け プログラミング
記事タイトルとURLをコピーする

はじめに

こんにちは、アプリケーションサービス本部 ディベロップメントサービス１課の北出です。
これまでプログラミングはほぼPython一筋だったのですが、フロントエンドもできるようになりたいなどの理由でTypeScriptをメイン言語にシフトしていくようになりました。
なので今回は、TypeScript未経験の自分がとりあえずインストールしてテストまでやってみたのでその内容を紹介します。
最初ということで、まずはバックエンドのNode.jsのプロジェクトを仮定して進めます。
ほぼ Type Script Deep Diveのトレースになります。

TypeScript とは

TypeScriptとは、JavaScript を拡張して作られた言語で、昨今人気も急上昇しています。
Python との違いは、構文などもありますが、一番は型システムだと思います。
Pythonは動的型付けで、明示的に型を指定しなくとも動作しますが、TypeScript は以下のように変数宣言時に型を指定する必要があります。

let a: number = 1;
const b: number = 2;

動的型付けのほうが書きやすさとしては上だと思いますが、バグにもつながる原因にもなりますので、できれば型は強制されているほうがいいかなと個人的には思います。
レビューの観点もその分減るので。

プロジェクト作成

WSLの環境で以下のコマンドでNode.jsをインストールしました。バージョンが出力されれば大丈夫です。

sudo apt-get install nodejs npm
node -v
npm -v

無事にインストールできたらまずは以下のコマンドを実行します。

npm init -y

このコマンドで、プロジェクトの設定ファイルの package.json が作成されます。

次に以下のコマンドで、TypeScriptをインストールします。

npm install typescript --save-dev

実行できると、 package.json に以下が追加され、 package-lock.json と node-modules フォルダが作成され、TypeScriptがインストールされていることが確認できます。

  "devDependencies": {
    "typescript": "^5.8.2"
  }

次に以下のコマンドで Node.js のプログラムに必要な方宣言ファイル node.d.ts をインストールします。

npm install @types/node --save-dev

このコマンドを実行することで、 関数の引数に間違った型の値を渡そうとしたり、存在しないプロパティにアクセスしようとしたりすると、コードを書いている最中やコンパイル時にエラーとして検出できます。
また、 --save-dev をオプションにつけることで、このパッケージが開発時依存として記録され、コンパイル後の実行時には扱われないようになります。

次に以下のコマンドで TypeScript の設定ファイル tsconfig.json を初期化します。

npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

このコマンドは、npx を使ってTypeScriptコンパイラ (tsc) の初期化機能 (--init) を実行し、指定されたオプションに基づいて tsconfig.json ファイルを生成する という意味になります。

生成される tsconfig.json は、以下のような設定を持つプロジェクトの初期設定となります。

  • ソースファイルは src ディレクトリに配置する (rootDir)。
  • コンパイル結果は lib ディレクトリに出力する (outDir)。
  • ES Module と CommonJS の相互運用性を高める (esModuleInterop)。
  • JSON ファイルのインポートを許可する (resolveJsonModule)。
  • ES2015 と DOM のAPIを前提として型チェックを行う (lib)。
  • 出力するJavaScriptは CommonJS モジュール形式にする (module)。

サンプルプログラム作成

mkdir src でsrc/ ディレクトリを作成し、作成したディレクトリに空の index.ts を作成します。 index.ts の中身を以下のようにします。

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

if (require.main === module) {
  console.log(add(2, 3)); // 例: 2 + 3 の結果を出力
}

以下のコマンドで TypeScript をコンパイルします。

npx tsc

tsconfig.json で定義されているように、 rootDir にあるプログラムをコンパイルし、 outDir のディレクトリに .js ファイルにして出力します。
コンパイルされた JavaScript コードは以下のコマンドで実行できます。

node lib/index.js

サンプルプログラムの場合、5 が出力されます。

便利な方法

開発中などはコンパイルを明示的に行わずに直接 .ts ファイルを実行できる ts-node が便利です。
以下のコマンドで ts-node を開発依存としてインストールできます。

npm install ts-node --save-dev

インストール後、以下のコマンドで直接 .ts ファイルを実行できます。

npx ts-node src/index.ts

テストの実施

TypeScript のテストには Jest というフレームワークを使うのが一般的なようなのでそれに従います。

まずは以下のコマンドでインストールします。

npm i jest @types/jest ts-jest -D

i や -D はそれぞれ、install と --save-dev の短縮形になります。

次にプロジェクトのルートディレクトに以下の jest.config.js ファイルを作成します。

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
}

roots 部分は src フォルダを探索の起点とすることで、 node_modules などを無駄にスキャンすることを防ぎます。
testMatch 部分はテストファイルとして認識するための定義になります。
"**/__tests__/**/*.+(ts|tsx|js)" は、プロジェクト内のどこにあっても、 __tests__ という名前のフォルダの中（サブフォルダ内を含む）にある、拡張子が .ts, .tsx, .js のいずれかのファイルが対象になります。
"**/?(*.)+(spec|test).+(ts|tsx|js)" は、プロジェクト内のどこにあっても、ファイル名（拡張子の直前）に .spec または .test が含まれる、拡張子が .ts, .tsx, .js のいずれかである全てのファイルが対象になります。 (例: myFunction.test.ts, Component.spec.tsx, utils.test.js)。
"transform" によって、Jest が ts-jest を通じて、実行時に JavaScript` に変換してテストを実行します。

テストファイルの作成

src/ ディレクトリ配下に __tests__ ディレクトリを作成し、以下の内容の任意の名称の .ts ファイルを作成します。

import { add } from "../src/index";

test("adds 1 + 2 to equal 3", () => {
  expect(add(1, 2)).toBe(3);
});

作成後、テストを実行します。

テストを実行する。

以下のコマンドでテストを実行します。

npx jest

また、package.json のscriptを以下のように修正することで、npm test や npm t でテストを実行することができます。

  "scripts": {
    "test": "jest"
  }

その他

Gitの利用

.gitignoreについて

node_modules/ディレクトリをコミット対象外にする

node_modules/ディレクトリは非常に多くのファイルを含み、数100MB ~ 数GBになることもあります。これをGitに含めるとリポジトリが重くなり、クローンやプル、プッシュに時間がかかるようになります。
また、node_modules の中身は、package.json とpackage-lock.json の内容に基づいて、 npm install すれば、同じ状態を再現できます。

TypeScript のコンパイル結果をコミット対象外にする

今回の例でいう、lib/ 配下の .js ファイルはTypeScript をコンパイルしたものであり、Gitにコミットする必要のないものなので、こちらも tsconfig.json の outDir に合わせて対象外にすることを推奨します。

Gitで最低限気を付けること

ここまででGitを使って複数人で開発するときに気を付けることは以下になります。

  • .gitignore について
    • node_modules/ ディレクトリを対象外にする
    • TypeScriptのコンパイル結果の.jsファイルがあるディレクトリを対象外にする
  • プル時には必ず、npm install する習慣をつける

おわりに

TypeScriptが全くの初心者ということで、まずはプロジェクトの始め方についてまとめてみました。
インストール手順などで参考になれば幸いです。
ここから徐々にTypeScriptの発展的な内容について作成していけたらと思います。

北出 宏紀(執筆記事の一覧)

アプリケーションサービス本部ディベロップメントサービス3課

2024年9月中途入社です。