TypeScriptにおけるtype｜型定義の基礎から応用まで

（最終更新月：2023年11月）

✔ 以下のような方に向けて書かれています

✔ 当記事でお届けする知識

• TypeScriptの型定義の基礎知識
• 型の正しい記述法とその豊富な活用方法
• 実際のコードサンプルを交えた、型定義の具体例

当記事では、単にTypeScriptの型の基本を説明するだけではなく、さまざまなデータ構造に適用する方法から高度な型利用テクニックまで、実際のコード例を通じて丁寧にガイドします。

TypeScriptの型がもたらす強力なコードの安全性と保守性を、この記事でしっかりと把握しましょう。

最後まで読んで、TypeScriptでの開発スキルを一層高めてください。

TypeScriptの型定義の概要

TypeScript の型定義について詳しく見ていきましょう。

型定義は、TypeScript を使用する上で核となる概念で、開発の生産性とコードの品質を向上させる重要な役割を担っています。

以下のトピックを通じて、型定義の基礎知識を身につけ、より良いコードを書くための第一歩を踏み出しましょう。

• 型定義の役割と導入
• JavaScriptからTypeScriptへの移行のメリット
• 型システムの理解と基本的な用語

型定義の役割と導入

型定義は、変数や関数の引数、戻り値に対して期待されるデータ型を明示する仕組みです。

これにより、コードの意図がはっきりし、エディタのオートコンプリート機能やエラーチェックが有効になります。

let age: number = 30;

変数ageに数値型を割り当てることで、数字以外のデータが代入された場合にエラーを検出します。

型定義の導入は、TypeScript ファイル（拡張子 .ts）を作成し、必要な型情報をコードに加えることから始まります。

JavaScriptからTypeScriptへの移行のメリット

JavaScriptからTypeScriptへの移行には、さまざまなメリットがあります。

• 型システムによるエラー検出により、バグの早期発見と修正が可能
• 大規模な開発プロジェクトにおいて、コードの自動リファクタリングや保守性の向上

TypeScript は、JavaScript の上位集合として機能します。

const greet = (name: string) => { return 'Hello, ' + name; };

既存のJavaScriptコードに型を追加することで、スムーズに導入できます。

型システムの理解と基本的な用語

型システムを理解することは、TypeScriptを効果的に使用する上で不可欠です。

型システムとは、コンパイル時に型の正しさを検証するルールの集合のこと。

基本的な用語としては、以下のようなものがあります。

• 型（Type）
• 型注釈（Type Annotation）
• 任意の型（Any）
• 未知の型（Unknown）

以下は、関数のパラメータに型注釈を追加する例です。

function add(x: number, y: number): number {
 return x + y;
}

関数addが数値型の引数を取り、数値型を返すことが明確になります。

基礎から学ぶTypeScriptの型

こちらでは、プリミティブ型から複雑な高度な型まで、TypeScriptにおける型の構成要素について説明します。

コードの効率性と正確性を高めるためには、以下のキーポイントを理解することが欠かせません。

• プリミティブ型から高度な型へ
• 型推論と明示的な型注釈
• タイプセーフティ (Type Safety) の基本

プリミティブ型から高度な型へ

TypeScriptにおいてプリミティブ型には、number、string、booleanなどの基本的なデータ型が含まれます。

以下のように、変数宣言時に型を指定し、使用可能です。

let isDone: boolean = false;

進んで高度な型では、より複雑なデータ構造を表現するために使われます。

• enum
• array
• tuple
• object

例として、列挙型を生成し、c変数にGreenを割り当てています。

enum Color { Red, Green, Blue }; 
let c: Color = Color.Green;

型推論と明示的な型注釈

TypeScriptでは、型推論によって変数や関数の返り値の型が自動的に決定される場合があります。

let message = 'Hello, World!';

変数に文字列を代入した時、TypeScriptが型をstringと推論することを意味します。

しかし明示的な型注釈を付けることで、より安全にコードが書けるのです。

型注釈を使用し、以下のように明確に変数の型を指定します。

let count: number = 10;

タイプセーフティ (Type Safety) の基本

タイプセーフティは、型の整合性を保証して実行時のエラーを防ぐことを指します。

