TypeScript Academy · レッスン

リテラル型

TypeScriptで具体的な値を型として使います

レッスン 4/410 ステップ

「リテラル型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

リテラル型

次のレッスンへようこそ!このレッスンでは、変数に正確で特定の値だけを指定できるTypeScriptの機能、リテラル型について学びます。これにより、コードの予測可能性と型安全性が高まります。それでは詳しく見ていきましょう!

リテラル型 — イラスト1

リテラル型とは

TypeScriptのリテラル型を使うと、変数にstringやnumberのような一般的な型ではなく、特定の値を格納できます。たとえば、変数に"yes"または"no"のどちらかだけを格納できるように制限できます。

例:

課題: リテラル型の変数を宣言し、有効な値と無効な値を代入してください。

let answer: "yes" | "no";
answer = "yes"; 
// Valid
// answer = "maybe"; 
// Error: Type '"maybe"' is not assignable to type '"yes" | "no"'.

文字列を使ったリテラル型

文字列リテラル型を使うと、変数に指定できる文字列値を特定の集合に制限できます。例:

課題: 方向を表す型を作成し、変数に値を代入してください。

type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up"; // Valid
// move = "forward"; 
// Error: Type '"forward"' is not assignable to type '"up" | "down" | "left" | "right"'.

数値を使ったリテラル型

数値にもリテラル型を使い、変数に指定できる値を特定の数値に制限できます。例:

課題: サイコロの出目を表す数値リテラル型を定義し、テストしてください。

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

let roll: DiceRoll;
roll = 4; // Valid
// roll = 7; 
// Error: Type '7' is not assignable to type '1 | 2 | 3 | 4 | 5 | 6'.

関数でリテラル型を使う

関数のパラメーターにリテラル型を使うと、特定の値だけを受け付けるようにできます。例:

課題: リテラル型を使うパラメーターを持つ関数を作成してください。

function setStatus(status: "active" | "inactive"): void {
  console.log(`The status is now ${status}`);
}

setStatus("active"); 
// Output: The status is now active
// setStatus("pending"); 
// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'.

リテラル型と型エイリアス

リテラル型を再利用するには、型エイリアスとして定義できます。例:

課題: 信号機の色を表す型エイリアスを作成し、変数で使用してください。

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";
console.log(light);
 // Output: red

オブジェクトでリテラル型を使う

オブジェクト内でリテラル型を使うと、特定のプロパティに指定できる値を制限できます。例:

課題: リテラル型を使うプロパティを持つオブジェクト型を作成してください。

type Button = {
  label: string;
  size: "small" | "medium" | "large";
};

let submitButton: Button = {
  label: "Submit",
  size: "medium",
};

console.log(submitButton);

よくあるミス

リテラル型を使うときによくあるミスを確認しましょう。

  • リテラル型を変更したときに、許可されるすべての値を更新し忘れる。
  • リテラル型に含まれていない値を代入する(TypeScriptが検出します)。
  • 柔軟性のほうが重要な、非常に動的なデータにリテラル型を使う。

ヒント: 制御された予測可能な状況では、リテラル型を使いましょう!

type Switch = "on" | "off";

let state: Switch;
state = "on";
state = "off";

よくできました!

おめでとうございます!TypeScriptでリテラル型を使って、正確で制限された値を定義する方法を学びました。リテラル型は、予測可能で型安全なコードを作成するのに特に役立ちます。次のレッスンでは、TypeScriptでの関数の扱いについて学びます。引き続きコーディングしていきましょう!

リテラル型 — イラスト10
無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
101
レッスン
352

よくある質問

「リテラル型」レッスンは無料ですか?

はい。「リテラル型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「リテラル型」で何を学びますか?

TypeScriptで具体的な値を型として使います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「リテラル型」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 配列とタプル
  2. Union型とIntersection型
  3. 列挙型
  4. リテラル型
← TypeScript Academyに戻る