Оператор конвейера машинописного текста

Написание связанных вызовов функций в Typescript

Tom Машинопись и JavaScript, Функциональное программирование, Руководства по кодированию

Время для нового оператора

Если вы много используете функции 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")));

typescriptLanguageCheck out all coding posts

Основная проблема заключается в том, что вам нужно адаптировать свою мысленную модель иерархии вызовов функций к спецификации 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;

typescriptLanguageCheck out all coding posts

Предлагаемый синтаксис, на мой взгляд, очень удобен для новичков, поскольку он больше похож на человеческий язык. А за счет исключения вызовов вложенных функций стиль кода в целом становится более чистым и читаемым.

Шаг за шагом

На момент написания статьи все еще находятся на очень ранней стадии разработки. Предлагаемая функция не должна использоваться ни в каком производственном коде, а только для небольшого побочного проекта, с которым можно поиграть. Для быстрого начала: Firefox изначально поддерживает синтаксис после установки флага функции «--enable-pipeline-operator». Также доступен плагин babel.

Есть еще несколько открытых вопросов, например, как обрабатывать вызовы асинхронных функций в цепочке функций с помощью оператора new. Тем не менее, эта функция выглядит очень увлекательно, хотя в ней не будет никаких существенных новых функций. Предлагаемый синтаксис выглядит действительно хорошо, и я очень хочу дождаться окончательного варианта от команды Typescript.

Действия

Feedback

Предлагаемые сообщения