Frontend Academy · レッスン

プリミティブ型・ユニオン型・型エイリアス

string、number、boolean、配列で変数に型注釈を付けます。| でユニオン型を作り、type エイリアスで読みやすい名前を付けます。

レッスン 2/413 ステップ

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

変数への型注釈

変数名の後ろにコロンを付けて型注釈を追加します。TypeScriptは可能な場合に型を推論するため、推論が不明確な箇所やドキュメントとして型を示したい箇所に、明示的な注釈を追加してください。

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

プリミティブ型

TypeScriptのプリミティブ型は、JavaScriptのプリミティブに対応しています。string、number(整数と浮動小数点数の区別はありません)、boolean、null、undefined、symbol、bigintです。

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

配列

配列にはType[]またはジェネリック型のArray<Type>を指定します。どちらも同じ意味です。

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

ユニオン型: |

ユニオン型を使うと、変数に複数の型のうち1つを保持させられます。パイプ演算子|を使用します。TypeScriptは条件分岐の中で型を絞り込みます。

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

リテラル型

文字列、数値、または真偽値のリテラルを型として使用できます。ユニオン型と組み合わせると、列挙型のように、許可される値を固定した集合を作成できます。

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

型エイリアス: type

typeキーワードは型エイリアスを作成します。これは、あらゆる型に付けられる再利用可能な名前です。エイリアスは、プリミティブ型、ユニオン型、オブジェクト、タプル、複雑な合成型に使用できます。

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

typeによるオブジェクト型

型エイリアスを使って、オブジェクトの形を記述します。プロパティには?を付けてオプションにし、readonlyを付けて読み取り専用にできます。

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

交差型: &

&演算子を使って複数の型を組み合わせます。結果の型は、両方の型のすべてのプロパティを持ちます。型の拡張に便利です。

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

any型 — 型チェックからの離脱

anyを指定すると、その値は型チェックの対象外になります。これは伝染する性質があり、anyから派生した値もanyになります。移行中の最後の手段として使用し、長期的な解決策としては決して使用しないでください。

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

unknown型 — anyに代わる安全な選択肢

unknownは、anyに対する型安全な代替手段です。unknown型の値は、まず型を絞り込まなければ使用できません。これにより、外部データの検証が必要になります。

タプル — 固定長配列

タプルは、各位置の型が決まっている固定長の配列です。

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

確認問題

関数がstringまたはnumberのどちらかを受け取れるようにするTypeScriptの機能はどれですか。

振り返り: プリミティブ型・ユニオン・エイリアス

プリミティブ型はstring、number、boolean、null、undefinedです。配列はType[]です。ユニオン型はA | Bです。リテラル型を使うと値の集合を固定できます。typeエイリアスは再利用可能な型名を作成します。プロパティには?を付けてオプションにできます。readonlyは変更できないプロパティに使用します。外部データにはanyよりunknownを優先してください。

無料で開始

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

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

コース
41
レッスン
163

よくある質問

「プリミティブ型・ユニオン型・型エイリアス」レッスンは無料ですか?

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

「プリミティブ型・ユニオン型・型エイリアス」で何を学びますか?

string、number、boolean、配列で変数に型注釈を付けます。| でユニオン型を作り、type エイリアスで読みやすい名前を付けます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「プリミティブ型・ユニオン型・型エイリアス」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. TypeScript を学ぶ理由:コンパイル時に型でバグを検出
  2. プリミティブ型・ユニオン型・型エイリアス
  3. インターフェースとオブジェクト型
  4. TS のコンパイルと tsconfig.json
← Frontend Academyに戻る