ガイドブック - TypeScript - コードクエスト

型アノテーションの書き方

TypeScriptでは変数・関数の引数・戻り値に型を指定できます。

// 変数の型アノテーション
let name: string = "たろう";
let age: number = 16;
let isStudent: boolean = true;

// 配列
let scores: number[] = [80, 90, 75];
let names: string[] = ["たろう", "はなこ"];

// 関数の型定義
function greet(name: string): string {
  return `こんにちは、${name}！`;
}

// アロー関数
const add = (a: number, b: number): number => a + b;

// Union型（複数の型を許可）
let id: string | number = "abc123";
id = 456;  // OK

// オプショナル（?）
function hello(name: string, greeting?: string): string {
  return `${greeting ?? "こんにちは"}、${name}！`;
}

⚠️ TypeScriptは最終的にJavaScriptに変換される

ブラウザはTypeScriptを直接実行できません。tscコマンドでJSに変換してから実行します。
コードクエスト上では変換なしで実行できます。

インターフェースとジェネリクス

📦 インターフェース（interface）

// オブジェクトの形を定義
interface User {
  id: number;
  name: string;
  email?: string;  // ? = オプショナル（なくてもOK）
}

const user: User = { id: 1, name: "たろう" };

// 関数のインターフェース
interface Greeter {
  (name: string): string;
}
const greet: Greeter = (name) => `Hello, ${name}!`;

🔧 ジェネリクス（Generics）

// 型を引数として受け取る汎用関数
function first<T>(arr: T[]): T {
  return arr[0];
}

console.log(first<number>([1, 2, 3]));  // 1
console.log(first<string>(["a", "b"])); // "a"

// 型推論により型引数を省略することも可能
console.log(first([true, false])); // true

TypeScript ガイドブック

基礎知識