TypeScript Academy · Pelajaran

Utilitas pipe dan flow Bertipe

Bangun pipeline dari kiri ke kanan dengan inferensi yang akurat.

Pelajaran 4 dari 413 langkah

Utilitas pipe dan flow Bertipe adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Dari compose ke alur

Alur meneruskan sebuah nilai melalui fungsi-fungsi dari kiri ke kanan, sesuai urutan pembacaan yang paling disukai banyak orang. pipe(x, f, g) berarti g(f(x)).

Alur Dua Langkah

Alur paling sederhana menerima sebuah nilai dan satu fungsi, lalu mengembalikan hasilnya. Membacanya dari atas ke bawah sesuai dengan urutan eksekusi.

const pipe2 = <A, B>(a: A, f: (a: A) => B): B => f(a);
console.log(pipe2(5, n => n + 1)); // 6

Meneruskan Nilai Melalui Beberapa Fungsi

Alur dengan tiga argumen menerapkan fungsi-fungsi secara berurutan. Keluaran dari setiap langkah menjadi masukan untuk langkah berikutnya.

function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C {
  return g(f(a));
}
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
console.log(pipe(5, inc, dbl)); // 12

Pembacaan dari Kiri ke Kanan

Berbeda dengan compose, pipe mencantumkan langkah-langkah sesuai urutan pelaksanaannya. pipe(5, inc, dbl) menambah nilai terlebih dahulu, lalu menggandakannya, persis seperti yang ditulis.

console.log(pipe(5, dbl, inc)); // 11 (double then inc)

Mengapa Diperlukan Beberapa Bentuk Deklarasi

Tempat pemanggilan yang berbeda dapat meneruskan jumlah fungsi yang berbeda. Agar setiap jumlah argumen dapat diberi tipe secara tepat, pipe menggunakan deklarasi tanda tangan fungsi, satu untuk setiap panjang yang didukung.

function pipe<A, B>(a: A, f: (a: A) => B): B;
function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C;
function pipe(a: unknown, ...fns: Function[]): unknown {
  return fns.reduce((v, fn) => fn(v), a);
}

Setiap Deklarasi Merangkai Tipe

Deklarasi untuk dua fungsi merangkai A -> B; deklarasi untuk tiga fungsi merangkai A -> B -> C. Compiler memilih deklarasi yang sesuai berdasarkan jumlah fungsi yang Anda teruskan.

Implementasi Saat Berjalan

Di bawah berbagai deklarasi tersebut, satu reduce menerapkan setiap fungsi secara bergiliran. Signature implementasinya menggunakan tipe yang longgar, sedangkan pemanggil melihat deklarasi yang tepat.

function pipe(a: any, ...fns: Array<(x: any) => any>): any {
  return fns.reduce((acc, fn) => fn(acc), a);
}
console.log(pipe("  hi ", s => s.trim(), s => s.toUpperCase())); // HI

Perubahan Tipe di Sepanjang Alur

Karena setiap deklarasi merangkai generik, sebuah alur dapat mengubah nilai melalui beberapa tipe dengan tetap diperiksa sepenuhnya oleh sistem tipe.

const out = pipe("hello", s => s.length, n => n > 3);
console.log(out); // true (string -> number -> boolean)

flow: Alur Tanpa Nilai

flow mirip dengan alur, tetapi hanya menerima fungsi-fungsinya dan mengembalikan fungsi baru. Anda memberikan nilainya nanti, sehingga cara ini sangat cocok untuk penggunaan kembali.

const flow = <A, B, C>(f: (a: A) => B, g: (b: B) => C) =>
  (a: A): C => g(f(a));
const process = flow((n: number) => n + 1, (n: number) => n * 2);
console.log(process(5)); // 12

alur dibandingkan flow dan compose

pipe menerapkan fungsi pada sebuah nilai dari kiri ke kanan; flow membangun fungsi dari kiri ke kanan yang dapat digunakan kembali; compose membangun fungsi dari kanan ke kiri. Pilihlah berdasarkan urutan pembacaan dan kebutuhan penggunaan kembali.

Alur Pemrosesan Praktis

Pustaka seperti fp-ts dan Effect menyediakan pipe yang kuat dan sepenuhnya bertipe, dengan banyak deklarasi. Membangun versi kecil sendiri menunjukkan dengan tepat cara kerja pengetikannya.

Pemeriksaan Singkat

Pemeriksaan singkat tentang pelajaran ini.

Jawab di pelajaran interaktif

Ringkasan

pipe(x, f, g) = g(f(x)) berjalan dari kiri ke kanan dan menggunakan deklarasi tanda tangan fungsi untuk memberi tipe pada setiap jumlah argumen secara tepat, dengan satu implementasi reduce. flow adalah varian tanpa argumen eksplisit yang mengembalikan fungsi yang dapat digunakan kembali.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 101
Pelajaran: 352

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Utilitas pipe dan flow Bertipe” gratis?

Ya — teks lengkap “Utilitas pipe dan flow Bertipe” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Utilitas pipe dan flow Bertipe”?

Bangun pipeline dari kiri ke kanan dengan inferensi yang akurat. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Utilitas pipe dan flow Bertipe” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy