Zenn
Open5

TypeScriptを関数型っぽく書くために

TypeScript
ken7253ken7253

関数型っぽく書くために気づいたことのメモ

  • 最近はフロントエンドでも関数型について考える機会がある
  • フロントエンドエンジニアとして関数型とどう向き合うべきなのかなどを書く
ken7253ken7253

文を式に変える

if文

三項演算子に変える。

const random = Math.random();

if(random > 0.5) {
  // ...
  return 'hoge';
} else {
  // ...
  return 'piyo';
}

const foo = random > 0.5 ? 'hoge' : 'piyo' ;

for文

配列を作ってmapなどで回す。
この時pushやpopのように元の配列を書き換えるメソッドを使ってしまうと副作用になってしまうので基本的に新しい配列を返すメソッドを使う。

switch文

三項演算子を組み合わせる？

const c = 
  a.name === "foo" ? fa(a) :
  a.name === "bar" ? fb(a) :
  fc(a);

throw文

エラーオブジェクトを返却するようにする。

const validate = (target: unknown): Error | boolean => {
  const err = new Error("validate failed.");
  const isCorrect = /[a-z]*/ui.test(target);
  const result = typeof target !== 'string' ? err : isCorrect;
}

そもそも例外を投げるのではなく、Result型などで表現する。

https://qiita.com/Kodak_tmo/items/d48eb3497be18896b999

try...catch文

処理に失敗したらnullになる変数とかを用意する？

const result = foo ?? new Error("hoge")

これも上記同様にそもそもtry...catchを使わないというのが良さそう。

関数宣言

関数式にする。

ken7253ken7253

副作用を分離したり参照透過性を守るために

関数には必ず入力と出力をもたせる

const x:number = 0;
const y:number = 2;
const sum = () => x + y;

const sum = (x: number, y: number):number => x + y;
sum(0, 2);