letを使わずにts-patternを使って可読性高く変数を定義する

はじめに

複雑なSwitch文やIf文はts-patternを使うと型安全に操作ができるので、使ってみてはどうですか？という記事です。

多数の条件分岐を持つlet

let environment = '';
if (isDev) {
  environment = 'dev';
} else if (isQA) {
  environment = 'QA';
} else if (isStaging) {
  environment = 'Staging';
} else {
  environment = 'Production';
}

上記はある環境を変数に入れる文です。これは極端な例ですが、if文の条件が多いとコードの可読性が悪くなります。
そんな時に、ts-patternを使用することで、型安全性と高い可読性を持つコードを作成できます。

ts-pattern

https://github.com/gvergnaud/ts-pattern

ts-patternを使用すると、以下のようにコードを書くことができます。

const environment = match({ isDev, isQA, isStaging })
  .with({ isDev: true, isQA: false, isStaging: false }, () => 'dev')
  .with({ isDev: false, isQA: true, isStaging: false }, () => 'QA')
  .with({ isDev: false, isQA: false, isStaging: true }, () => 'Staging')
  .otherwise(() => 'Production');

終わりに

色々な使い道がありますが、可読性を高く変数にセットできる方法も一つだと学びました。