TypeScriptの基本構文をまとめてみた

TypeScriptとは？

TypeScript（タイプスクリプト） は、JavaScriptのスーパーセットです。

「スーパーセット」って何？と思いますよね。簡単に言うと、「JavaScriptの機能をすべて含んで、さらに便利な機能を追加したプログラミング言語」のことです。

TypeScriptの最大の特徴は 「静的型付け」 です。これも難しく聞こえますが、要は「変数にどんな種類のデータが入るかを事前に決められる」ということです。

具体例で理解しよう

JavaScriptの場合：

let userName = "田中太郎";
userName = 123; // これでもエラーにならない（でも混乱の元）

TypeScriptの場合：

let userName: string = "田中太郎";
userName = 123; // エラー！「文字列のはずなのに数字を入れようとしてる」と教えてくれる

このように、TypeScriptは「間違い」を事前に教えてくれるので、バグの少ない安全なコードを書けるようになります。

JavaScriptとの違いを詳しく見てみよう

1. 型システムの違い

JavaScript（動的型付け）

• 変数にどんな種類のデータでも自由に入れられる
• 実行してみるまでエラーに気づかない

let price = 1000;
price = "千円"; // 実行時まで問題に気づけない
console.log(price * 1.1); // NaN（計算できない）になる

TypeScript（静的型付け）

• 変数にどんなデータが入るかを最初に決める
• コードを書いている段階でエラーを教えてくれる

let price: number = 1000;
price = "千円"; // すぐにエラー表示！「数値じゃないよ」と教えてくれる
console.log(price * 1.1); // 安全に計算できる

2. 実行方法の違い

JavaScript

• そのままブラウザやNode.jsで実行できる

TypeScript

• 直接実行はできない
• まずJavaScriptに変換（コンパイル）してから実行する
• この変換の時に型チェックが行われる

イメージとしては：

TypeScriptコード → コンパイル → JavaScriptコード → 実行
                      ↑
                  ここでエラーチェック

開発環境をセットアップしよう

前提条件

まず、Node.jsがインストールされているか確認しましょう。Node.jsは、ブラウザの外でJavaScriptを実行できる環境です。

node -v

バージョンが表示されればOKです。

必要なパッケージをインストール

以下のコマンドを実行して、TypeScriptの開発に必要なツールをインストールします：

npm i -D typescript ts-node ts-node-dev

それぞれのツールの役割：

typescript

• TypeScriptのコンパイラ（tsc）を提供
• TypeScriptコードをJavaScriptに変換するためのツール
• 型エラーを検出してくれる

ts-node

• TypeScriptファイルを直接実行できるツール
• 通常は「TypeScript → JavaScript変換 → 実行」だが、これを1ステップで実行
• 開発中のテスト実行に便利

ts-node-dev

• ts-nodeの進化版
• ファイルを変更すると自動で再実行してくれる
• 開発効率が大幅にアップ

-D オプション

• 「開発時だけ必要」という意味
• 実際のアプリには含まれない（本番環境には不要）

TypeScriptの基本構文を覚えよう

文字列（string型）

文字列を扱うときは string 型を使います。

const greeting: string = "こんにちは";
console.log(greeting); // "こんにちは" と表示

// 型を指定することで、間違いを防げる
const message: string = "今日は晴れです";
// message = 123; // エラー！文字列じゃないよと教えてくれる

ポイント： const greeting: string の部分で「この変数には文字列しか入らない」と宣言しています。

数値（number型）

数値を扱うときは number 型を使います。

const age: number = 28;
const price: number = 1980;
const temperature: number = -5.5; // 小数点や負の数もOK

console.log(age); // 28
console.log(price * 1.1); // 2178（税込計算）

真偽値（boolean型）

true（真）またはfalse（偽）を扱うときは boolean 型を使います。

const isActive: boolean = true;
const isCompleted: boolean = false;

// 実際の使用例
const hasPermission: boolean = true;
if (hasPermission) {
    console.log("アクセス許可されています");
} else {
    console.log("アクセス拒否されました");
}

配列（Array型）

複数のデータをまとめて管理したいときは配列を使います。

