プリミティブ型・ユニオン型・型エイリアス
string、number、boolean、配列で変数に型注釈を付けます。| でユニオン型を作り、type エイリアスで読みやすい名前を付けます。
「プリミティブ型・ユニオン型・型エイリアス」は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/updatedAtany型 — 型チェックからの離脱
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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- TypeScript を学ぶ理由:コンパイル時に型でバグを検出
- プリミティブ型・ユニオン型・型エイリアス
- インターフェースとオブジェクト型
- TS のコンパイルと tsconfig.json