TypeScriptとは？特徴・メリット・始め方を徹底解説【JavaScriptとの違い】

function calculateTotal(price, tax) {
    return price + tax;
}

// これは動くが...
console.log(calculateTotal(100, 10)); // 110

// こんなミスも動いてしまう！
console.log(calculateTotal("100", "10")); // "10010" (文字列結合)
console.log(calculateTotal(100)); // NaN (taxがundefined)

function calculateTotal(price: number, tax: number): number {
    return price + tax;
}

// 正しい使用法
console.log(calculateTotal(100, 10)); // 110

// エラーが事前に検出される！
console.log(calculateTotal("100", "10")); // エラー: 文字列は渡せません
console.log(calculateTotal(100)); // エラー: 引数が足りません

// 数値型
let age: number = 25;
let pi: number = 3.14;

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

// 真偽値型
let isActive: boolean = true;
let isComplete: boolean = false;

// 配列型
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["田中", "佐藤", "鈴木"];

// ジェネリック記法での配列
let items: Array<string> = ["apple", "banana", "orange"];

// オブジェクト型の定義
interface User {
    id: number;
    name: string;
    email: string;
    isActive: boolean;
}

// インターフェースを使用
let user: User = {
    id: 1,
    name: "田中太郎",
    email: "tanaka@example.com",
    isActive: true
};

// 関数の引数としても使用
function displayUser(user: User): void {
    console.log(`ユーザー名: ${user.name}`);
    console.log(`メールアドレス: ${user.email}`);
}

// 関数の型を明示的に定義
function add(a: number, b: number): number {
    return a + b;
}

// アロー関数での型定義
const multiply = (a: number, b: number): number => {
    return a * b;
};

// オプショナル引数（?を付ける）
function greet(name: string, age?: number): string {
    if (age) {
        return `こんにちは、${name}さん（${age}歳）`;
    }
    return `こんにちは、${name}さん`;
}