第1章: TypeScriptの基礎 - 環境構築と基本的な型

1.1 TypeScriptとは

TypeScriptは、JavaScriptに静的型付けを追加したプログラミング言語です。Microsoftによって開発され、大規模なアプリケーション開発において、より安全で保守しやすいコードを書くことができます。

TypeScriptの主な特徴

静的型付け: 変数や関数の型を事前に定義できる
最新のJavaScript機能: ES6以降の機能を古いブラウザでも使える
強力なIDEサポート: 自動補完やリファクタリングが便利
エラーの早期発見: コンパイル時にエラーを検出

1.2 環境構築

Node.jsのインストール

TypeScriptを使用するには、まずNode.jsが必要です。Node.js公式サイトから最新のLTS版をダウンロードしてインストールしてください。

TypeScriptのインストール

ターミナルで以下のコマンドを実行します：

# グローバルにインストール
npm install -g typescript

# バージョン確認
tsc --version

最初のTypeScriptファイル

hello.tsという名前でファイルを作成し、以下のコードを書いてみましょう：

// hello.ts
const message: string = "Hello, TypeScript!";
console.log(message);

コンパイルと実行

# TypeScriptをJavaScriptにコンパイル
tsc hello.ts

# 生成されたJavaScriptファイルを実行
node hello.js

1.3 基本的な型

TypeScriptには以下の基本的な型があります：

プリミティブ型

// 文字列型
let name: string = "田中太郎";
let greeting: string = `こんにちは、${name}さん`;

// 数値型
let age: number = 25;
let height: number = 170.5;
let binary: number = 0b1010; // 2進数
let octal: number = 0o744;   // 8進数
let hex: number = 0xf00d;    // 16進数

// 真偽値型
let isStudent: boolean = true;
let isWorking: boolean = false;

// null と undefined
let nullValue: null = null;
let undefinedValue: undefined = undefined;

配列型

// 配列の型注釈 - 2つの書き方
let numbers: number[] = [1, 2, 3, 4, 5];
let strings: Array<string> = ["apple", "banana", "orange"];

// 混合型の配列（ユニオン型）
let mixed: (string | number)[] = ["hello", 42, "world", 100];

タプル型

// タプルは固定長で各要素の型が決まっている配列
let person: [string, number] = ["山田花子", 30];
// person[0] は string型
// person[1] は number型

// タプルの使用例
let coordinate: [number, number] = [10, 20];
let rgb: [number, number, number] = [255, 0, 128];

enum型

// 数値enum
enum Direction {
    Up,    // 0
    Down,  // 1
    Left,  // 2
    Right  // 3
}

let dir: Direction = Direction.Up;

// 文字列enum
enum Color {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE"
}

let favoriteColor: Color = Color.Blue;

// enumの使用例
function move(direction: Direction): void {
    switch(direction) {
        case Direction.Up:
            console.log("上に移動");
            break;
        case Direction.Down:
            console.log("下に移動");
            break;
        case Direction.Left:
            console.log("左に移動");
            break;
        case Direction.Right:
            console.log("右に移動");
            break;
    }
}

move(Direction.Up);

1.4 型推論と型注釈

TypeScriptは多くの場合、型を自動的に推論してくれます：

// 型推論
let message = "Hello"; // string型と推論される
let count = 10;        // number型と推論される
let flag = true;       // boolean型と推論される

// 明示的な型注釈
let explicitString: string = "明示的な文字列";
let explicitNumber: number = 42;

// 型推論が働かない場合は型注釈が必要
let value; // any型になってしまう
value = "文字列";
value = 123; // エラーにならない

// 正しい書き方
let correctValue: string;
correctValue = "文字列";
// correctValue = 123; // エラー: Type 'number' is not assignable to type 'string'

1.5 any型とunknown型

// any型 - 型チェックを無効化（使用は避けるべき）
let anything: any = 42;
anything = "文字列";
anything = true;
anything.foo.bar.baz; // エラーにならない（危険）

// unknown型 - 安全なany型
let unknownValue: unknown = 42;
unknownValue = "文字列";
unknownValue = true;

// unknownを使用する前に型チェックが必要
if (typeof unknownValue === 'string') {
    console.log(unknownValue.toUpperCase()); // OK
}