TypeSafeなコードは、代入や関数呼び出しの各ステップで型が予期される型と一致するかをチェックしましょう。

function divide(x: number, y: number): number {
 if (y !== 0) { return x / y;
} else {
 throw new Error('Cannot divide by zero.'); 
} }

数値を引数に取り、0でないことを確認後に割り算をおこなう関数があり、これは型の仕組みを利用して安全性を確保しています。

TypeScriptの型一覧

TypeScriptの型システムは非常に柔軟で多様な型を提供しています。

以下は、いくつかの一般的な型とその説明、使用例を含む一覧表です。

型の名前	説明	例
string	文字列型。 文字列データを表します。	let name: string = "Alice";
number	数値型。 整数や浮動小数点数を表します。	let age: number = 25;
boolean	ブール型。 trueまたはfalseの値を持ちます。	let isActive: boolean = true;
Array	配列型。 同一型の要素を順序付きで格納します。	let numbers: number[] = [1, 2, 3];
Tuple	タプル型。 固定長の異なる型の要素を持つことができます。	let tuple: [string, number] = ["hello", 10];
enum	列挙型。 一連の固定値を定義するのに使用します。	enum Color {Red, Green, Blue}
any	任意型。 任意の型の値を表すことができます。	let uncertain: any = 4;
void	空の型。 主に関数が何も返さないことを示すのに使用します。	function warnUser(): void { alert("Warning");}
null	null型。 値が存在しないことを表します。	let empty: null = null;
undefined	undefined型。 初期化されていない変数などを表します。	let notInitialized: undefined = undefined;
object	オブジェクト型。 非プリミティブ型を表します。	let user: object = {name: "Alice", age: 25};
never	決して発生しない値の型。 主にエラー処理関数などで使用します。	function error(message: string): never { throw new Error(message); }
unknown	不明な型。 anyより型安全な代替として使用します。	let notSure: unknown = 4;
union	ユニオン型。 複数の型のいずれか一つの値を持つことができます。	let mixed: string | number = "hello"; mixed = 5;
type alias	型エイリアス。 新しい名前で型を定義します。	type StringOrNumber = string | number;

これらの型は、TypeScriptの基本的なビルディングブロックを構成し、型安全なアプリケーションの開発に不可欠です。

各型は特定の目的と使用ケースを持っており、適切に使用することでコードの信頼性と保守性を高められるでしょう。

interfaceとtypeの基本

TypeScriptにおけるinterfaceとtypeは、コード内での型の定義に用いられる強力なツールです。

「interface」は、オブジェクトの形状を定義するのに使用され、「type」はより柔軟な方式でさまざまな型のエイリアスを作成するのに使われます。

• interfaceの概念と基本的な使い方
• typeの概念と基本的な使い方
• インターフェースと型エイリアスの初歩

interfaceの概念と基本的な使い方

interfaceは、オブジェクトの形状を定義する際に用いられます。

これは、特定の変数が特定のプロパティかメソッドを持っていることを契約するようなものです。

「interface」は以下のようにして使われます。

interface Person {
  name: string;
  age: number;
}

let employee: Person = {
  name: 'Alice',
  age: 30
};

このコードにより、employee変数はPersonインターフェースの形状に従っていることが保証されます。

typeの概念と基本的な使い方

対照的にtypeはより柔軟な型エイリアスを定義するのに使われます。

ほかの型の組み合わせや、特定のリテラルの型を定義するのに適しているものです。

type Point = {
  x: number;
  y: number;
};

let coord: Point = {
  x: 10,
  y: 20
};

Point型を使用して、座標の点を表すオブジェクトcoordの型エイリアスを作成しています。

インターフェースと型エイリアスの初歩

インターフェースと型エイリアスは似ていますが、いくつかの差異があります。

• interface: 拡張が可能で、継承によって新しいインターフェースを形成する
• type: マッピング型や条件型などの高度な型操作をおこなうことが可能

基本的な使用法を覚えた後は、これらの違いを理解し、状況に応じて最適なツールを選択するようにしましょう。

interfaceとtypeの違いを理解する

