TypeScript Academy · บทเรียน

ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล

สร้างไปป์ไลน์จากซ้ายไปขวาพร้อมการอนุมานที่แม่นยำ

บทเรียน 4 จาก 413 ขั้นตอน

ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

จาก compose ไปสู่ pipe

pipe ส่งค่าผ่านฟังก์ชันจาก ซ้ายไปขวา ซึ่งเป็นลำดับการอ่านที่คนส่วนใหญ่ชอบ pipe(x, f, g) หมายถึง g(f(x))

pipe สองขั้นตอน

pipe ที่ง่ายที่สุดรับค่าและฟังก์ชันหนึ่งตัว แล้วคืนผลลัพธ์ การอ่านจากบนลงล่างสอดคล้องกับลำดับการทำงาน

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

การส่งค่าผ่านฟังก์ชันหลายตัว

pipe ที่รับอาร์กิวเมนต์สามตัวจะเรียกใช้ฟังก์ชันตามลำดับ เอาต์พุตของแต่ละขั้นตอนจะกลายเป็นอินพุตของขั้นตอนถัดไป

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

การอ่านจากซ้ายไปขวา

ต่างจาก compose ตรงที่ pipe แสดงขั้นตอนตามลำดับที่ทำงาน pipe(5, inc, dbl) จะเพิ่มค่าก่อนแล้วคูณสอง ตรงตามที่เขียนไว้

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

เหตุใดจึงต้องใช้โอเวอร์โหลด

จุดเรียกใช้งานแต่ละจุดอาจส่งฟังก์ชันจำนวนต่างกัน เพื่อระบุชนิดของจำนวนอาร์กิวเมนต์แต่ละแบบอย่างแม่นยำ pipe จึงใช้ ลายเซ็นโอเวอร์โหลด หนึ่งรายการต่อความยาวที่รองรับ

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

โอเวอร์โหลดแต่ละรายการเชื่อมชนิดข้อมูล

โอเวอร์โหลดแบบสองรายการเชื่อม A -> B ส่วนโอเวอร์โหลดแบบสามรายการเชื่อม A -> B -> C คอมไพเลอร์จะเลือกโอเวอร์โหลดที่ตรงกันตามจำนวนฟังก์ชันที่คุณส่งเข้าไป

การทำงานจริงขณะรันไทม์

ภายใต้โอเวอร์โหลดเหล่านี้ มีการใช้ reduce เพียงรายการเดียวเพื่อเรียกใช้ทุกฟังก์ชันตามลำดับ ลายเซ็นของการทำงานจริงใช้ชนิดข้อมูลที่ไม่เคร่งครัด แต่ผู้เรียกใช้งานจะเห็นโอเวอร์โหลดที่ระบุชนิดไว้อย่างแม่นยำ

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

การเปลี่ยนชนิดข้อมูลตามสาย pipe

เนื่องจากโอเวอร์โหลดแต่ละรายการเชื่อมเจเนอริกเข้าด้วยกัน pipe จึงสามารถแปลงค่าผ่านชนิดข้อมูลหลายแบบได้ โดยยังคงได้รับการตรวจสอบชนิดข้อมูลอย่างครบถ้วน

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

flow: pipe โดยไม่ต้องส่งค่า

flow คล้ายกับ pipe แต่รับเฉพาะฟังก์ชันและคืนฟังก์ชันใหม่ คุณจะส่งค่าในภายหลัง จึงเหมาะอย่างยิ่งสำหรับการนำกลับมาใช้ซ้ำ

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

pipe เทียบกับ flow และ compose

pipe ใช้ฟังก์ชันกับค่าจากซ้ายไปขวา ส่วน flow สร้างฟังก์ชันจากซ้ายไปขวาที่นำกลับมาใช้ซ้ำได้ และ compose สร้างฟังก์ชันจากขวาไปซ้าย ให้เลือกตามลำดับการอ่านและความต้องการนำกลับมาใช้ซ้ำ

สายการประมวลผลในทางปฏิบัติ

ไลบรารีอย่าง fp-ts และ Effect มี pipe ที่แข็งแกร่งและระบุชนิดข้อมูลได้ครบถ้วน พร้อมโอเวอร์โหลดจำนวนมาก การสร้าง pipe ขนาดเล็กด้วยตนเองช่วยให้เห็นอย่างชัดเจนว่าการระบุชนิดข้อมูลทำงานอย่างไร

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจสั้น ๆ เกี่ยวกับบทเรียนนี้

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

pipe(x, f, g) = g(f(x)) ทำงานจากซ้ายไปขวา และใช้ ลายเซ็นโอเวอร์โหลด เพื่อระบุชนิดของจำนวนอาร์กิวเมนต์แต่ละแบบอย่างแม่นยำ โดยมีการทำงานจริงผ่าน reduce เพียงรายการเดียว flow คือรูปแบบที่ไม่ต้องระบุค่า ซึ่งคืนฟังก์ชันที่นำกลับมาใช้ซ้ำได้

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 101
บทเรียน: 352

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล”

สร้างไปป์ไลน์จากซ้ายไปขวาพร้อมการอนุมานที่แม่นยำ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล
การทำเคอร์รีและการประยุกต์ใช้บางส่วน
การประกอบฟังก์ชันด้วยชนิดข้อมูล
ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล

← กลับไปที่ TypeScript Academy