TypeScriptとは？
TypeScriptは、JavaScriptに型安全性を追加し、よりスケーラブルで保守性の高いコードを書けるようにする言語です。
本ガイドでは、TypeScriptの基本から応用までを詳しく解説し、実践的なコード例を交えて理解を深めていきます。
TypeScriptは、JavaScriptを拡張したプログラミング言語です。JavaScriptと互換性を持ちながら、型定義を導入することで、より堅牢なコードを実現できます。
TypeScriptのメリット
- 型安全性: コンパイル時に型の問題を特定できる
- 開発効率の向上: コード補完やリファクタリングを容易に
- 保守性の向上: 大規模なプロジェクトでも管理しやすい
TypeScript環境のセットアップ
TypeScriptを実際に使うために環境設定を行います。開発にViteを使用し、Reactプロジェクトの中でTypeScriptを活用しましょう。
Viteを使ったTypeScriptプロジェクトの作成
まず、新しいViteプロジェクトを作成し、TypeScriptを有効にします。
npm create vite@latest my-app --template react-ts
cd my-app
npm install
npm run devこの手順を完了すると、TypeScriptをサポートしたReactプロジェクトが作成され、ローカルサーバーで実行できる状態になります。
TypeScriptの基本概念
型アノテーション
TypeScriptでは、変数や関数の引数に対して型を明示することができます。
let userName: string = "toyota";
let userAge: number = 20;
let isAdmin: boolean = false;これにより、例えばuserNameに数値を代入しようとするとエラーを検出できます。
型推論
TypeScriptでは、明示的に型を指定しなくても、値から型を推論できます。
let message = "Hello"; // TypeScriptは `message` の型を "string" と推論
let count = 42; // `count` は "number" と推論
ただし、型が明確でない場合は型アノテーションを使用する方が良いでしょう。
TypeScriptの高度な型
ユニオン型とany型
TypeScriptでは、特定の型または複数の型を指定することが可能です。
let userId: string | number;
userId = "abc123";
userId = 30;
// userId = true; // エラー: boolean は許可されていないまた、any 型を使用すると、型チェックを無効化できますが、可能な限り避けるべきです。
let unknownValue: any;
unknownValue = "hello";
unknownValue = 30;unknown型 – any型より安全な選択
unknown型を使うと、値の型を明確にする前に型のチェックを要求できます。
let inputData: unknown;
inputData = "TypeScript";
if (typeof inputData === "string") {
console.log(inputData.toUpperCase()); // 正しく動作
}オブジェクトと配列
TypeScriptでは、オブジェクトの型を指定できます。
let user: { name: string; age: number } = { name: "John", age: 25 };また、配列の各要素の型を指定することも可能です。
let scores: number[] = [90, 80, 85];
scores.push(100);関数の型
関数の引数と戻り値の型を指定できます。
function add(a: number, b: number): number {
return a + b;
}また、オプションのパラメータやデフォルト値を設定することも可能です。
function greet(name: string, greeting: string = "Hello"): string {
return `${greeting}, ${name}`;
}
console.log(greet("Honda")); // Hello, Honda
console.log(greet("Suzuki", "Hi")); // Hi, Suzuki関数のvoid型
戻り値を持たない関数には、voidを使用します。
function logMessage(message: string): void {
console.log(message);
}ジェネリクス
ジェネリクスを使うと、汎用性の高い型安全なコードを記述できます。
function identity<T>(value: T): T {
return value;
}
console.log(identity<number>(25)); // 25
console.log(identity<string>("Hello")); // Hello配列にも適用できます。
function reverseArray<T>(items: T[]): T[] {
return items.reverse();
}
console.log(reverseArray([1, 2, 3])); // [3, 2, 1]
console.log(reverseArray<string>(["x", "y", "z"])); // Output: ["z", "y", "x"]インターフェースと型エイリアス
インターフェース
オブジェクトの構造を定義するためにinterfaceを使用します。
interface User {
name: string;
age: number;
}
let user1: User = { name: "Tanaka", age: 30 };また、インターフェースは extendsを使って拡張できます。
interface Employee extends User {
position: string;
}
let employee: Employee = { name: "Bob", age: 40, position: "Manager" };型エイリアス
型エイリアス（type）を使用すると、名前付き型を定義できます。
type User = { name: string; age: number };
let user4: User = { name: "John", age: 22 };また、ユニオン型や交差型を定義できます。
type Admin = { role: string };
type UserAdmin = User & Admin; // `User` と `Admin` を組み合わせる
let adminUser: UserAdmin = { name: "Sam", age: 35, role: "Admin" };TypeScriptのその他の概念
列挙型（Enum）
列挙型を使うと、特定の固定値に名前を付けることができます。
enum OrderStatus {
Pending, // 0
Shipped, // 1
Delivered, // 2
}
let status: OrderStatus = OrderStatus.Shipped;
console.log(status); // 1タプル（Tuple）
タプルを使うと、異なる型を持つ配列を定義できます。
let person: [string, number] = ["Sato", 35];
console.log(person[0]); // Sato
console.log(person[1]); // 35never型
never型は決して値を返さない関数に使われます。
function raiseError(message: string): never {
throw new Error(message);
}まとめ
TypeScriptは型安全性を提供し、JavaScriptの欠点を補う強力なツールです。
本記事では、基本的な型アノテーションからジェネリクス、インターフェース、型エイリアスまで解説しました。
TypeScriptを活用すれば、より堅牢で保守性の高いコードを書けるようになります。
以下のリンクでは、JavaScriptに関する記事をまとめています。各記事をクリックして、詳しい情報をご確認ください。
