TypeScript入門：型注釈(Type Annotation)と型推論(Type Inference)の基本をマスターしよう

TypeScriptはJavaScriptに型の概念を導入したプログラミング言語です。これにより、コードのエラーを未然に防ぎ、開発者がより安心してプログラムを記述できるようになります。この記事では、特に初心者の方を対象に、「型注釈(Type Annotation)」と「型推論(Type Inference)」の基本をわかりやすく解説します。

Contents

TypeScriptとは？

TypeScriptはMicrosoftが開発したオープンソースのプログラミング言語です。JavaScriptを基盤としており、JavaScriptのコードにそのまま互換性があります。大きな特徴は「型」をサポートしていることです。

JavaScriptとTypeScriptの違い

JavaScript: 型の制約がなく柔軟ですが、エラーを見逃しやすい。
TypeScript: 型を導入することで、エラーを防止し、コードの予測性を向上させる。

型注釈とは？

型注釈(Type Annotation)は、変数や関数に対して「このデータはこの型である」と明示するための仕組みです。これにより、意図しないデータ型の利用を防ぎ、コードの読みやすさが向上します。

型注釈の基本例

以下は、型注釈を用いたシンプルな例です。

let age: number = 25; // ageはnumber型であることを明示

このコードは、age変数が数値型であることを示しており、文字列などのデータを代入しようとするとエラーになります。

型推論とは？

型推論(Type Inference)は、TypeScriptがコードから自動的に型を推測する機能です。明示的に型注釈を記述しなくても、TypeScriptが型を判断します。

型推論の基本例

let name = "John"; // TypeScriptは自動的にstring型と推測

この例では、nameに文字列が代入されているため、TypeScriptはstring型として扱います。

型注釈と型推論の使い分け

型注釈と型推論は、それぞれの特性を理解し、適切に使い分けることが重要です。

型が複雑または分かりにくい場合：型注釈を利用する。
初期値から型が明確にわかる場合：型推論を利用する。

使用例

// 型注釈を利用
let coordinates: { x: number; y: number } = { x: 10, y: 20 };

// 型推論を利用
let message = "Hello, TypeScript!";

TypeScriptの基本型と型注釈

TypeScriptにはいくつかの基本的な型が用意されています。以下に代表的なものを紹介します。

number型

数値を表す型です。

let price: number = 99.99;

string型

文字列を表す型です。

let greeting: string = "Hello, TypeScript!";

boolean型

真偽値を表す型です。

let isLoggedIn: boolean = true;

any型

任意の型を許容する柔軟な型ですが、利用は控えめにしましょう。

let anything: any = "This can be anything";

unknown型

安全性を高めるために使われる型です。anyよりも厳密な型チェックが必要になります。

let something: unknown = "Need type check before use";

関数の型注釈

関数の引数や戻り値にも型を指定できます。これにより、関数の利用時に正しい型を保証できます。

基本例

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

void型

関数が値を返さない場合に使用します。

function logMessage(message: string): void {
    console.log(message);
}

型エイリアスとユーティリティ型

TypeScriptでは型エイリアスやユーティリティ型を活用することで、複雑な型定義を簡潔に記述できます。

型エイリアス

型エイリアスは、型に名前を付けることができます。

type User = { name: string; age: number };
let user: User = { name: "Alice", age: 30 };

Record<Keys, Type>

ユーティリティ型の一つで、キーと値の型を指定するのに便利です。

let scores: Record<string, number> = { Alice: 90, Bob: 85 };

satisfiesで型を限定する方法

satisfies は TypeScript 4.9 で導入されたキーワードで、オブジェクトが特定の型を満たしているかチェックしますが、その型で値を制限せずに推論を維持します。これにより、型の過不足チェックを行いつつ、値のプロパティや型推論を柔軟に扱うことができます。

基本例

const settings = {
    theme: "dark",
    layout: "grid",
} as const satisfies { theme: "dark" | "light"; layout: "grid" | "list" };

satisfiesの詳細へ　→

型安全性を高めるためのベストプラクティス

型注釈を必要最小限に。
型推論を信頼する。
不明な型にはunknown型を使う。

参考資料

TypeScript公式ドキュメント