การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์
สร้าง API ที่ยืดหยุ่นด้วยชนิดข้อมูลทูเพิลแบบหลายอาร์กิวเมนต์
การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟังก์ชันแบบทั่วไปที่รับอาร์กิวเมนต์ได้หลายจำนวน
ชนิดทูเพิลที่รับสมาชิกได้หลายจำนวนช่วยให้ชนิดข้อมูลแบบทั่วไปสามารถจับและจัดการรายการอาร์กิวเมนต์ได้ ทำให้สร้างยูทิลิตีสำหรับต่อทูเพิล ส่งต่อพารามิเตอร์ และปรับรูปแบบลายเซ็นการเรียกใช้โดยตรวจสอบความปลอดภัยของชนิดข้อมูลได้อย่างสมบูรณ์
การจับอาร์กิวเมนต์เป็นทูเพิล
ชนิดข้อมูลแบบทั่วไปที่จำกัดด้วย unknown[] สามารถจับรายการอาร์กิวเมนต์ทั้งหมดเป็นชนิดทูเพิล T โดยรักษาชนิดข้อมูลและตำแหน่งของพารามิเตอร์แต่ละตัวไว้
function tuple<T extends unknown[]>(...args: T): T {
return args
}
const t = tuple("a", 1, true) // type [string, number, boolean]
console.log(t)การกระจายทูเพิลแบบทั่วไป
คุณสามารถกระจายทูเพิลแบบทั่วไปที่จับไว้ลงในรายการพารามิเตอร์อื่นได้ วิธีนี้จะส่งต่ออาร์กิวเมนต์พร้อมรักษาชนิดข้อมูลที่แน่นอนของอาร์กิวเมนต์เหล่านั้นไว้
function wrap<T extends unknown[]>(fn: (...args: T) => void) {
return (...args: T) => fn(...args)
}
const log = wrap((n: number, s: string) => console.log(n, s))
log(1, "hi")การต่อทูเพิลสองชุด
ชนิดทูเพิลที่รับสมาชิกได้หลายจำนวนมีประโยชน์อย่างมากเมื่อนำทูเพิลมารวมกัน การกระจายทูเพิลแบบทั่วไปสองชุดในชนิดข้อมูลผลลัพธ์จะสร้างผลลัพธ์ที่เป็นการต่อทูเพิลทั้งสองชุด
function concat<A extends unknown[], B extends unknown[]>(a: A, b: B): [...A, ...B] {
return [...a, ...b]
}
const r = concat([1, 2], ["a"]) // [number, number, string]
console.log(r)เหตุผลที่ชนิดข้อมูลผลลัพธ์แม่นยำ
เนื่องจาก [...A, ...B] กระจายทูเพิลแบบทั่วไปทั้งสองชุด ผลลัพธ์จึงรักษาชนิดข้อมูลและลำดับของสมาชิกแต่ละตัวไว้ ไม่ได้กลายเป็นเพียงอาร์เรย์ยูเนียนที่มีชนิดข้อมูลกว้างขึ้น
function concat<A extends unknown[], B extends unknown[]>(a: A, b: B): [...A, ...B] {
return [...a, ...b]
}
const r = concat([true], [42])
const flag: boolean = r[0]
const num: number = r[1]
console.log(flag, num)การเพิ่มอาร์กิวเมนต์ไว้ด้านหน้า
ทูเพิลที่รับสมาชิกได้หลายจำนวนช่วยให้คุณปรับรูปแบบรายการพารามิเตอร์ได้ เช่น สร้างฟังก์ชันที่เพิ่มอาร์กิวเมนต์นำหน้าให้กับลายเซ็นของฟังก์ชันเรียกกลับ
function withId<T extends unknown[]>(fn: (...args: T) => void) {
return (id: number, ...rest: T) => {
console.log("id", id)
fn(...rest)
}
}
const f = withId((msg: string) => console.log(msg))
f(7, "hello")การแยกชนิดข้อมูลส่วนหัว
เมื่อใช้พารามิเตอร์แบบทูเพิล คุณสามารถแยกชนิดข้อมูลของสมาชิกตัวแรกออกจากส่วนที่เหลือโดยใช้ทูเพิลแบบมีป้ายกำกับ แล้วดำเนินการกับแต่ละส่วนได้
function head<H, T extends unknown[]>(...args: [H, ...T]): H {
return args[0]
}
const h = head("first", 2, 3) // type string
console.log(h)ชนิดข้อมูลอรรถประโยชน์สำหรับพารามิเตอร์
ชนิดข้อมูล Parameters<F> ที่มีมาให้ในตัวจะแยกรายการอาร์กิวเมนต์ของฟังก์ชันออกมาเป็นทูเพิล โดยสร้างขึ้นบนชนิดทูเพิลที่รับสมาชิกได้หลายจำนวนเช่นกัน คุณสามารถนำพารามิเตอร์ของลายเซ็นหนึ่งไปใช้ที่อื่นได้
function greet(name: string, age: number) {}
type GreetArgs = Parameters<typeof greet> // [string, number]
const args: GreetArgs = ["Ada", 36]
console.log(args)การส่งต่อด้วยพารามิเตอร์
รวม Parameters เข้ากับการกระจายส่วนที่เหลือเพื่อสร้างตัวห่อหุ้มที่ส่งต่ออาร์กิวเมนต์ไปยังฟังก์ชันที่มีอยู่ โดยมีชนิดข้อมูลเหมือนกันทุกประการ
function add(a: number, b: number) { return a + b }
function traced(...args: Parameters<typeof add>): number {
console.log("calling add", args)
return add(...args)
}
console.log(traced(2, 3))การสร้างลายเซ็นแบบแบ่งรับอาร์กิวเมนต์
ทูเพิลที่รับสมาชิกได้หลายจำนวนช่วยให้สร้างตัวช่วยสำหรับการใช้งานบางส่วนได้ โดยจับอาร์กิวเมนต์บางส่วนไว้ตอนนี้ และรับส่วนที่เหลือภายหลัง พร้อมตรวจสอบชนิดข้อมูลทั้งหมด
function partial<A extends unknown[], B extends unknown[], R>(
fn: (...args: [...A, ...B]) => R,
...a: A
) {
return (...b: B) => fn(...a, ...b)
}
const addThree = (x: number, y: number, z: number) => x + y + z
const add5 = partial(addThree, 5)
console.log(add5(2, 3)) // 10จุดเด่นและข้อควรระวัง
ชนิดข้อมูลแบบทั่วไปของทูเพิลที่รับสมาชิกได้หลายจำนวนมอบเครื่องมือสำหรับปรับรูปแบบฟังก์ชันที่แม่นยำและนำกลับมาใช้ซ้ำได้ เช่น ตัวห่อหุ้ม ตัวส่งต่อ และตัวเชื่อมต่อ เครื่องมือเหล่านี้เป็นแนวคิดขั้นสูง จึงควรนำมาใช้เมื่อความแม่นยำของชนิดข้อมูลให้ประโยชน์อย่างแท้จริง
function pipe2<A extends unknown[], B, C>(
f: (...a: A) => B,
g: (b: B) => C
) {
return (...a: A) => g(f(...a))
}
const fn = pipe2((n: number) => n * 2, (n) => n + 1)
console.log(fn(5)) // 11ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับชนิดข้อมูลแบบทั่วไปของทูเพิลที่รับสมาชิกได้หลายจำนวน
ทบทวน
ชนิดทูเพิลที่รับสมาชิกได้หลายจำนวนช่วยให้ชนิดข้อมูลแบบทั่วไปจับรายการอาร์กิวเมนต์เป็นทูเพิล และกระจายทูเพิลเหล่านั้นในตำแหน่งพารามิเตอร์หรือผลลัพธ์ได้ ความสามารถนี้รองรับการต่อทูเพิล ([...A, ...B]) การส่งต่ออาร์กิวเมนต์ การแยกส่วนหัวและส่วนท้าย และการใช้งานบางส่วน โดยยังรักษาชนิดข้อมูลของสมาชิกแต่ละตัวไว้อย่างแม่นยำ ชนิดข้อมูลที่มีมาให้ในตัวอย่าง Parameters<F> ก็อาศัยกลไกเดียวกัน ควรใช้เครื่องมือเหล่านี้เมื่อการกำหนดชนิดข้อมูลของรูปแบบฟังก์ชันอย่างแม่นยำคุ้มค่ากับความซับซ้อน
คำถามที่พบบ่อย
บทเรียน “การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์”
สร้าง API ที่ยืดหยุ่นด้วยชนิดข้อมูลทูเพิลแบบหลายอาร์กิวเมนต์ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พารามิเตอร์ rest ในฟังก์ชัน
- การกระจายค่าในอาร์เรย์และออบเจ็กต์
- สมาชิก rest ของทูเพิล
- การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์