この記事では、Typescriptのモダンで便利な書き方を紹介していきます。これらのテクニックを使えば、より読みやすく、保守しやすいコードを書くことができます。
型エイリアスとインターフェースの使用
型エイリアスやインターフェースを使用すると、コード内の型の再利用性が高まります。型エイリアスは、特定の型への参照を作成するのに役立ちます。インターフェースは、オブジェクトの構造を定義するのに特に有効です。
type UserId = number;
interface User {
id: UserId;
name: string;
age: number;
}
const user: User = {
id: 1,
name: 'Alice',
age: 30
};ユーティリティ型の利用
TypeScriptには、既存の型を変換して新しい型を作成するためのユーティリティ型が多数用意されています。たとえばPartial<T>は、Tのすべてのプロパティをオプショナルにした型を作成します。
interface User {
id: number;
name: string;
}
const updateUser = (user: Partial<User>) => {
// 更新処理
};ユーティリティ型について詳しく知りたい方は、以下のページをご覧ください。
TypeScript 知っておくべき14個のユーティリティ型の使い方
ジェネリクスの活用
ジェネリックスを使用すると、型の再利用性が向上し、より柔軟な関数やクラスを作成することができます。
function merge<T, U>(obj1: T, obj2: U): T & U {
return { ...obj1, ...obj2 };
}
const mergedObj = merge({ name: 'John' }, { age: 25 });オプショナルチェインとnull合体演算子
オプショナルチェイン(?.)を使用すると、プロパティが存在しない場合にundefinedを返すことができます。null合体演算子(??)は、左辺の値がnullまたはundefinedの場合に右辺の値を返します。
interface User {
id: number;
name: string;
details?: {
age: number;
address?: string;
};
}
const user: User = {
id: 1,
name: 'Alice',
details: {
age: 30
}
};
const address = user.details?.address ?? '住所不明';アサーションの適切な使用
アサーション（型の強制）は、TypeScriptにおいて型安全を確保する上で重要な役割を果たしますが、乱用は避けるべきです。アサーションは、他の手段で型を保証できない場合に限って使用してください。
const someValue: any = "これは文字列です";
const strLength: number = (someValue as string).length;map関数
map関数は、配列の各要素に対して関数を実行し、その結果からなる新しい配列を作成します。TypeScriptでmapを使う場合、コールバック関数内のパラメータに型注釈を付けることで、さらに安全に利用できます。
const numbers: number[] = [1, 2, 3, 4];
const doubledNumbers: number[] = numbers.map((num: number) => num * 2); // [2, 4, 6, 8]reduce関数
reduceメソッドは、配列の各要素に対して（左から右に）関数を適用し、単一の出力値（累積値）を生成します。このメソッドは、合計や積の計算、配列内のオブジェクトの結合などに使用できます。
const numbers: number[] = [1, 2, 3, 4];
const sum: number = numbers.reduce((accumulator: number, currentValue: number) => accumulator + currentValue, 0);
console.log(sum); // 10forEach関数
forEachメソッドは、配列の各要素に対して指定されたアクションを実行します。このメソッドは返り値を持たず、主に副作用（例: ロギング、データの更新）を目的として使用されます。
const numbers: number[] = [1, 2, 3, 4];
numbers.forEach((num: number) => console.log(num)); // 1, 2, 3, 4 を順番に出力some関数
someメソッドは、配列内の少なくとも一つの要素が指定されたテスト関数を満たすかどうかをチェックします。このメソッドは、条件を満たす要素が見つかった時点でtrueを返し、処理を終了します。
const numbers: number[] = [1, 2, 3, 4];
const hasEvenNumber: boolean = numbers.some((num: number) => num % 2 === 0);
console.log(hasEvenNumber); // trueevery関数
everyメソッドは、配列のすべての要素が指定されたテスト関数を満たすかどうかをチェックします。全ての要素が条件を満たした場合にのみtrueを返します。
const numbers: number[] = [2, 4, 6, 8];
const allEven: boolean = numbers.every((num: number) => num % 2 === 0);
console.log(allEven); // true論理AND(&&)
論理AND演算子は、左辺が真の場合にのみ右辺を評価します。この特性を利用すると、条件に基づいて値を設定する際に便利です。
const isLoggedIn = true;
const welcomeMessage = isLoggedIn && 'Welcome back!';条件付き演算子(?と:)
条件付き演算子は、式の結果に基づいて二つの値のうちの一つを返す三項演算子です。この演算子を使用することで、簡潔に条件分岐を表現できます。
const age = 20;
const beverage = age >= 21 ? 'Beer' : 'Juice';
console.log(beverage); // 'Juice'厳格等価演算子(===)
TypeScriptでは、JavaScriptの標準的な比較演算子と同様に、厳格等価演算子(===)を使用することができます。この演算子は、値だけでなく型も含めて二つのオペランドが等しいかどうかを評価します。これは、JavaScriptにおけるより一般的な等価演算子(==)とは異なる点で、==は型変換を行った上での等価性を評価しますが、===は型変換を行わずに等価性をチェックします。
===と==の違い
==（抽象的等価演算子）は、比較する前にオペランドの型を変換します。例えば、"5" == 5はtrueを返しますが、これはJavaScriptが文字列の”5″を数値の5に変換してから比較するためです。===（厳格等価演算子）は、型変換を行わずに値を比較します。したがって、"5" === 5はfalseを返します。これは、一方が文字列で他方が数値であるため、型が異なると見なされるからです。
const number = 5;
const stringNumber = "5";
// 厳格等価演算子を使用した場合
console.log(number === number); // true: 値も型も同じ
console.log(number === stringNumber); // false: 値は同じだが、型が異なる
// 抽象的等価演算子を使用した場合
console.log(number == number); // true: 値も型も同じ
console.log(number == stringNumber); // true: 値が同じで、型変換後も等しいまとめ
これらの関数や記法を使うことで、TypeScriptのコードをより簡潔に、そして読みやすく保つことができます。特に、オプショナルチェーンや非nullアサーションなどは、null安全性を確保する上で非常に便利なツールです。これらのテクニックを活用して、より効率的なTypeScriptコードを書きましょう。
