【TypeScript】型の変更が伴うデータの整形と整形後の型の定義を同時に行う

対象読者

TypeScriptで型定義疲れしている皆様。
型の変更が伴うデータの整形と整形後の型の定義を同時に行いたい皆様。

はじめに

TypeScriptを使用していて、軽微な型の違いがあるものに対して都度調整と新たな型の命名をしていることに疲れてしまいました。（コードのメンテナンス性も下がる）
その時に実践した方法をメモします。

結論

classを積極的に使おう。

内容

型の変更が伴うデータの整形と整形後の型の定義を同時に行っていきます。

例 : openAPIから型を生成したケース

openAPIから型を生成し、下のようなArticleの配列が返却されることがわかっているとします。

Article {
  id: string;
  title: string;
  imageUrl: string;
  mainText: string;
  publishedAt: Date;
}

しかし、フロント側ではpublishedAtは文字列として整形して表示したいので、表示側では

FormattedArticle {
  id: string;
  title: string;
  imageUrl: string;
  mainText: string;
  publishedAt: string;
}

として使っていきたいです。

このようなケースで、Dataとしてclassの方を定義

import { Article } from '@/openAPIから生成/article';

export class Data {
  readonly data: Article;

  constructor(data: Article) {
    this.data = data;
  }

  get article() {
    return {
      id: this.data.id,
      title: this.data.title,
      imageUrl: this.data.imageUrl,
      articleUrl: this.data.articleUrl,
      mainText: this.data.mainText,
      publishedAt: 【stringに整形してreturn】,
    };
  }
}

ここが本番↓

export type Article = typeof Data.prototype.article;

Data classのprototypeの中にgetterが返却するものの型（publishedAtはstringになっている）が取り出せます。

あとは適宜APIから返却されたデータに対してDataインスタンス化するマップ処理をするなどしてください。

これをすることで型の変更が伴う値の整形と型の生成が同時に行えました。
おめでとう！！！