Closed4ヶ月前にクローズ4

TypeScriptとJavaScriptを比較して発見したことをまとめる

if文を省略できる場合がある

typeof演算子とprocessValue関数を使った型チェックの例

TSの場合

function processValue(value: number | string): number | string {
  if (typeof value === "number") {
    return value * 2;
  } else {
    return value.toUpperCase();
  }
}

JSの場合

function processValue(value) {
  if (typeof value === "number") {
    return value * 2;
  } else if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return "Unsupported type";
  }
}

console.log(processValue(5));      // 10
console.log(processValue("hello")); // "HELLO"
console.log(processValue(true));    // "Unsupported type"

処理フロー（マーメイド図）

TSの場合

JSの場合

簡単に言うと…

型注釈のおかげで型チェックを厳密に実行するためのコードを省略できるので、コード全体が短く、処理フローがわかりやすくなる。

関数宣言のタイミングで「数値か文字列以外は受け付けない！」と設定できるので、どちらにも属さない値が入り込んだ場合を想定しなくてよい。

開発者が想定した処理を確実に例外なく行ってくれる処理を指示できるから、TSは安全にコードが書けるといわれるのか。

コンパイル時に解決できること

関数の引数や戻り値の値の不一致
オブジェクトのプロパティへの不正なアクセス
未定義の変数や関数の使用

例：

function greet(name: string) {
    console.log(`Hello, ${name}`);
}

greet(42); // コンパイルエラー：数値を文字列型の引数に渡すことはできません

実行時にチェックが必要な場合もある

実行時にのみ決定される型や値については、依然として条件分岐が必要。

ユーザーの入力検証
外部APIからのレスポンス処理
動的に変化するデータの処理
特定の条件下で異なる動作をする場合
エラーハンドリング
再帰的なアルゴリズム
状態に基づく処理の分岐

例：

function processUserInput(input: string | number) {
    if (typeof input === "string") {
        return input.toUpperCase();
    } else {
        return input * 2;
    }
}

型ガード機能

特定のスコープ内での絞り込みができる機能

例：

function processValue(value: string | number) {
    if (typeof value === "string") {
        // このブロック内では、TypeScriptは value を string 型として扱います
        console.log(value.toUpperCase());
    } else {
        // このブロック内では、TypeScriptは value を number 型として扱います
        console.log(value.toFixed(2));
    }
}

Interfaceを使ってオブジェクトの型を定義できる

interface Person {
    name: string;
    age: number;
    city: string;
}

let person: Person = {
    name: "太郎",
    age: 30,
    city: "東京"
};

オプショナルプロパティ

interface Car {
    brand: string;
    model: string;
    year?: number;  // オプショナルプロパティ
}

let car: Car = {
    brand: "Toyota",
    model: "Corolla"
};

このスクラップは4ヶ月前にクローズされました