Operador de canalización de TypeScript

Escribir llamadas a funciones encadenadas en TypeScript

Es hora de un nuevo operador

Si usa mucho las funciones de Typecript, es posible que haya sentido el deseo de escribir mejor su código cuando algunas funciones están encadenadas. Aquí hay un ejemplo de lo que quiero decir con eso.

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")));

El principal problema es que tienes que adaptar tu modelo mental de la jerarquía de llamadas a funciones a la especificación de Typecript. Específicamente, cada función toma el valor de retorno de otra función como entrada, lo que da como resultado un código donde el valor de entrada original se coloca en el borde derecho.

Esto no es un problema de ninguna manera. El código funciona bien, y una vez que te has acostumbrado a la sintaxis de un lenguaje de programación, estas construcciones comienzan a sentirse naturales.

Lo que hace el operador de la tubería de manera diferente

Al utilizar el operador de canalización nuevo y actualmente experimental, Typescript le permite escribir tales llamadas a funciones encadenadas de izquierda a derecha, donde la entrada original está ahora en el borde izquierdo.

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;

En mi opinión, la sintaxis propuesta es muy amigable para los principiantes, ya que se parece más al lenguaje humano. Y al evitar las llamadas a funciones anidadas, el estilo del código en general es más limpio y más legible.

Paso a paso

Al momento de escribir, las cosas aún se encuentran en un desarrollo muy temprano. La función propuesta no debe usarse en ningún tipo de código de producción, sino solo para un pequeño proyecto paralelo con el que jugar. Para un inicio rápido, Firefox admite la sintaxis de forma nativa después de configurar el indicador de función "--enable-pipeline-operator". También hay un complemento de babel disponible.

Todavía hay algunas preguntas abiertas, por ejemplo, cómo manejar llamadas a funciones asíncronas en una cadena de funciones usando el nuevo operador. Sin embargo, esta característica parece muy interesante, aunque no traerá ninguna característica nueva sustancial. La sintaxis propuesta se ve muy bien y estoy ansioso por esperar el borrador final del equipo de TypeScript.