TypeScriptの便利機能

あまり知られてないけど、便利な機能を紹介します。

1. NonNullable 型

NonNullable 型は、null や undefined が許容されない型を明示的に作成する際に非常に便利です。

function processValue(value: string | null | undefined) {
  // valueがnullまたはundefinedでない場合にのみ処理を行いたい
  if (value !== null && value !== undefined) {
    const nonNullableValue: NonNullable<typeof value> = value;
    // ここで nonNullableValue は string 型として扱われる
    console.log(nonNullableValue.toUpperCase());
  }
}

2. ReturnType 型

ReturnType 型は、関数が返す型を再利用する場合に非常に便利。

function createUser() {
  return {
    id: 1,
    name: 'John Doe',
    age: 25
  };
}

type User = ReturnType<typeof createUser>;

function logUser(user: User) {
  console.log(`User: ${user.name}, Age: ${user.age}`);
}

const user = createUser();
logUser(user);

3. Conditional Types

条件型を使うことで、動的に型を選択することができます。

type CheckString<T> = T extends string ? "This is a string" : "This is not a string";

type A = CheckString<string>;  // "This is a string"
type B = CheckString<number>;  // "This is not a string"

4. Template Literal Types

テンプレートリテラル型を使うと、複雑な文字列操作が型システムで表現可能になります。

type EventName = "click" | "hover";
type EventHandlerName = `on${Capitalize<EventName>}`;

function addEventHandler(event: EventHandlerName, handler: () => void) {
  console.log(`Added handler for ${event}`);
}

addEventHandler("onClick", () => console.log("Clicked"));  // 有効
addEventHandler("onHover", () => console.log("Hovered"));  // 有効
// addEventHandler("onTap", () => {});  // エラー: "onTap" は EventHandlerName に割り当てられない

5. Key Remapping in Mapped Types（マップ型でのキーの再マッピング）

キーの再マッピングを使うと、オブジェクトのプロパティ名を動的に変更できます。

type Original = {
  name: string;
  age: number;
};

type RenamedKeys<T> = {
  [K in keyof T as `new_${K}`]: T[K];
};

type NewObject = RenamedKeys<Original>;
// NewObject は { new_name: string; new_age: number; } 型になる

6. Indexed Access Types（インデックスアクセス型）

インデックスアクセス型を使うと、オブジェクトや配列の特定のプロパティの型を取得できます。

type User = {
  id: number;
  name: string;
  age: number;
};

type UserIdType = User['id'];  // number 型
type UserNameType = User['name'];  // string 型

function getUserName(user: User): UserNameType {
  return user.name;
}

7. Module Augmentation（モジュール拡張）

モジュール拡張を使うと、既存のライブラリやモジュールに独自の機能や型を追加できます。

import * as _ from 'lodash';

declare module 'lodash' {
  interface LoDashStatic {
    customFunction(): void;
  }
}

_.customFunction = () => {
  console.log("Custom function added to lodash");
};

_.customFunction();  // "Custom function added to lodash" が出力される