Время для нового оператора
Если вы много используете функции 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.