数値の配列：

const scores: number[] = [85, 92, 78, 95];
console.log(scores[0]); // 85（最初の要素）
console.log(scores.length); // 4（要素数）

// 平均点を計算
const average = scores.reduce((sum, score) => sum + score, 0) / scores.length;
console.log(`平均点: ${average}点`); // 平均点: 87.5点

文字列の配列：

const fruits: string[] = ["りんご", "バナナ", "オレンジ"];
console.log(fruits); // ["りんご", "バナナ", "オレンジ"]

// 配列に新しい要素を追加
fruits.push("ぶどう");
console.log(fruits); // ["りんご", "バナナ", "オレンジ", "ぶどう"]

タプル（tuple型）

タプルは「決められた順序で、異なる型のデータを組み合わせる」データ構造です。

// [名前, 年齢] の組み合わせ
const person: [string, number] = ["田中太郎", 25];
console.log(`名前: ${person[0]}, 年齢: ${person[1]}歳`); // 名前: 田中太郎, 年齢: 25歳

// [成功/失敗, メッセージ] の組み合わせ
const result: [boolean, string] = [true, "処理が完了しました"];
if (result[0]) {
    console.log(result[1]); // "処理が完了しました"
}

タプルと配列の違い：

• 配列：同じ型のデータを複数
• タプル：異なる型のデータを決められた順序で

インターフェース（interface）

インターフェースは「オブジェクトの形（設計図）」を定義します。

// ユーザー情報の設計図を作成
interface User {
  name: string;    // 名前（文字列）
  age: number;     // 年齢（数値）
  email: string;   // メールアドレス（文字列）
}

// 設計図に従ってオブジェクトを作成
const user1: User = {
  name: "山田花子",
  age: 30,
  email: "hanako@example.com"
};

// 関数でも使える
function showUserInfo(user: User) {
  console.log(`名前: ${user.name}`);
  console.log(`年齢: ${user.age}歳`);
  console.log(`メール: ${user.email}`);
}

showUserInfo(user1);
// 名前: 山田花子
// 年齢: 30歳
// メール: hanako@example.com

インターフェースの利点：

• オブジェクトの構造が明確になる
• プロパティの入力ミスを防げる
• チーム開発で「この形で作ってね」と共有できる

戻り値がない関数（void型）

「何かを実行するけど、結果は返さない」関数には void 型を使います。

function showWelcomeMessage(): void {
  console.log("ようこそ！");
  console.log("サービスをご利用いただき、ありがとうございます。");
  // return文がない（何も返さない）
}

function saveUserData(userData: User): void {
  console.log("ユーザーデータを保存中...");
  // データベースに保存する処理（仮）
  console.log("保存完了！");
}

showWelcomeMessage(); // メッセージが表示されるだけ

未定義（undefined型）

変数が「まだ値を持っていない状態」を表します。

let userName: string | undefined; // 文字列またはundefined
console.log(userName); // undefined（まだ何も代入されていない）

// 後で値を設定
userName = "佐藤太郎";
console.log(userName); // "佐藤太郎"

// 実際の使用例：初期化前のチェック
function greetUser(name: string | undefined) {
  if (name === undefined) {
    console.log("ゲストさん、こんにちは！");
  } else {
    console.log(`${name}さん、こんにちは！`);
  }
}

greetUser(undefined); // "ゲストさん、こんにちは！"
greetUser("田中"); // "田中さん、こんにちは！"

オブジェクト型（object型）

「文字列、数値、真偽値以外」のデータを扱うときに使います。

const userInfo: object = {
  name: "鈴木一郎",
  age: 25,
  hobbies: ["読書", "映画鑑賞"]
};

const todoList: object = ["買い物", "掃除", "勉強"];

// 関数もobject型
const calculator: object = function(a: number, b: number) {
  return a + b;
};

注意： object 型は「何でも入れられる箱」なので、具体的な構造が分かりません。実際の開発では、インターフェースを使う方が安全です。

型エイリアス（Type Alias）

「型に分かりやすい名前を付ける」機能です。

