TypeScript 入門
1. はじめに
現代のWeb開発では、コードの信頼性や保守性が求められます。JavaScriptはその柔軟性から非常に人気のある言語ですが、大規模なプロジェクトになると、型がないために予期せぬエラーが発生しやすいという課題もあります。そこで登場するのが TypeScript です。
TypeScriptは、JavaScriptのスーパーセットとして設計されており、静的型付けを導入することで、開発中に多くのエラーを事前に防ぐことができます。この記事では、TypeScriptの基本を丁寧に解説し、次のReact入門記事へと繋がる知識を身につけていきます。
2. TypeScriptとは？
TypeScriptは、Microsoftによって開発されたオープンソースのプログラミング言語で、JavaScriptに静的型付けやクラスベースのオブジェクト指向の概念を追加したものです。
TypeScriptの特徴
- 静的型付け
変数や関数に型を明示することで、実行前に型エラーを検出でき、予期せぬバグを減らします。 - JavaScriptのスーパーセット
既存のJavaScriptコードはそのまま有効なTypeScriptコードとなるため、徐々に導入しやすいです。 - 優れた開発ツールのサポート
型情報に基づいた自動補完、リファクタリング支援、エラー検出が行われ、開発効率が向上します。
3. 開発環境の整え方
TypeScriptを始めるには、以下の環境が必要です。
3.1 Node.js のインストール
まずは Node.js をインストールしてください。Node.jsをインストールすると、パッケージマネージャーであるnpmも利用可能になります。
3.2 TypeScriptのインストール
npmを使ってTypeScriptのコンパイラ（tsc）をグローバルにインストールします。
npm install -g typescript
3.3 プロジェクトの初期設定
新しいプロジェクト用のフォルダを作成し、以下のコマンドでTypeScriptの設定ファイルを生成します。
mkdir my-typescript-project
cd my-typescript-project
tsc --init
生成される tsconfig.json には、コンパイルオプションなどの設定が含まれています。例えば、以下のような設定になっていることが多いです。
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"outDir": "./dist"
},
"include": ["src/**/*"]
}
この設定により、src フォルダ内のTypeScriptファイルがコンパイルされ、dist フォルダに出力されます。
4. TypeScriptの基本文法
ここでは、JavaScriptとの違いも交えながら、TypeScriptの基本的な文法を見ていきます。
4.1 型アノテーションと型推論
TypeScriptでは、変数や関数の引数、戻り値に対して型を明示的に指定できます。
例：関数に型を付ける
function greet(name: string): string {
return `こんにちは、${name}さん！`;
}
console.log(greet("太郎")); // 出力: こんにちは、太郎さん！
このように、name 引数には文字列型（string）を、戻り値にも文字列型を指定しています。型が一致しない場合は、コンパイル時にエラーが発生します。
また、TypeScriptは型推論も行うため、明示的な型指定を省略しても、変数の型が自動的に推測される場合もあります。
例：型推論
let age = 25; // TypeScriptは age を number 型と推論する
age = "25"; // この場合、コンパイルエラーになる
4.2 インターフェイスと型エイリアス
オブジェクトの構造を定義する際、インターフェイスや型エイリアスを使用します。
インターフェイスの例
interface Person {
name: string;
age: number;
}
const bob: Person = { name: "Bob", age: 25 };
console.log(bob);
型エイリアスの例
type Coordinate = {
x: number;
y: number;
};
const point: Coordinate = { x: 10, y: 20 };
console.log(point);
この二つの違いは小さいものですが、以下の３つがあります
- 型エイリアスは右辺に形状以外に型の式が定義できる。
type NumberOrString = number | string;
- インターフェイスを拡張する場合、拡張元が拡張先に割り当て可能かどうかチェックする
インターフェイス同士を継承（拡張）する場合、拡張元のインターフェイスの内容が、拡張先に正しく代入できるかどうかがコンパイル時にチェックされます。 - intefaceには、宣言のマージと呼ばれる機能がある。
同じ名前のインターフェイスを複数回定義すると、TypeScriptはこれらを自動的にマージ（合体）して1つのインターフェイスとして扱います。
4.4 クラス
TypeScriptでは、JavaScriptのクラス構文を拡張して、型情報を持たせることができます。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number): void {
console.log(`${this.name} moved ${distance}m.`);
}
}
const dog = new Animal("ポチ");
dog.move(10);
4.5 ユニオン型とジェネリクス
ユニオン型
変数に複数の型を許容したい場合、ユニオン型を使います。
let id: string | number;
id = "abc123";
id = 98765;
ジェネリクス
再利用性の高い関数やクラスを作成する際、型をパラメータ化できるジェネリクスも強力な機能です。
function identity<T>(arg: T): T {
return arg;
}
console.log(identity<string>("Hello"));
console.log(identity<number>(123));
5. コンパイルと型チェック
TypeScriptのコードは、まずJavaScriptにコンパイル（トランスパイル）されてから実行されます。コンパイル時に型チェックが行われるため、誤った型の使用があればエラーとして報告されます。
5.1 コンパイル方法
プロジェクトのルートで以下のコマンドを実行すると、tsconfig.json の設定に基づいてコンパイルが実行され、指定された出力先にJavaScriptファイルが生成されます。
tsc
また、ファイル単位でコンパイルする場合は、以下のようにします。
tsc filename.ts
6. 型定義ファイルと外部ライブラリの利用
JavaScriptの豊富なライブラリをTypeScriptで利用する場合、ライブラリ側の型定義ファイル（*.d.ts）が必要です。多くの場合、DefinitelyTyped プロジェクトを通じて型定義が提供されており、npmを使って簡単に導入できます。 例えば、Node.jsの型定義をインストールするには以下のようにします。
npm install --save-dev @types/node
これにより、Node.jsのAPIをTypeScriptで利用する際に、型情報が補完され、エラー検出も強化されます。
7. まとめ
この記事では、TypeScriptの基本概念から始まり、以下のポイントについて解説しました。
• TypeScriptとは？
JavaScriptに静的型付けやオブジェクト指向の機能を追加した言語で、コードの信頼性と保守性を向上させます。
• 環境構築とコンパイルの仕組み
Node.jsとnpmを利用したTypeScriptのインストール、tsconfig.json を使ったプロジェクト設定、コンパイル方法について学びました。
• 基本文法と型システム
型アノテーション、基本的なデータ型、インターフェイス、クラス、ユニオン型、ジェネリクスなど、TypeScriptならではの文法と機能を理解しました。
TypeScriptを導入することで、開発中のエラーを早期に発見でき、またコードの可読性や保守性が大幅に向上します。これにより、より大規模なプロジェクトでも安心して開発を進めることが可能となります。
次回はいよいよ React について解説します！
担当：生駒
Discussion