interfaceとtypeはどちらもTypeScriptで型を定義するための強力なツールですが、使い方も特徴も異なります。

限定された使用法から全体的な概念まで、これらの差異を詳細に掘り下げることで、より洗練されたコード設計が可能です。

• 機能と使い方の差分
• 継承と型のオーバーライド
• 同名の定義とマッピングタイプ

機能と使い方の差分

interfaceとtypeは似ていますが、機能面では違いがあります。

interfaceは主にオブジェクトの形状を定義し、宣言のマージが可能です。

これによって同じ名前のinterfaceが習合し、最終的な型定義が拡張されます。

一方でtypeは型エイリアスとして機能し、組み合わせ型やユニオン型、インターセクション型など、さまざまな型操作が可能です。

継承と型のオーバーライド

interfaceは継承を使用して、既存のインターフェースに基づいて新しいインターフェースを作成できます。

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square = <Square>{};
square.color = 'blue';
square.sideLength = 10;

ここではSquareインターフェースがShapeインターフェースを継承しています。

一方で、typeでは型エイリアスを拡張するのではなく、インターセクション型を使用して新しい型を組み合わせることが可能です。

同名の定義とマッピングタイプ

TypeScriptでは、同名のinterfaceを複数定義することによって、それらを習合させられます。

分散した場所でインターフェースを拡張することが可能です。

interface User {
  name: string;
}

interface User {
  age: number;
}

// User型はnameとageプロパティを両方持っています
let user: User = {
  name: 'Bob',
  age: 25
};

マッピングタイプを使用して新しい型を定義することで、既存の型に基づく新しい型を動的に生成できます。

type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

type User = {
  name: string;
  age: number;
};

type UserReadOnly = ReadOnly<User>;

// UserReadOnly型のプロパティは読み取り専用です
const userReadOnly: UserReadOnly = {
  name: 'Alice',
  age: 30
};

これらの機能を駆使することで、コード構造の柔軟性と保守性を高められます。

interfaceとtypeの使い分け

interfaceとtypeはどちらも有効な型定義の手法ですが、それぞれの特性を理解し、使用するシーンを選ぶことが重要です。

クリーンでメンテナンスしやすいコードを書くために、使い分けるべきシナリオを学びましょう。

• どちらをいつ使うか
• インターフェースの具体的な活用例
• 型エイリアスのベストプラクティス

どちらをいつ使うか

interfaceは、オブジェクトの型定義やクラスを実装する際に、明確な契約を提供するのに適しています。

また、継承が必要な場合や、サードパーティのライブラリで型拡張を提供する場合はinterfaceを使用することが望ましいです。

typeは、複数の型を組み合わせたり、独自の型を作成する場合に有効です。

たとえば、ユニオン型やインターセクション型、タプル型にはtypeを利用しましょう。

条件型やマッピング型など複雑な型操作を必要とする場合にもtypeが向いています。

インターフェースの具体的な活用例

クラスが特定のインターフェースを実装していることを明記する場合にinterfaceを利用します。

これにより、特定のメソッドやプロパティをクラスが持つことを保証できます。

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
}

上の例ではClockInterfaceインターフェースをClockクラスが実装しています。

これによりsetTimeメソッドやcurrentTimeプロパティの存在が保証されるでしょう。

型エイリアスのベストプラクティス

型エイリアスは、特定の条件を満たすオブジェクトの型を定義する際に有効です。

型操作をおこなった複合型を簡単に利用するためにも便利です。

type Point = {
  x: number;
  y: number;
};

type Point3D = Point & {
  z: number;
};

// 3次元座標の点を表現する
let point3D: Point

まとめ

当記事でお伝えしてきたことをまとめます。

• 型定義は、変数や関数の引数、戻り値に対して期待されるデータ型を明示する仕組み
• 型システムとは、コンパイル時に型の正しさを検証するルールの集合
• interfaceとは、特定の変数が特定のプロパティかメソッドを持っていることを契約するようなもの

TypeScriptの型定義は、一見手間がかかる余計なこととも見えますが、長期間の開発ではとても重宝する仕組みです。

ぜひ手を動かしながら慣れ、より良いコードが書けるようになりましょう。