TypeScript のモダンな書き方をまとめた！

---

1. インターフェースとオブジェクトの型定義

コード

interface FormSchema {
  name: string;
  age: number;
}

const FormSchema_jen: FormSchema = {
  name: "example",
  age: 100,
};

説明

• interface:
  • オブジェクトの構造を定義する。
  • 型安全を確保し、プロパティが定義どおりであることを保証する。
• const FormSchema_jen: FormSchema:
  • FormSchema インターフェースを型として指定。
  • オブジェクトがインターフェースで定義されたプロパティをすべて満たす必要がある。

---

2. ジェネリクス関数の活用

コード

function fom<T>({ a, b, c, d }: { a: number; b: number; c: number; d: T }) {
  return { r: a, h: b, f: c, g: d };
}

const { r, h, f, g } = fom<FormSchema_zzz>({
  a: 1,
  b: 2,
  c: 3,
  d: FormSchema_zzz,
});

説明

• ジェネリクス <T>:
  • 型を動的に指定できる関数。
  • 呼び出し時に明示的に型を指定（例: <FormSchema_zzz>）するか、引数の型から推論される。
• オブジェクトの分割代入:
  • 戻り値を分解して、それぞれの値を変数に割り当てるモダンな書き方。

---

3. 高階関数とコールバック

コード

const hensu = (suuji: number): number => {
  console.log(suuji);
  return 100;
};

function handleClick_2(hensu: (suuji: number) => number) {
  hensu(100);

  return {
    a: 1,
    b: 2,
    c: 3,
  };
}

const { a, b, c } = handleClick_2(hensu);

説明

• アロー関数:
  • const hensu = (suuji: number): number => { ... } は短い関数定義のモダンな書き方。
  • 型 (number) を指定して引数と戻り値を明確にする。
• 高階関数:
  • handleClick_2 は関数を引数として受け取り、その関数を実行する。
  • コールバック関数（hensu）の活用例。
• オブジェクトの分割代入:
  • 戻り値のプロパティを直接変数 a, b, c に割り当てる。

---

4. オブジェクト全体の展開

コード

function fomz<T>({ ...atai }: { a: number; b: number; c: number }) {
  return { rr: atai.a, hh: atai.b, ff: atai.c };
}

const { rr, hh, ff } = fomz({
  a: 1,
  b: 2,
  c: 3,
});

説明

• スプレッド構文 (...atai):
  • 引数のオブジェクト全体を展開して atai にまとめる。
  • 必要に応じて個別のプロパティにアクセス。
• ジェネリクス <T>:
  • 型を動的に受け取る柔軟な関数定義。
  • 今回は型推論で T は { a: number; b: number; c: number } と解釈される。

---

5. 関数とアロー関数の違い

コード

function 関数作る() {
  console.log("関数作る");
}

const 関数いれる = () => {
  console.log("関数いれる");
};

const 関数実行 = 関数いれる;

説明

• 通常の関数 (function):
  • クラシックな関数定義。
  • Hoisting（巻き上げ）により、関数が定義前に呼び出せる。
• アロー関数 (=>):
  • モダンな記法。
  • this の取り扱いが異なる（親スコープの this を継承）。
  • Hoisting は適用されない。
• 関数を変数に代入:
  • const 関数実行 = 関数いれる のように、関数自体を他の変数に代入可能。

---

モダンな TypeScript の特徴

1. 型安全性:

   • 型定義（interface や type）によるエラー防止。
   • ジェネリクスやリテラル型で柔軟性を高めながらも型チェックを維持。

2. 構造の分割代入:

   • オブジェクトや配列のプロパティを簡潔に取り出す。

3. アロー関数:

   • 短く読みやすい構文。
   • this の継承など、従来の function とは異なる特性。

4. スプレッド構文 (...):

   • オブジェクトや配列のコピー、展開が簡単にできる。

---

結論

このコードは、TypeScript のモダンな書き方を多用しており、読みやすく型安全なコードを書くための実践例です。特にジェネリクスや分割代入、アロー関数は TypeScript を使う際の基本的かつ便利なテクニックです。