TypeScriptとは？JavaScriptとの違い・入門から実践までの学習ガイド

TypeScriptとは何か

JavaScriptに静的な型チェックを加える言語

TypeScriptはMicrosoftが中心となって開発するオープンソースの言語です。JavaScriptの変数、関数、配列、クラスなどの仕組みを土台に、値の種類やオブジェクトの形を型として記述できます。既存のJavaScriptの知識を使いながら、関数の入力や戻り値を明確にできます。

静的な型チェックとは、プログラムを実行する前に、コード上の値の使い方を検査することです。例えばtitleがstringなら、数値専用のメソッドを呼ぶ記述は診断の対象になります。入力値の長さ、金額の上限、アクセス権限など、業務上の正しさをすべて自動判定する仕組みではありません。

型の情報はどこで使われるのか

エディターの補完、定義への移動、コンパイラの診断に使われます。型注釈やinterfaceは通常、JavaScriptへの変換時に取り除かれます。実行される処理はJavaScriptなので、ブラウザーのイベントやNode.jsの通信の動きも学ぶ必要があります。

全体を短いサンプルで確認するにはTypeScriptの入門記事、言語の位置づけはTypeScript公式サイトを参照してください。

JavaScriptとの違いと導入の判断

型チェック・ファイル・実行の違い

JavaScriptでは実行時の値に応じて動作が決まります。TypeScriptを導入すると、実行時の動作に加えて、開発中に型の整合性を確認できます。通常のソースファイルは.ts、JSXを含むファイルは.tsxを使います。型宣言だけを提供する.d.tsは、実際の処理を実行するファイルではありません。

JavaScriptのライブラリも利用できますが、公開APIの型が同梱されているか、別途型定義が必要かを確認します。また、JavaScriptとして実行できるコードでも、TypeScriptの検査では修正を求められる場合があります。「拡張子を変えれば、どのコードも診断なしで使える」という意味ではありません。

メリットが大きい場面と必要な作業

複数人が同じデータを扱う開発、長期間保守するシステム、多数のコンポーネントやAPIを持つアプリでは、変更した型から影響を追えることが役立ちます。例えば会員データの項目名を変えたとき、古い名前を読む箇所を型チェックで発見できます。

一方、型設計の学習、依存ライブラリとの整合、ビルド設定の保守は必要です。短い使い捨てスクリプトまで同じ構成にする必要はありません。変更頻度、チーム人数、障害の影響に合わせて導入範囲を決めましょう。既存のJavaScriptを残しながら進める方法は、公式の移行ガイドに説明があります。

TypeScriptでできることと開発分野

フロントエンドとWebアプリ

画面の入力データ、コンポーネントへ渡す値、通信中・成功・失敗といった状態を型で表せます。ReactなどでJSXを書く場合は、フレームワークに合った設定と型定義を使います。TypeScript自体が画面表示や状態更新を実装するフレームワークになるわけではありません。

例えば記事一覧のコンポーネントがtitleとidを必要とするなら、受け取るデータの形を明示できます。ただし型が正しくても、要素の配置、操作性、通信が失敗したときの表示まで確認が必要です。公式のJSX解説で、JSXと型検査の関係を確認できます。

バックエンドと共通ロジック

Node.jsで動くAPI、データ変換、バッチ処理にも利用できます。フロントエンドとバックエンドで型定義を共有すると、データの変更を追いやすくなります。ただしデプロイのタイミングが異なる場合や、外部のクライアントから値を受け取る場合は、共有する型だけを信頼できません。

サーバーは受け取ったリクエストを検証し、認証・認可や業務ルールを適用します。共通の型は契約を説明する手段として使い、実際の入力に対する検証と組み合わせます。実践的な型設計では、外部データと画面状態を分けて実装しています。

環境構築から最初の実行まで

まずはPlaygroundで型を確かめる

インストール前に短い例を試すなら、公式のTypeScript Playgroundが利用できます。型を確認したいコードを入力し、コンパイラの診断と生成されるJavaScriptを比べてください。共有するコードにはパスワード、トークン、個人情報を含めないようにします。

エディターやPlaygroundと実プロジェクトで診断が違う場合は、TypeScriptのバージョンとstrictなどの設定を揃えます。このサイトの既存サンプルはTypeScript 4.9.4で確認しているため、新しいバージョンでは診断や推論が変わる場合があります。

npmで導入してJavaScriptを生成する

Node.jsとnpmを用意し、学習用の空のフォルダーで次のコマンドを実行します。TypeScriptをプロジェクトの開発用依存関係へ追加し、使うバージョンを確認します。

