Boleh Ubah dan Tidak Boleh Ubah dalam TypeScript

Artikel ini menerangkan konsep boleh ubah dan tidak boleh ubah dalam TypeScript.

YouTube Video

Boleh Ubah dan Tidak Boleh Ubah dalam TypeScript

Apakah itu Boleh Ubah?

Boleh ubah bermaksud bahawa sesuatu nilai boleh diubah. Jenis rujukan seperti objek dan array adalah contoh tipikal struktur data yang boleh diubah.

Contoh Objek yang Boleh Ubah

1type Person = { name: string; age: number };
2
3// Mutable Example: Object
4let person: Person = { name: "Alice", age: 25 };
5person.age = 26;
6console.log(person); // { name: "Alice", age: 26 }

Dalam kod ini, sifat age dalam objek person diubah daripada 25 kepada 26. Oleh kerana objek dihantar melalui rujukan, kandungan di alamat memori yang disimpan dalam pembolehubah person diubah.

Contoh Array yang Boleh Ubah

1// Mutable Example: Array
2let numbers: number[] = [1, 2, 3];
3numbers.push(4);
4console.log(numbers); // [1, 2, 3, 4]

Dalam kod ini, kaedah push digunakan untuk menambahkan elemen baharu 4 ke array asal. Ini mengubah array asal, menjadikannya operasi yang boleh diubah.

Contoh dalam Fungsi

1// Mutable Example: Function
2function append(arr: number[], value: number): void {
3    arr.push(value); // Modify the original array
4    console.log(arr);
5}
6
7let nums: number[] = [1, 2, 3];
8append(nums, 4);
9console.log(nums); // [1, 2, 3, 4]

Apabila melaksanakan operasi boleh ubah di dalam fungsi, array asal juga berubah.

Apakah itu Tidak Boleh Ubah?

Tidak boleh ubah bermaksud bahawa sesuatu nilai tidak boleh diubah. Jenis primitif secara asasnya tidak boleh diubah.

Contoh Jenis Primitif yang Tidak Boleh Ubah

1// Immutable Example: String
2let str: string = "hello";
3str[0] = "H"; // Error: Index assignment is not allowed
4console.log(str); // "hello"

Cubaan untuk mengubah huruf pertama dalam rentetan str kepada H gagal kerana rentetan ialah tidak boleh ubah.

Contoh dalam Fungsi

1// Immutable Example: Function
2function increment(num: number): number {
3    num++; // This modifies only the local copy of num
4    return num;
5}
6
7let number: number = 10;
8console.log(increment(number)); // 11
9console.log(number); // 10 (original number remains unchanged)

Oleh kerana nombor tidak boleh diubah, operasi di dalam fungsi tidak akan menjejaskan pembolehubah asal.

Operasi Tidak Boleh Ubah pada Array

Array adalah boleh ubah, tetapi dengan mencipta array baharu daripada mengubah yang asal, operasi tidak boleh ubah dapat dicapai.

1// Create an array of numbers
2let numbers: number[] = [1, 2, 3];
3
4// Immutable Example: Creating a new array
5let newNumbers: number[] = [...numbers, 4];
6
7console.log(numbers); // [1, 2, 3] (original array is unchanged)
8console.log(newNumbers); // [1, 2, 3, 4] (new array with an added element)

Di sini, sintaks sebar (...) digunakan untuk mencipta array baharu newNumbers. Memandangkan array asal numbers kekal tidak berubah, ini adalah operasi tidak boleh diubah.

Manfaat Menggunakan Struktur Data Tidak Boleh Diubah

Peningkatan Kebolehjangkaan

Data yang tidak boleh diubah tidak berubah, menjadikan pengubahsuaian yang tidak dijangka kurang berkemungkinan dan mengurangkan peluang berlakunya pepijat.

Kompatibiliti dengan Perpustakaan Berdasarkan Ketakbolehubahan

Perpustakaan seperti React dan Redux sering direka berdasarkan data tidak boleh diubah, menjadikan pengurusan keadaan lebih mudah apabila digunakan dengan betul.

Menjadikan Objek Tidak Boleh Diubah dengan Object.freeze

Object.freeze boleh digunakan untuk menghalang pengubahsuaian pada objek.

1// Create a frozen object (properties cannot be modified)
2const person = Object.freeze({ name: "Alice", age: 25 });
3
4// Attempt to modify a property (ignored in non-strict mode, error in strict mode)
5person.age = 26;
6
7console.log(person); // { name: "Alice", age: 25 }

Walau bagaimanapun, Object.freeze hanya melakukan beku permukaan, bermaksud sifat objek bersarang kekal boleh diubah.

1// Create a frozen object with a nested object
2const user: Readonly<{ profile: { name: string } }> = Object.freeze({
3    profile: { name: "Bob" }
4});
5
6// Attempt to modify a nested property (this works because Object.freeze() is shallow)
7user.profile.name = "Charlie"; // No TypeScript error, but still mutable
8
9console.log(user.profile.name); // "Charlie" (nested object is still mutable)

Untuk mencipta objek yang benar-benar tidak boleh diubah, beku mendalam diperlukan.

 1// Function to deeply freeze an object, making all nested objects immutable
 2function deepFreeze<T>(obj: T): Readonly<T> {
 3    Object.freeze(obj);
 4    Object.getOwnPropertyNames(obj).forEach(prop => {
 5        const value = (obj as any)[prop];
 6        if (typeof value === "object" && value !== null) {
 7            deepFreeze(value);
 8        }
 9    });
10    return obj;
11}
12
13// Create a deeply frozen object
14const user = deepFreeze({
15  profile: { name: "Bob" }
16});
17
18// Attempt to modify a nested property
19// (this will now throw an error in strict mode)
20user.profile.name = "Charlie";  // No TypeScript error, but modification is not allowed at runtime
21
22console.log(user.profile.name); // "Bob" (unchanged due to deep freeze)

Ringkasan

• Data boleh diubah boleh diubah suai, dan termasuk objek serta array.
• Data tidak boleh diubah tidak boleh diubah suai, dan termasuk jenis primitif seperti string dan nombor.
• Dengan menggunakan sintaks sebar atau kaedah seperti map, operasi data tidak boleh diubah boleh dijalankan.
• Object.freeze dan deepFreeze boleh digunakan untuk menghalang pengubahsuaian pada objek.
• Menggunakan data tidak boleh diubah membantu menulis kod yang lebih dapat diramal dan kurang terdedah kepada ralat.

Mengamalkan reka bentuk tidak boleh diubah meningkatkan keselamatan dan kebolehbacaan kod, jadi gunakan dengan sepenuhnya!

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video