// IDは数値だけど、「UserID」という名前を付けて分かりやすく
type UserID = number;
type ProductID = number;

const currentUser: UserID = 12345;
const selectedProduct: ProductID = 67890;

// 関数で使用
function getUserProfile(id: UserID): string {
  return `ユーザーID ${id} のプロフィールを取得中...`;
}

function getProductInfo(id: ProductID): string {
  return `商品ID ${id} の情報を取得中...`;
}

console.log(getUserProfile(currentUser));
console.log(getProductInfo(selectedProduct));

実用的な例：

// ステータスコードに名前を付ける
type StatusCode = 200 | 404 | 500;

function handleResponse(status: StatusCode): string {
  switch(status) {
    case 200:
      return "成功しました！";
    case 404:
      return "ページが見つかりません";
    case 500:
      return "サーバーエラーが発生しました";
  }
}

console.log(handleResponse(200)); // "成功しました！"

unknown型

unknown は「何の型か分からないけど、安全に使いたい」ときに使います。

function processApiResponse(): unknown {
  // 外部APIからのレスポンス（何が返ってくるか分からない）
  return { status: "success", data: [1, 2, 3] };
}

let response: unknown = processApiResponse();

// そのまま使おうとするとエラー
// console.log(response.status); // エラー！

// 型チェックしてから使う
if (typeof response === "object" && response !== null) {
  console.log("オブジェクトが返されました");
  // さらに詳細なチェックが必要
}

// 実用的な例
function safeParseJSON(jsonString: string): unknown {
  try {
    return JSON.parse(jsonString);
  } catch {
    return null;
  }
}

const parsed = safeParseJSON('{"name": "太郎", "age": 20}');
if (typeof parsed === "object" && parsed !== null) {
  console.log("JSONの解析に成功しました");
}

ユニオン型（|）

「AまたはB」のように、複数の型を許可したいときに使います。

// 基本的な使い方
type Status = "loading" | "success" | "error";

function showStatus(status: Status): void {
  switch(status) {
    case "loading":
      console.log("読み込み中...");
      break;
    case "success":
      console.log("完了しました！");
      break;
    case "error":
      console.log("エラーが発生しました");
      break;
  }
}

showStatus("loading"); // "読み込み中..."
// showStatus("pending"); // エラー！許可されていない値

実用的な例：

// ユーザーの権限管理
type UserRole = "admin" | "moderator" | "member";

interface User {
  name: string;
  role: UserRole;
}

function checkPermission(user: User): boolean {
  if (user.role === "admin") {
    console.log("すべての機能を利用できます");
    return true;
  } else if (user.role === "moderator") {
    console.log("一部の管理機能を利用できます");
    return true;
  } else {
    console.log("基本機能のみ利用できます");
    return false;
  }
}

const admin: User = { name: "管理者", role: "admin" };
const member: User = { name: "一般ユーザー", role: "member" };

checkPermission(admin);  // すべての機能を利用できます
checkPermission(member); // 基本機能のみ利用できます

文字列または数値を受け取る関数：

function formatDisplay(value: string | number): string {
  if (typeof value === "string") {
    return `テキスト: ${value.toUpperCase()}`; // 文字列なら大文字に
  } else {
    return `数値: ${value.toFixed(2)}`; // 数値なら小数点以下2桁に
  }
}

console.log(formatDisplay("hello")); // "テキスト: HELLO"
console.log(formatDisplay(3.14159)); // "数値: 3.14"
console.log(formatDisplay(100)); // "数値: 100.00"

まとめ

TypeScriptは最初は難しく感じるかもしれませんが、以下のメリットがあります：

1. エラーを早期発見 - コードを書いている時点で間違いを教えてくれる
2. コードの意図が明確 - どんなデータを扱うかが一目で分かる
3. チーム開発に有利 - みんなが同じルールでコードを書ける
4. リファクタリングが安全 - コードの変更時に影響範囲が分かる

まずは基本的な型（string, number, boolean）から始めて、徐々に複雑な機能を覚えていきましょう。

実際にコードを書きながら練習することで、TypeScriptの便利さを実感できるはずです！