TypeScript Academy · บทเรียน

อาร์เรย์และทูเพิล readonly

ป้องกันอาร์เรย์และทูเพิลจากเมธอดที่เปลี่ยนแปลงข้อมูล

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

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

อาร์เรย์แบบอ่านอย่างเดียว

อาร์เรย์แบบอ่านอย่างเดียวคืออาร์เรย์ที่คุณอ่านได้แต่แก้ไขไม่ได้ เขียนได้เป็น readonly number[] หรือเขียนเทียบเท่ากันเป็น ReadonlyArray<number> ชนิดของสมาชิกยังคงเดิม มีเพียงการเปลี่ยนแปลงข้อมูลเท่านั้นที่ถูกป้องกัน

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

ชนิด ReadonlyArray

ReadonlyArray<T> เป็นรูปแบบทั่วไปที่มีความหมายเหมือนกับ readonly T[] ทุกประการ เลือกใช้รูปแบบที่อ่านเข้าใจได้ดีกว่าได้ ทั้งสองรูปแบบใช้แทนกันได้

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

ไม่มีเมธอดที่เปลี่ยนแปลงข้อมูล

อาร์เรย์แบบอ่านอย่างเดียวจะไม่มีเมธอดที่เปลี่ยนแปลงข้อมูลเลย เมธอด push, pop, splice, sort และ reverse จะใช้งานไม่ได้ เพราะชนิดข้อมูลนี้ไม่มีเมธอดเหล่านี้อยู่จริง

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

เมธอดที่ไม่เปลี่ยนแปลงข้อมูลยังใช้ได้

เมธอดที่ส่งคืนค่าใหม่แทนการเปลี่ยนแปลงข้อมูล — map, filter, concat และ slice — ยังคงใช้ได้ เมธอดเหล่านี้สร้างอาร์เรย์ใหม่โดยไม่แตะต้องอาร์เรย์เดิม

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

อาร์เรย์แบบอ่านอย่างเดียวในฐานะพารามิเตอร์

การรับ readonly T[] ในฟังก์ชันเป็นการบอกว่าคุณจะไม่เปลี่ยนแปลงอาร์เรย์ของผู้เรียก นอกจากบันทึกเจตนาแล้ว ยังทำให้คอมไพเลอร์บังคับใช้คำสัญญานี้ได้

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

อาร์เรย์ที่เปลี่ยนแปลงได้สามารถกำหนดให้กับชนิดอ่านอย่างเดียวได้

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

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

ทูเพิลแบบอ่านอย่างเดียว

ทูเพิลก็สามารถเป็นแบบอ่านอย่างเดียวได้เช่นกัน: readonly [string, number] ชนิดและลำดับของสมาชิกจะคงที่ และไม่สามารถกำหนดค่าใหม่ให้ตำแหน่งแต่ละตำแหน่งได้

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

ทูเพิลแบบอ่านอย่างเดียวป้องกันการเปลี่ยนแปลงข้อมูล

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

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

การยืนยันแบบค่าคงที่เทียบกับชนิด readonly

วิธีสร้างอาร์เรย์แบบอ่านอย่างเดียวสองวิธีนี้มีความแตกต่างเล็กน้อย การใส่คำอธิบายชนิด readonly number[] จะคงชนิดสมาชิกทั่วไปไว้ ส่วน as const ไปไกลกว่านั้น โดยสร้างทูเพิลแบบอ่านอย่างเดียวที่มีชนิดค่าตามตัวอักษร

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

การเลือกใช้ระหว่างสองแบบ

ใช้คำอธิบายชนิด readonly T[] เมื่อคุณต้องการความไม่เปลี่ยนแปลงแต่ยังต้องการชนิดสมาชิกทั่วไป ใช้ as const เมื่อคุณต้องการค่าตามตัวอักษรที่แน่นอนด้วย เช่น เมื่อต้องการสร้างชนิดยูเนียน

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

ความไม่เปลี่ยนแปลงสำหรับข้อมูลที่ใช้ร่วมกัน

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

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

แบบทดสอบสั้นๆ

ทดสอบความเข้าใจเกี่ยวกับอาร์เรย์และทูเพิลแบบ readonly

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

สรุป: อาร์เรย์และทูเพิลแบบ readonly

คุณได้เรียนรู้ว่า:

readonly T[] / ReadonlyArray<T> ป้องกันการเปลี่ยนแปลงข้อมูล แต่ยังอ่านข้อมูลและใช้เมธอดที่ไม่เปลี่ยนแปลงข้อมูลได้
เมธอดที่เปลี่ยนแปลงข้อมูล เช่น push/splice จะถูกนำออกจากชนิดข้อมูล
ทูเพิลแบบอ่านอย่างเดียวจะกำหนดทั้งความยาวและชนิดของสมาชิกให้คงที่
as const ไปไกลกว่านั้น โดยสร้างทูเพิลแบบอ่านอย่างเดียวที่มีชนิดค่าตามตัวอักษร

ถัดไปคือชนิดคอลเลกชันแบบ readonly

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

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

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

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

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

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

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

บทเรียน “อาร์เรย์และทูเพิล readonly” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “อาร์เรย์และทูเพิล readonly”

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

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

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

บทเรียน “อาร์เรย์และทูเพิล readonly” ใช้เวลานานแค่ไหน

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

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

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

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

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