Typescriptパイプライン演算子

Typescriptで連鎖関数呼び出しを書く

新しいオペレーターの時間

Typescriptの関数を頻繁に使用している場合は、いくつかの関数がチェーンされているときに、コードをより適切に記述したいという欲求を感じているかもしれません。これが私が意味することの例です。

const scream = (s: string) => s + "!";
const quote = (s: string) => `"${s}"`;
cosnt toUpperCase = (s: string) => s.toUpperCase();

// The first function that executes is
// 'toUpperCase', whose results is proved
// to 'scream', which in turn returns to
// 'quote', which returns the final string
//
// "HELLO WORLD!"
const text = quote(scream(toUpperCase("Hello World")));

主な問題は、関数呼び出しの階層のメンタルモデルをTypescriptの仕様に適合させる必要があることです。具体的には、各関数は別の関数の戻り値を入力として受け取ります。これにより、元の入力値が右端に配置されるコードが生成されます。

これは決して問題ではありません。コードは問題なく機能し、プログラミング言語の構文に慣れると、そのような構造は自然に感じられるようになります。

パイプラインオペレーターの違い

Typescriptを使用すると、新しい現在実験的なパイプライン演算子を使用して、このような連鎖関数呼び出しを左から右に記述できます。元の入力は左端にあります。

const scream = (s: string) => s + "!";
const quote = (s: string) => `"${s}"`;
cosnt toUpperCase = (s: string) => s.toUpperCase();

// And here's the new sytanx, starting
// from left and movign throught the 
// call chain to the right.
// 
// It's immediately better to read and
// self explanatory, imho.
"Hello World" |> toUpperCase |> scream |> quote;

提案された構文は、人間の言語のように読めるので、私の意見では非常に初心者に優しいものです。また、ネストされた関数呼び出しを回避することで、コードスタイル全体がよりクリーンで読みやすくなります。

ステップバイステップ

執筆時点では、物事はまだ非常に初期の開発段階にあります。提案された機能は、いかなる種類の本番コードでも使用するべきではありませんが、ちょっとしたサイドプロジェクトでのみ使用する必要があります。クイックスタートとして、Firefoxは機能フラグ「--enable-pipeline-operator」を設定した後、構文をネイティブにサポートします。利用可能なbabelプラグインもあります。

new演算子を使用して一連の関数で非同期関数呼び出しを処理する方法など、まだいくつかの未解決の質問があります。この機能は、実質的な新機能をもたらさないものの、非常にエキサイティングに見えます。提案された構文は非常に見栄えがよく、Typescriptチームによる最終ドラフトを待ち望んでいます。