// 型ガード関数の例
function isString(value: unknown): value is string {
    return typeof value === 'string';
}

if (isString(unknownValue)) {
    console.log(unknownValue.length); // OK
}

1.6 オブジェクト型

// オブジェクト型の定義
let user: {
    name: string;
    age: number;
    email?: string; // オプショナルプロパティ
} = {
    name: "佐藤次郎",
    age: 28
    // emailは省略可能
};

// 型エイリアスを使った定義
type User = {
    id: number;
    name: string;
    age: number;
    isActive: boolean;
};

let newUser: User = {
    id: 1,
    name: "鈴木一郎",
    age: 35,
    isActive: true
};

// ネストしたオブジェクト
type Address = {
    street: string;
    city: string;
    zipCode: string;
};

type Employee = {
    name: string;
    department: string;
    address: Address;
};

let employee: Employee = {
    name: "高橋花子",
    department: "営業部",
    address: {
        street: "桜通り1-2-3",
        city: "東京都",
        zipCode: "100-0001"
    }
};

1.7 ユニオン型と交差型

// ユニオン型 - 複数の型のいずれか
type StringOrNumber = string | number;

let value1: StringOrNumber = "文字列";
let value2: StringOrNumber = 123;

// ユニオン型の実用例
function formatId(id: string | number): string {
    if (typeof id === 'string') {
        return id.toUpperCase();
    } else {
        return id.toString();
    }
}

// 交差型 - 複数の型を結合
type Person = {
    name: string;
    age: number;
};

type Contact = {
    email: string;
    phone: string;
};

type PersonWithContact = Person & Contact;

let personWithContact: PersonWithContact = {
    name: "山田太郎",
    age: 30,
    email: "yamada@example.com",
    phone: "090-1234-5678"
};

1.8 リテラル型

// 文字列リテラル型
type Direction2 = "north" | "south" | "east" | "west";
let direction: Direction2 = "north"; // OK
// let wrongDirection: Direction2 = "up"; // エラー

// 数値リテラル型
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
let dice: DiceRoll = 4; // OK
// let wrongDice: DiceRoll = 7; // エラー

// リテラル型の実用例
type Status = "pending" | "approved" | "rejected";

function handleStatus(status: Status): void {
    switch(status) {
        case "pending":
            console.log("処理中です");
            break;
        case "approved":
            console.log("承認されました");
            break;
        case "rejected":
            console.log("却下されました");
            break;
    }
}

1.9 型アサーション

// 型アサーション - 型を強制的に指定
let someValue: unknown = "これは文字列です";
let strLength1: number = (someValue as string).length;
let strLength2: number = (<string>someValue).length; // 古い構文

// DOM要素での型アサーション
const inputElement = document.getElementById('myInput') as HTMLInputElement;
console.log(inputElement.value);

// 型アサーションの注意点
let num: number = 123;
// let str: string = num as string; // コンパイルエラー
// 型アサーションは慎重に使用すること

練習問題

問題1: 基本的な型の使用

以下の要件を満たす変数を定義してください：

名前（文字列）、年齢（数値）、学生かどうか（真偽値）を持つ変数
好きな果物のリスト（文字列の配列）
座標を表すタプル（x, y）

問題2: enum型の作成

曜日を表すenum型を作成し、それを使用して今日の曜日を表示する関数を作成してください。

問題3: オブジェクト型の定義

商品情報を表す型を定義してください。商品には以下の情報が含まれます：

ID（数値）
名前（文字列）
価格（数値）
在庫あり（真偽値）
カテゴリー（"食品" | "衣類" | "電化製品"のいずれか）

問題4: ユニオン型の活用

引数として文字列または数値を受け取り、それぞれ適切に処理する関数を作成してください。

文字列の場合：文字数を返す
数値の場合：2倍の値を返す

解答例

解答1: 基本的な型の使用

// 1. 名前、年齢、学生かどうか
let student: {
    name: string;
    age: number;
    isStudent: boolean;
} = {
    name: "田中太郎",
    age: 20,
    isStudent: true
};

// 2. 好きな果物のリスト
let favoriteFruits: string[] = ["りんご", "バナナ", "オレンジ", "ぶどう"];

// 3. 座標を表すタプル
let coordinate: [number, number] = [100, 200];

