TypeScriptとは？JavaScriptとの違いと基本の書き方を入門解説

TypeScriptは、JavaScriptに型の記述と静的な検査を加える言語です。変数に入る値や関数の引数を型で表すことで、実行前に間違いを見つけやすくなります。型を書けば、外部データや実行時の動作まで自動的に正しくなるわけではありません。

この記事では、基本の型、関数、インターフェース、クラスを小さな例で確認します。JavaScriptの変数、関数、オブジェクトの基本を知っている方向けです。環境の準備はTypeScriptのインストールを参照してください。

JavaScriptとの関係

TypeScriptのコードは通常、型チェックを行ってJavaScriptへ変換し、ブラウザーやNode.jsで実行します。型注釈やインターフェースのような型だけの記述は、生成されるJavaScriptから取り除かれます。公式の基礎解説

JavaScriptのライブラリも利用できます。ただし、TypeScriptが公開されているAPIを把握するには、ライブラリに同梱された型宣言や、別途提供される型定義が必要になる場合があります。

コンパイラの target で一部の構文を古いJavaScript向けに変換できますが、新しいAPIを古い環境に自動追加するわけではありません。例えば実行環境にないAPIを使う場合は、対応状況の確認や別の実装が必要です。

基本の型をコードで確認する

変数の型と型推論

以下を src/basic-values.ts に保存します。以降の例も、それぞれ独立したファイルとして扱います。

export {};

let published: boolean = false;
let views: number = 120;
let title: string = "TypeScript入門";

published = true;
views += 5;

let category = "TypeScript";
category = "JavaScript";

console.log(`${title}: ${views}回 / ${category} / 公開=${published}`);
// TypeScript入門: 125回 / JavaScript / 公開=true

category は初期値から string と推論されます。すべての変数へ型注釈を書く必要はありません。値が明確な箇所は推論を使い、関数の境界など意図を明示したい箇所へ型を書くと読みやすくなります。

string の変数へ数値を代入すると型エラーになります。この検査は開発時のもので、実行時に値を変換する処理ではありません。

関数の入力と出力を表す

src/basic-functions.ts の例です。

export {};

function formatViews(title: string, views: number): string {
  return `${title}は${views}回読まれました`;
}

console.log(formatViews("TypeScript入門", 125));
// TypeScript入門は125回読まれました

引数の型はそれぞれの名前の後ろ、戻り値の型は引数リストの後ろに指定します。戻り値の注釈を省略しても、この例では処理から string と推論されます。

インターフェースでオブジェクトの形を表す

interface は、オブジェクトに必要なプロパティと型を定義します。src/basic-interfaces.ts を作成します。

export {};

interface Author {
  name: string;
  articleCount: number;
}

function introduce(author: Author): string {
  return `${author.name}は${author.articleCount}本の記事を公開しています`;
}

const author: Author = {
  name: "葵",
  articleCount: 3,
};

console.log(introduce(author));
// 葵は3本の記事を公開しています

関数は、必要な形を満たす値を受け取ります。オブジェクトを特定のクラスで作る必要はありません。APIのレスポンスに Author と型を付けるだけでは、実際にそのプロパティが存在するかは検証されない点に注意してください。公式のオブジェクト型の説明

クラスで状態と処理をまとめる

クラスは、状態を保持するオブジェクトと、その状態を扱う処理をまとめる方法です。src/basic-classes.ts に保存します。

export {};

class ArticleCounter {
  private count = 0;

  constructor(public readonly authorName: string) {}

  publish(): void {
    this.count += 1;
  }

  getSummary(): string {
    return `${this.authorName}: ${this.count}本`;
  }
}

const counter = new ArticleCounter("葵");
counter.publish();
counter.publish();
console.log(counter.getSummary()); // 葵: 2本

コンストラクタの public readonly authorName は、引数を受け取ると同時に読み取り専用のプロパティを定義する書き方です。private や readonly はTypeScriptの型チェック上の制約です。ブラウザーへ渡したデータの秘匿や、オブジェクト全体の実行時の凍結を保証するものではありません。

オブジェクトを作る方法には、クラス以外にオブジェクトリテラルや関数もあります。状態を持つ必要や処理の関係に合わせて選べます。

実行して型チェックを試す

インストール記事の環境で、例えば最初のファイルを次のように実行します。サンプルはTypeScript 4.9.4の strict 設定で確認しています。

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

他の例を実行するときはファイル名を変更します。エディタで型に合わない代入を書いて、診断が表示されることも確認してください。型チェックで防げる間違いと、値の範囲や外部入力の検証が必要な箇所を分けて考えることが、実践への第一歩です。

TypeScriptを学ぶ目的と導入の判断

どのような開発に役立つか

画面の入力値、APIのデータ、共有する関数が増えるWebアプリでは、値の形を明記すると変更の影響を追いやすくなります。エディターの補完も利用できますが、型だけで業務ルールが正しいと保証されるわけではありません。

JavaScriptの知識と組み合わせる

配列、オブジェクト、関数、非同期処理の動きはJavaScriptの知識が土台です。TypeScriptを学びながら、それぞれの処理が実行時に何をするかも確認してください。最初は基本型と関数、次に型の絞り込みへ進むと理解を積み上げられます。

公式資料と関連記事

• TypeScript公式ドキュメント
• TypeScriptの型について
• TypeScriptの関数について
• TypeScriptのインターフェースについて

TypeScriptとは・学習順・目的別の記事一覧へ戻る