TypeScript Academy · บทเรียน

พารามิเตอร์ rest ในฟังก์ชัน

กำหนดชนิดข้อมูลให้ฟังก์ชันที่รับอาร์กิวเมนต์ได้ไม่จำกัดจำนวน

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

ฟังก์ชันที่รับอาร์กิวเมนต์หลายตัว

พารามิเตอร์ rest ทำให้ฟังก์ชันรับอาร์กิวเมนต์ได้ไม่จำกัดจำนวน โดยรวบรวมไว้ในอาร์เรย์เดียว TypeScript จะกำหนดชนิดให้อาร์เรย์นั้น ทำให้ปลอดภัยแม้มีการเรียกฟังก์ชันด้วยจำนวนอาร์กิวเมนต์ที่แตกต่างกัน

พารามิเตอร์ rest พื้นฐาน

เติม ... ไว้หน้าพารามิเตอร์ตัวสุดท้ายและกำหนดชนิดอาร์เรย์ให้พารามิเตอร์นั้น ภายในฟังก์ชัน พารามิเตอร์นี้จะทำงานเหมือนอาร์เรย์ทั่วไป

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
console.log(sum(1, 2, 3, 4)) // 10

การเรียกโดยไม่มีอาร์กิวเมนต์

พารามิเตอร์ rest สามารถรับอาร์กิวเมนต์เป็นศูนย์ตัวได้ อาร์เรย์จะว่างเปล่าโดยอัตโนมัติ ไม่จำเป็นต้องจัดการกรณีที่ไม่มีอาร์กิวเมนต์เป็นพิเศษ

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
console.log(sum()) // 0

Rest หลังพารามิเตอร์ที่กำหนดตายตัว

พารามิเตอร์ rest สามารถอยู่หลังพารามิเตอร์ที่กำหนดตายตัวได้ แต่ต้องอยู่ท้ายสุด พารามิเตอร์ที่กำหนดตายตัวจะถูกผูกก่อน ส่วนที่เหลือทั้งหมดจะเข้าไปอยู่ในอาร์เรย์ rest

function join(separator: string, ...parts: string[]): string {
  return parts.join(separator)
}
console.log(join("-", "a", "b", "c")) // a-b-c

Rest มีได้เพียงหนึ่งตัวและต้องอยู่ท้ายสุด

คุณมีพารามิเตอร์ rest ได้ไม่เกินหนึ่งตัว และจะมีสิ่งใดอยู่หลังพารามิเตอร์นั้นไม่ได้ การวางพารามิเตอร์หลัง rest จะทำให้เกิดข้อผิดพลาดทางไวยากรณ์

// function bad(...nums: number[], last: number) {} // Error
function ok(first: number, ...rest: number[]) {
  return first + rest.length
}
console.log(ok(10, 1, 2)) // 12

ข้อจำกัดชนิดของสมาชิก

ชนิดสมาชิกของอาร์เรย์ rest จะจำกัดชนิดของอาร์กิวเมนต์ทุกตัว การส่งค่าชนิดที่ไม่ถูกต้องจะถูกตรวจพบขณะคอมไพล์

function tags(...labels: string[]): string {
  return labels.join(",")
}
console.log(tags("a", "b"))
// tags("a", 5) // Error: 5 is not a string

Rest กับชนิดยูเนียน

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

function show(...items: (string | number)[]): string {
  return items.map(String).join(" ")
}
console.log(show("x", 1, "y", 2)) // x 1 y 2

Rest กับชนิดทูเพิล

พารามิเตอร์ rest สามารถกำหนดชนิดเป็นทูเพิลเพื่ออธิบายโครงสร้างที่มีส่วนกำหนดตายตัวตามด้วยส่วนที่มีจำนวนเปลี่ยนแปลงได้ ในที่นี้ อาร์กิวเมนต์ตัวแรกเป็น string ตามด้วย number จำนวนเท่าใดก็ได้

function record(...args: [string, ...number[]]): string {
  const [label, ...values] = args
  return label + ": " + values.join(",")
}
console.log(record("scores", 9, 8, 7))

Rest แบบทูเพิลบังคับจำนวนสมาชิก

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

function record(...args: [string, ...number[]]): number {
  return args.length
}
console.log(record("x")) // 1
// record() // Error: missing string argument

การกระจายค่าในการเรียก rest

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

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
const values = [1, 2, 3]
console.log(sum(...values)) // 6

การใช้ Rest ในทางปฏิบัติ

พารามิเตอร์ rest เป็นพื้นฐานของตัวช่วยบันทึกข้อมูล ตัวจัดรูปแบบ และเครื่องมือทางคณิตศาสตร์ รวมถึงสิ่งใดก็ตามที่จัดการข้อมูลนำเข้าจำนวนเปลี่ยนแปลงได้ด้วยชนิดร่วมกันหรือชนิดที่มีโครงสร้าง

function max(first: number, ...rest: number[]): number {
  return rest.reduce((m, n) => (n > m ? n : m), first)
}
console.log(max(3, 7, 2, 9, 1)) // 9

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

ทดสอบความเข้าใจเกี่ยวกับพารามิเตอร์ rest ที่มีการระบุชนิด

สรุปทบทวน

พารามิเตอร์ rest ใช้ ... กับพารามิเตอร์ตัวสุดท้ายเพื่อรวบรวมอาร์กิวเมนต์เพิ่มเติมเข้าไว้ในอาร์เรย์ที่มีการระบุชนิด พารามิเตอร์นี้ต้องอยู่ท้ายสุดและมีได้เพียงหนึ่งตัว คุณสามารถกำหนดชนิดเป็นอาร์เรย์ทั่วไป อาร์เรย์ยูเนียน หรือทูเพิล เพื่อแสดงโครงสร้างที่มีส่วนกำหนดตายตัวตามด้วยส่วนที่มีจำนวนเปลี่ยนแปลงได้และบังคับจำนวนสมาชิก กระจายอาร์เรย์ที่มีอยู่แล้วตรงจุดเรียกเพื่อส่งค่าให้พารามิเตอร์ rest

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

บทเรียน “พารามิเตอร์ rest ในฟังก์ชัน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พารามิเตอร์ rest ในฟังก์ชัน”

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

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

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

บทเรียน “พารามิเตอร์ rest ในฟังก์ชัน” ใช้เวลานานแค่ไหน

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

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

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

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

พารามิเตอร์ rest ในฟังก์ชัน
การกระจายค่าในอาร์เรย์และออบเจ็กต์
สมาชิก rest ของทูเพิล
การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์

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