解答2: enum型の作成

enum DayOfWeek {
    Sunday = "日曜日",
    Monday = "月曜日",
    Tuesday = "火曜日",
    Wednesday = "水曜日",
    Thursday = "木曜日",
    Friday = "金曜日",
    Saturday = "土曜日"
}

function displayToday(day: DayOfWeek): void {
    console.log(`今日は${day}です`);
}

// 使用例
displayToday(DayOfWeek.Monday);
displayToday(DayOfWeek.Friday);

解答3: オブジェクト型の定義

type Category = "食品" | "衣類" | "電化製品";

type Product = {
    id: number;
    name: string;
    price: number;
    inStock: boolean;
    category: Category;
};

// 商品の例
let product1: Product = {
    id: 1,
    name: "オーガニックリンゴ",
    price: 300,
    inStock: true,
    category: "食品"
};

let product2: Product = {
    id: 2,
    name: "冬用コート",
    price: 15000,
    inStock: false,
    category: "衣類"
};

let product3: Product = {
    id: 3,
    name: "スマートフォン",
    price: 80000,
    inStock: true,
    category: "電化製品"
};

解答4: ユニオン型の活用

function processValue(value: string | number): number {
    if (typeof value === 'string') {
        // 文字列の場合：文字数を返す
        return value.length;
    } else {
        // 数値の場合：2倍の値を返す
        return value * 2;
    }
}

// テスト
console.log(processValue("Hello"));     // 5
console.log(processValue("TypeScript")); // 10
console.log(processValue(10));          // 20
console.log(processValue(25));          // 50

// より詳細な実装
function processValueWithDetails(value: string | number): {
    originalType: string;
    result: number;
} {
    if (typeof value === 'string') {
        return {
            originalType: 'string',
            result: value.length
        };
    } else {
        return {
            originalType: 'number',
            result: value * 2
        };
    }
}

console.log(processValueWithDetails("Hello"));
// { originalType: 'string', result: 5 }
console.log(processValueWithDetails(15));
// { originalType: 'number', result: 30 }

まとめ

第1章では、TypeScriptの基礎について学びました：

TypeScriptの環境構築方法
基本的な型（プリミティブ型、配列、タプル、enum）
型推論と型注釈の使い方
any型とunknown型の違い
オブジェクト型の定義方法
ユニオン型と交差型の活用
リテラル型による値の制限
型アサーションの使用方法

次章では、関数とインターフェースについて詳しく学習していきます。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

第1章: TypeScriptの基礎 - 環境構築と基本的な型

1.1 TypeScriptとは

TypeScriptの主な特徴

1.2 環境構築

Node.jsのインストール

TypeScriptのインストール

最初のTypeScriptファイル

コンパイルと実行

1.3 基本的な型

プリミティブ型

配列型

タプル型

enum型

1.4 型推論と型注釈

1.5 any型とunknown型

1.6 オブジェクト型

1.7 ユニオン型と交差型

1.8 リテラル型

1.9 型アサーション

練習問題

問題1: 基本的な型の使用

問題2: enum型の作成

問題3: オブジェクト型の定義

問題4: ユニオン型の活用

解答例

解答1: 基本的な型の使用

解答2: enum型の作成

解答3: オブジェクト型の定義

解答4: ユニオン型の活用

まとめ

FilesExpand file tree

chapter1_basics.md

Latest commit

History

chapter1_basics.md

File metadata and controls

第1章: TypeScriptの基礎 - 環境構築と基本的な型

1.1 TypeScriptとは

TypeScriptの主な特徴

1.2 環境構築

Node.jsのインストール

TypeScriptのインストール

最初のTypeScriptファイル

コンパイルと実行

1.3 基本的な型

プリミティブ型

配列型

タプル型

enum型

1.4 型推論と型注釈

1.5 any型とunknown型

1.6 オブジェクト型

1.7 ユニオン型と交差型

1.8 リテラル型

1.9 型アサーション

練習問題

問題1: 基本的な型の使用

問題2: enum型の作成

問題3: オブジェクト型の定義

問題4: ユニオン型の活用

解答例

解答1: 基本的な型の使用

解答2: enum型の作成

解答3: オブジェクト型の定義

解答4: ユニオン型の活用

まとめ