TypeScript Academy · บทเรียน

ReadonlyArray และ ReadonlyMap

ใช้ชนิดข้อมูลคอลเลกชัน readonly ในตัว

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

ชนิดคอลเลกชันแบบอ่านอย่างเดียว

นอกเหนือจากอาร์เรย์แล้ว TypeScript ยังมีคอลเลกชันในตัวแบบอ่านอย่างเดียว ได้แก่ ReadonlyArray<T>, ReadonlyMap<K, V> และ ReadonlySet<T> แต่ละชนิดเปิดให้ใช้เฉพาะการทำงานที่ไม่เปลี่ยนแปลงข้อมูลของส่วนติดต่อเท่านั้น

const arr: ReadonlyArray<number> = [1, 2, 3];
console.log(arr.length, arr.includes(2));

สรุป ReadonlyArray

ReadonlyArray<T> รองรับการวนซ้ำ การเข้าถึงตามดัชนี และเมธอดอย่าง map กับ filter แต่ไม่รองรับ push, pop หรือการกำหนดค่าให้ดัชนี นี่คือรูปแบบอาร์เรย์ของตระกูลแบบอ่านอย่างเดียว

const tags: ReadonlyArray<string> = ['ts', 'js'];
console.log(tags.map((t) => t.toUpperCase()));
// tags.push('css'); // Error

ReadonlyMap

ReadonlyMap<K, V> ช่วยให้คุณค้นหาข้อมูล วนซ้ำ และตรวจสอบคีย์ได้ แต่ไม่มี set, delete และ clear ในมุมมองของผู้ใช้ เนื้อหาภายในแผนที่จะไม่เปลี่ยนแปลง

const ages: ReadonlyMap<string, number> = new Map([['Ada', 30], ['Sam', 25]]);
console.log(ages.get('Ada'), ages.has('Sam'));
// ages.set('Lee', 40); // Error

การอ่านจาก ReadonlyMap

การทำงานสำหรับอ่านทั้งหมดยังคงอยู่ ได้แก่ get, has, size, keys, values, entries และการวนซ้ำ มีเพียงเมธอดที่เปลี่ยนแปลงข้อมูลเท่านั้นที่ถูกนำออก

const m: ReadonlyMap<string, number> = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
  console.log(k, v);
}
console.log('size:', m.size);

ReadonlySet

ReadonlySet<T> รองรับการตรวจสอบสมาชิกและการวนซ้ำ แต่ไม่มี add, delete และ clear ใช้ชนิดนี้กับชุดค่าที่อนุญาตแบบตายตัว

const allowed: ReadonlySet<string> = new Set(['read', 'write']);
console.log(allowed.has('read'), allowed.has('delete'));
// allowed.add('admin'); // Error

การวนซ้ำ ReadonlySet

คุณสามารถวนซ้ำ ReadonlySet และอ่านค่า size ได้ เพียงแต่ไม่สามารถเปลี่ยนเนื้อหาภายใน จึงเหมาะอย่างยิ่งสำหรับรายการอนุญาตและชุดสิทธิ์

const perms: ReadonlySet<string> = new Set(['view', 'edit']);
perms.forEach((p) => console.log('perm:', p));
console.log('count:', perms.size);

การส่งชนิดอ่านอย่างเดียวให้ฟังก์ชัน

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

function describe(set: ReadonlySet<string>): string {
  return 'has ' + set.size + ' items';
}
const s = new Set(['x', 'y']);
console.log(describe(s));

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

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

function keys(m: ReadonlyMap<string, number>): string[] {
  return Array.from(m.keys());
}
const real = new Map([['a', 1]]);
console.log(keys(real));

ส่วนติดต่อคอลเลกชันที่ไม่เปลี่ยนแปลง

ชนิดคอลเลกชันแบบอ่านอย่างเดียวอธิบาย view ที่ไม่เปลี่ยนแปลง อ็อบเจกต์พื้นฐานอาจยังเปลี่ยนแปลงได้จากที่อื่น ชนิดแบบอ่านอย่างเดียวเพียงจำกัดสิ่งที่การอ้างอิงนี้สามารถทำได้

const backing = new Set<number>([1, 2]);
const view: ReadonlySet<number> = backing;
// view.add(3); // Error through the readonly view
backing.add(3); // but the original can still mutate
console.log(view.size);

การเลือกชนิดอ่านอย่างเดียวที่เหมาะสม

เลือกชนิดอ่านอย่างเดียวให้ตรงกับโครงสร้างข้อมูลของคุณ: ReadonlyArray สำหรับรายการที่มีลำดับ, ReadonlyMap สำหรับการค้นหาด้วยคู่คีย์-ค่า และ ReadonlySet สำหรับสมาชิกที่ไม่ซ้ำ แต่ละชนิดบังคับให้ข้อมูลไม่เปลี่ยนแปลงตามรูปแบบของมัน

const roles: ReadonlySet<string> = new Set(['admin', 'user']);
const limits: ReadonlyMap<string, number> = new Map([['admin', 100]]);
console.log(roles.has('user'), limits.get('admin'));

สถานะที่ใช้ร่วมกันได้อย่างปลอดภัยยิ่งขึ้น

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

class Registry {
  private items = new Set<string>();
  add(name: string): void { this.items.add(name); }
  get all(): ReadonlySet<string> { return this.items; }
}
const r = new Registry();
r.add('a');
console.log(r.all.has('a'));

ตรวจสอบอย่างรวดเร็ว

ทดสอบความเข้าใจของคุณเกี่ยวกับชนิดคอลเลกชันแบบอ่านอย่างเดียว

สรุป: คอลเลกชันแบบอ่านอย่างเดียว

คุณได้เรียนรู้ตระกูลคอลเลกชันแบบอ่านอย่างเดียว:

ReadonlyArray<T>, ReadonlyMap<K, V> และ ReadonlySet<T> เปิดให้ใช้เฉพาะการทำงานสำหรับอ่าน
เมธอดที่เปลี่ยนแปลงข้อมูล (set, add, delete, push) จะถูกนำออก
คอลเลกชันที่เปลี่ยนแปลงได้สามารถกำหนดให้ชนิดแบบอ่านอย่างเดียวที่สอดคล้องกันได้
ชนิดเหล่านี้เหมาะอย่างยิ่งสำหรับชนิดพารามิเตอร์และชนิดค่าที่ส่งกลับ เพื่อให้สถานะที่ใช้ร่วมกันปลอดภัยยิ่งขึ้น

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

function count(s: ReadonlySet<number>): number {
  return s.size;
}
console.log(count(new Set([1, 2, 3])));

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

บทเรียน “ReadonlyArray และ ReadonlyMap” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ReadonlyArray และ ReadonlyMap”

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

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

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

บทเรียน “ReadonlyArray และ ReadonlyMap” ใช้เวลานานแค่ไหน

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

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

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

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

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