npm init -y
npm pkg set type=commonjs
npm install --save-dev typescript
npx tsc --version

続いてhello.tsを作成します。

function greeting(name: string): string {
  return `こんにちは、${name}さん`;
}
console.log(greeting("TypeScript"));

次のコマンドは、設定ファイルを使わずにhello.tsを型チェックし、JavaScriptへ変換します。正常に終了した後で出力を実行してください。

npx tsc hello.ts --strict --target ES2020 --module NodeNext --outDir dist --noEmitOnError
node dist/hello.js

結果は「こんにちは、TypeScriptさん」です。greeting(123)に変えると、数値を文字列の引数へ渡しているため型エラーになります。修正してから再度コンパイルします。エラー時に以前の出力が残っている場合があるので、出力ファイルの存在だけでビルド成功を判断しないでください。

詳しい手順はインストールと環境構築、仕組みはコンパイル方法、導入方法の原典は公式のセットアップ案内を参照してください。

基本型と関数をコードで理解する

string・number・booleanと型推論

stringは文字列、numberは数値、booleanは真偽値を表します。string[]は文字列の配列です。型は変数名の後ろに記述しますが、初期値などから分かる箇所では型推論を利用できます。すべてのローカル変数へ同じ型注釈を繰り返す必要はありません。

次の例をarticle.tsとして保存できます。先ほどのコマンドの入力をarticle.ts、実行する出力をdist/article.jsに変更すると、表示結果を確認できます。

type Article = {
  title: string;
  views: number;
  published: boolean;
  tags: string[];
};

function label(article: Article): string {
  const status = article.published ? "公開" : "下書き";
  return `${article.title}: ${article.views}回・${status}`;
}

const article: Article = {
  title: "型を学ぶ",
  views: 12,
  published: true,
  tags: ["TypeScript"],
};
console.log(label(article)); // 型を学ぶ: 12回・公開

オブジェクト・関数・任意項目

オブジェクトの形にはtypeやinterfaceを使えます。関数では引数と戻り値の型を表し、コールバックの契約も記述できます。任意項目はnickname?: stringのように定義し、読み取り時は値がない場合の処理を考えます。

numberだけで正の整数や価格の上限を表せるわけではありません。また、フォームの値は文字列として受け取ることが多く、数値への変換処理も必要です。型の範囲と実際の値の条件を区別しましょう。

基本型の一覧と使い分け、関数の引数・戻り値、interfaceとtypeの違いへ進むと、それぞれの実装を試せます。公式資料はEveryday Typesです。

型エラーの読み方と解決方法

代入できないと言われた場合

まず「渡している値の型」と「受け取り側が求める型」を確認します。数値が必要な場所へ文字列を渡しているなら、入力形式を確認して変換するか、受け取り側の仕様を見直します。理由を確認せずanyやasで診断を消すと、問題を実行時まで見逃すことがあります。

asは値を変換する命令ではありません。例えば文字列にas numberを書けば数値になる、という使い方はできません。実際に変換する処理と、不正な入力を拒否する処理を用意してください。

nullやundefinedの可能性を指摘された場合

存在しない値にメソッドを呼ぶ前に、分岐で扱いを決めます。次のformatName()では、省略された名前を「ゲスト」と表示します。nameが文字列だと分かる分岐だけでtrim()を呼んでいます。

function formatName(name: string | undefined): string {
  if (name === undefined) return "ゲスト";
  const trimmed = name.trim();
  return trimmed === "" ? "ゲスト" : trimmed;
}
console.log(formatName(undefined)); // ゲスト
console.log(formatName(" 葵 ")); // 葵

if (count)は0も除外するため、値の有無だけを調べる場合には適さないことがあります。条件分岐による型の絞り込みはユニオン型と型ガード、公式の説明はNarrowingを参照してください。

importや設定のエラーが出た場合

ファイルが見つからないなら、パス、拡張子、大文字小文字、package.jsonのモジュール設定を確認します。コンパイルできても実行時に読み込みが失敗する場合は、生成されたJavaScriptの参照先も調べます。モジュールとimport・exportに、複数ファイルで動く例があります。

tscへ入力ファイルを直接指定した場合はtsconfig.jsonを読みません。設定を使って検査するならnpx tsc -p tsconfig.json --noEmitのように実行します。対象ファイルや厳密な検査はtsconfigとstrictの設定で確認できます。

実務で使う型設計と応用機能

ジェネリクスとユーティリティ型

