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-plugin도 있습니다.

예를 들어 new 연산자를 사용하여 함수 체인에서 비동기 함수 호출을 처리하는 방법과 같은 몇 가지 공개 된 질문이 있습니다. 그러나이 기능은 실질적인 새로운 기능을 제공하지는 않지만 매우 흥미로워 보입니다. 제안 된 구문은 정말 좋아 보이며 Typescript 팀의 최종 초안을 기다리고 싶습니다.