NEW KAWAII！TypeScriptで可愛いコードを書こう🍓

この記事はTypeScript Advent Calendar 2024 24日目の記事です。

はじめに

こんにちは！添田です！🌟
某アイドルの歌のタイトルみたいな名前ですが、実はTypeScriptの機能を可愛く紹介するNEW KAWAII記事なんです🎀

NEW KAWAII？！TypeScriptの魅力を発見しよう！

TypeScriptは進化を続けており、可愛くて便利な機能がどんどん追加されています！
今日はその中でも私がよく使う機能を、可愛く紹介していきますよ！
みなさんも一緒にKAWAIIコードでUpdateしてくださいね！

型エイリアスでアイドル情報を整理

// アイドルの基本情報を型エイリアスで定義
type Idol = {
  name: string;
  age: number;
  nickname?: string;  // オプショナルプロパティで愛称は任意に！
  memberColor: string;
};

// アイドル情報を作成
const idol: Idol = {
  name: "月足 天音",
  age: 25,
  nickname: "あまねき",
  memberColor: "赤"
};

// テンプレートリテラルでかわいく表示！
console.log(`${idol.name}は、${idol.age}歳で、愛称は『${idol.nickname}』です！メンバーカラーは、${idol.memberColor}！KAWAII！`);

// Union型で衣装の種類も定義できちゃう！
type Costume = "ステージ衣装" | "私服" | "特典会衣装";
const todaysCostume: Costume = "ステージ衣装"; // これ以外は指定できないから安心！

インターフェースでアイドルグループを表現

// アイドルグループのインターフェースを定義
interface IdolGroup {
  groupName: string;
  members: Idol[];
  debutDate: Date;
}

// 実際のグループを作成！
const fruitZipper: IdolGroup = {
  groupName: "FRUITS ZIPPER",
  members: [
    { name: "月足 天音", age: 25, memberColor: "赤" },
    // 他のメンバーも追加できます！
  ],
  debutDate: new Date("2022-04-10")
};

ジェネリクスでアイドルの活動を管理

// ジェネリクスを使って様々な活動を記録できるクラスを作成
class IdolActivity<T> {
  private activities: T[] = [];

  addActivity(activity: T): void {
    this.activities.push(activity);
  }

  getLatestActivity(): T | undefined {
    return this.activities[this.activities.length - 1];
  }
}

// ライブ情報を管理するクラスを作成
interface LiveInfo {
  title: string;
  date: Date;
  venue: string;
}

const lives = new IdolActivity<LiveInfo>();
lives.addActivity({
  title: "FRUITS ZIPPER JAPAN TOUR 2024 - AUTUMN - THE STORY OF SEVEN COLORS ＠東京ガーデンシアター",
  date: new Date("2024-12-16"),
  venue: "東京都 東京ガーデンシアター"
});

非同期処理：去り際も可愛く

// 握手会での非同期処理を可愛く表現！
async function handshakeEvent(seconds: number): Promise<string> {
  try {
    const message = await new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve(`${seconds}秒お話できて嬉しかったよ！また来てね💖`);
      }, seconds * 1000);
    });
    return message;
  } catch (error) {
    return "ごめんね、なにかエラーが起きちゃった...😢";
  }
}

// async/awaitで可愛く使う！
async function startHandshake() {
  const message = await handshakeEvent(3);
  console.log(message);
}

Optional Chaining & Nullish Coalescing：安全で可愛く

const fanClubMember = {
  name: "ふるっぱー1号",
  membership: {
    level: "おまいつ",
    points: 9999999999999
  }
};

// Optional Chainingで安全にアクセス！
const memberPoints = fanClubMember.membership?.points ?? 0;
console.log(`現在のポイントは${memberPoints}ポイントです✨`);

// Nullish Coalescingでデフォルト値も可愛く設定！
const memberNickname = fanClubMember.nickname ?? "名無しのファン";

デコレータでアイドル活動をログ化（TypeScript 5.0以降）

// メソッドデコレータを作成
function logActivity(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`アイドル活動ログ: ${propertyKey}を実行します！`);
    const result = originalMethod.apply(this, args);
    console.log(`アイドル活動完了！`);
    return result;
  };
  return descriptor;
}

class IdolPerformance {
  @logActivity
  perform(songTitle: string) {
    return `${songTitle}を歌います！`;
  }
}

まとめ

今回は「NEW KAWAII！」というタイトルにぴったりな、TypeScriptの新しい機能を紹介しました😊

紹介した機能をまとめると、

• 型エイリアスとインターフェース：データの形を可愛く定義！❤️‍🔥
• ジェネリクス：様々な活動を型安全に管理！❤️‍🔥
• 非同期処理：Promise & async/await で綺麗に制御！❤️‍🔥
• Optional Chaining & Nullish Coalescing：安全で可愛いコードに！❤️‍🔥
• デコレータ：コードを可愛くデコレーション！❤️‍🔥

これらの機能を使えば、コードがもっともっとKAWAIIになりますね！

今回登場した今イチオシのアイドル！