ジェネリクスは、入力と出力の型の関係を保って共通処理を作る仕組みです。数値配列から取り出した要素は数値、文字列配列なら文字列として利用したい場合に役立ちます。何でもanyにするより、呼び出し元へ必要な型情報を残せます。ジェネリクスの記事で、空配列や制約も含めて試せます。

一つのデータ型から、登録用・更新用・表示用の型を導くにはユーティリティ型が使えます。Pickは項目の選択、Omitは型からの除外、Partialは任意項目化、Recordはキーと値の対応、Readonlyは読み取り専用の制約を表します。これらは実データを削除したり、実行時にオブジェクトを凍結したりする処理ではありません。用途別の使い分けと公式リファレンスを確認してください。

クラス・非同期処理・状態管理

状態とその更新手順をまとめる場合はクラス、既存の契約を保って振る舞いを拡張する場合は継承が候補です。共通処理を再利用する方法には委譲もあり、オブジェクト指向設計で役割の分け方を確認できます。

通信などの非同期処理ではPromise<T>で成功した値の型を表します。失敗理由までTで指定されるわけではありません。Promiseとasync/awaitでは、待つ順序とエラー処理を扱います。画面の読み込み状態には、成功時だけデータを持つユニオンを使うと矛盾した状態を減らせます。

定数の定義から型を作るにはkeyof・typeof・as const、イベント名などの規則にはテンプレートリテラル型が使えます。まず困っている処理を一つ選び、その問題を解くために必要な型から導入してください。

学習ロードマップと到達目標

入門：型チェックと実行を区別できる

TypeScriptとはを読み、環境構築で最初のコードを実行します。次にコンパイルと基本型へ進みます。型を間違えたときの診断と、正しいコードの出力を両方説明できれば、次へ進めます。

基礎：複数ファイルでデータを扱える

関数、interface、モジュール、型ガードの順に確認します。入力値を受け取り、存在確認や変換を行い、別ファイルの関数で結果を返す小さなプログラムを作ってみてください。

実践：変更と失敗に対応できる

ジェネリクスとユーティリティ型で重複する型を整理し、非同期処理と型設計の実践へ進みます。項目を追加したときに診断で修正箇所を見つけ、通信失敗やデータ不足でも意図した結果を返せるか確認します。

進度を記事数だけで判断せず、サンプルの値を変えて結果を予測できるかを目安にしましょう。分からない処理は短い例へ切り出すと、型の問題とJavaScriptの動作の問題を切り分けられます。

よくある質問

JavaScriptを知らなくても学べますか？

並行して学べますが、変数、関数、配列、オブジェクト、非同期処理の知識は必要です。TypeScriptの型だけを覚えても、実行時の処理は説明できません。まず小さなプログラムを動かし、その入力と出力へ型を付けると理解しやすくなります。

TypeScriptならテストは不要ですか？

必要です。計算式の間違い、APIの不正な応答、画面の操作性などは型だけでは確認できません。型チェック、実行時の入力検証、自動テストをそれぞれの役割で使います。特に空データ、境界値、通信失敗時の動作を確認してください。

最新版にすればすべて解決しますか？

バージョン更新だけで設定や設計の問題が直るとは限りません。現在のバージョンを確認し、フレームワークや型定義との対応を調べ、型チェックとビルドを通して移行します。この記事では最新バージョンを固定的に断定せず、公式のリリース情報へ案内しています。

型が増えて読みにくい場合はどうしますか？

同じ型の繰り返しを共通化し、関数の責務を小さくします。推論できる箇所の型注釈や、使われていない型パラメーターも見直します。高度な型を使う場合は、どの不正な入力を防ぐのか、どの変更へ追従したいのかを短い説明と例で示してください。

公式資料の調べ方と学習の進め方

ガイドで理解し、リファレンスで確認する

TypeScript Handbookは仕組みを順に学ぶ入口です。短い例をPlaygroundで試し、エディターで推論された型を確認してから、自分のプロジェクトのバージョンと設定でも実行します。設定に迷った場合はTSConfig Referenceで、それぞれのオプションが何を変えるかを確認してください。

既存プロジェクトへ小さく取り入れる

まず外部入力の境界か、複数箇所から使う関数を一つ選びます。入力と戻り値を型で表し、欠けた値の扱いを決め、正常時と失敗時の結果を確かめます。導入範囲を広げる際には、ビルド時間や診断の分かりやすさもチームで確認しましょう。以下の記事一覧から、実装したい内容に近いテーマを選んでください。