Property trong TypeScript

Khái niệm về "Property" là một phần quan trọng giúp xây dựng và tổ chức mã nguồn một cách có tổ chức và hiệu quả. Property, đơn giản nhưng đa dạng, không chỉ giúp lưu trữ thông tin mà còn tạo nên cấu trúc chặt chẽ cho các đối tượng.

Trong chủ đề này, sẽ tìm hiểu sâu hơn về Property trong TypeScript, từ khái niệm cơ bản đến các loại Property đặc biệt, cũng như cách sử dụng chúng trong môi trường lập trình thực tế. Hãy cùng bắt đầu hành trình này và tìm hiểu thế giới đa dạng của Property trong TypeScript.

Property là gì?

Property trong TypeScript đơn giản là các thuộc tính, thông tin được gắn liền với một đối tượng. Đây có thể là các giá trị dữ liệu, chức năng, hoặc thậm chí là các đặc tính đặc biệt của đối tượng đó.

Vai trò và ứng dụng của Property trong TypeScript:

Bài viết này được đăng tại [free tuts .net]

• Lưu trữ thông tin: Property giúp lưu trữ thông tin đặc trưng cho một đối tượng, cho phép đánh giá và thao tác dữ liệu.
• Tạo cấu trúc: Property làm nền tảng cho việc xây dựng cấu trúc của đối tượng, giúp tổ chức mã nguồn một cách có tổ chức và dễ hiểu.

Khai báo Property

Sử dụng từ khóa let và const để khai báo Property:

• Trong TypeScript, sử dụng từ khóa let để khai báo một biến có thể thay đổi giá trị và const để khai báo một biến không thể thay đổi giá trị sau khi đã gán.

let quantity: number = 10;  // Property có thể thay đổi giá trị
const pi: number = 3.14;   // Property không thể thay đổi giá trị

Kiểu dữ liệu của Property

• TypeScript là ngôn ngữ tĩnh kiểu, do đó,mình thường xác định kiểu dữ liệu của Property để TypeScript có thể kiểm tra kiểu và giúp tránh lỗi không mong muốn.

let username: string = "John";   // Property với kiểu dữ liệu là string
let age: number = 25;            // Property với kiểu dữ liệu là number
let isActive: boolean = true;    // Property với kiểu dữ liệu là boolean

Việc xác định kiểu dữ liệu giúp TypeScript cung cấp gợi ý thông tin, kiểm tra lỗi và tối ưu hóa mã nguồn.

Loại Property trong TypeScript

Readonly Property

Đặc điểm của Readonly Property:

• Readonly Property là những thuộc tính mà giá trị chỉ có thể được gán một lần và không thể thay đổi sau khi đã được gán.

Cách sử dụng Readonly Property trong TypeScript:

• Mình sử dụng từ khóa readonly để khai báo Readonly Property.

class Circle {
   readonly pi: number = 3.14;
}

let circle = new Circle();
console.log(circle.pi);  // Đọc giá trị của Readonly Property

Optional Property

Đặc điểm của Optional Property:

• Optional Property là những thuộc tính mà có thể tồn tại hoặc không trong một đối tượng.

Sử dụng Optional Property trong khai báo đối tượng:

• Mình sử dụng dấu ? sau tên thuộc tính để chỉ định là Optional Property.

interface Person {
   name: string;
   age?: number;  // Optional Property
}

let person1: Person = { name: "Alice" };
let person2: Person = { name: "Bob", age: 25 };

Accessor Property

Accessor Property là gì?

• Accessor Property là những thuộc tính có thể đọc và/hoặc ghi giá trị thông qua các phương thức đặc biệt là getter và setter.

Sử dụng getter và setter để quản lý Accessor Property:

• Mình sử dụng từ khóa get để định nghĩa getter và set để định nghĩa setter cho Accessor Property.

class Rectangle {
   private _width: number = 0;

   get width(): number {
      return this._width;
   }

   set width(value: number) {
      if (value > 0) {
         this._width = value;
      }
   }
}

let rectangle = new Rectangle();
rectangle.width = 10;    // Gọi setter
console.log(rectangle.width);  // Gọi getter

Trong ví dụ trên, getter và setter giúp kiểm soát việc đọc và ghi giá trị của thuộc tính _width.

Property và Interface trong TypeScript

Khai báo Property trong Interface

Sử dụng Interface để định nghĩa cấu trúc của đối tượng:

• Interface là một cách để định nghĩa cấu trúc của một đối tượng, bao gồm các thuộc tính và phương thức.

interface Car {
   brand: string;
   model: string;
   year: number;
}

let myCar: Car = { brand: "Toyota", model: "Camry", year: 2022 };

Property có thể là một phần của Interface:

• Property có thể được định nghĩa trong Interface và sau đó sử dụng trong các đối tượng được tạo từ Interface đó.

interface Person {
   name: string;
   age: number;
}

let person: Person = { name: "John", age: 30 };

Inheritance và Property

Kế thừa Property từ Interface cha:

• Một Interface con có thể kế thừa các Property từ Interface cha, giúp tái sử dụng và mở rộng cấu trúc.

interface Shape {
   color: string;
}

interface Square extends Shape {
   sideLength: number;
}

let square: Square = { color: "red", sideLength: 5 };

Override và mở rộng Property trong Interface con:

• Interface con có thể override và mở rộng các Property từ Interface cha.

interface Animal {
   sound: string;
}

interface Dog extends Animal {
   sound: string; // Override
   breed: string; // Extend
}

let dog: Dog = { sound: "Woof", breed: "Golden Retriever" };

Trong ví dụ trên, Interface Dog kế thừa Property sound từ Interface Animal, nhưng override giá trị và mở rộng thêm Property breed.

Một số Best Practices khi sử dụng Property trong TypeScript

Quy tắc đặt tên Property

Sử dụng Camel Case hoặc Pascal Case cho tên Property:

• Tuân thủ quy tắc đặt tên giúp làm cho mã nguồn dễ đọc và thống nhất với quy tắc chung của ngôn ngữ.

// Không tốt
let my_variable: number = 5;

// Tốt
let myVariable: number = 10;

Tuân thủ quy tắc đặt tên để làm cho mã nguồn dễ đọc:

• Sử dụng tên Property mô tả chức năng và ý nghĩa của chúng, giúp người đọc hiểu rõ hơn về mục đích sử dụng.

// Không tốt
let a: number = 5;

// Tốt
let numberOfApples: number = 10;

Kiểm soát truy cập đối với Property

Sử dụng public, private, và protected để kiểm soát truy cập:

• Xác định rõ phạm vi truy cập của Property giúp ngăn chặn truy cập trái phép và duy trì tính đóng gói.

class BankAccount {
   private balance: number = 1000;

   withdraw(amount: number): void {
      if (amount <= this.balance) {
         this.balance -= amount;
      } else {
         console.log("Insufficient funds!");
      }
   }
}

Hiểu rõ về các nguyên tắc encapsulation và abstraction:

• Encapsulation giúp che dấu thông tin chi tiết và chỉ hiển thị những gì cần thiết bên ngoài.
• Abstraction giúp tạo ra các thuộc tính và phương thức mức độ trừu tượng, giảm sự phức tạp và làm cho mã nguồn dễ hiểu.

class User {
   private username: string;

   constructor(username: string) {
      this.username = username;
   }

   getUsername(): string {
      return this.username;
   }
}

Trong ví dụ trên, username được ẩn đi và chỉ có thể được truy cập thông qua phương thức getUsername(). Điều này giúp bảo vệ thông tin và tạo ra một mức độ trừu tượng.

Ví dụ minh họa về sử dụng Property trong TypeScript

Một số ví dụ cụ thể về khai báo và sử dụng Property trong TypeScript:

Readonly Property:

• Trong ví dụ này, sẽ tạo một lớp Person với một Readonly Property là birthYear, giá trị của nó chỉ được gán một lần.

class Person {
   readonly birthYear: number;

   constructor(year: number) {
      this.birthYear = year;
   }
}

let john = new Person(1990);
console.log(john.birthYear);  // 1990

Optional Property:

• Mình sẽ tạo một Interface Book với một Optional Property là author.

interface Book {
   title: string;
   author?: string;
}

let book1: Book = { title: "The Great Gatsby" };
let book2: Book = { title: "To Kill a Mockingbird", author: "Harper Lee" };

Accessor Property:

• Mình sẽ tạo một lớp Temperature với Accessor Property là celsius và fahrenheit, nơi có thể đọc giá trị nhiệt độ ở cả hai đơn vị.

class Temperature {
   private _celsius: number = 0;

   get celsius(): number {
      return this._celsius;
   }

   set celsius(value: number) {
      this._celsius = value;
   }

   get fahrenheit(): number {
      return (this._celsius * 9) / 5 + 32;
   }

   set fahrenheit(value: number) {
      this._celsius = ((value - 32) * 5) / 9;
   }
}

let temperature = new Temperature();
temperature.celsius = 25;
console.log(temperature.celsius);      // 25
console.log(temperature.fahrenheit);   // 77

Property trong Interface và Inheritance:

• Mình sẽ tạo một Interface Vehicle với Property brand, sau đó tạo một Interface con Car kế thừa từ Vehicle và mở rộng thêm Property model.

interface Vehicle {
   brand: string;
}

interface Car extends Vehicle {
   model: string;
}

let myCar: Car = { brand: "Toyota", model: "Camry" };

Trong ví dụ này, Car kế thừa brand từ Vehicle và mở rộng thêm model. Mỗi chiếc xe có thể được biểu diễn với cả hai thông tin này.

Kết bài

Trên hành trình này, mình đã khám phá sâu vào tìm hiểu về Property trong TypeScript, từ những điểm cơ bản như Readonly Property, Optional Property đến những khái niệm cao cấp như Accessor Property và sự tích hợp linh hoạt trong Interface và Inheritance.

Mình đã thấy rằng việc sử dụng Property không chỉ đơn thuần là lưu trữ dữ liệu mà còn giúp xây dựng cấu trúc, kiểm soát truy cập, và tạo ra những đối tượng dễ hiểu và tái sử dụng. Việc tuân thủ các quy tắc đặt tên và kiểm soát truy cập là quan trọng để tạo ra mã nguồn linh hoạt và dễ bảo trì.

Cuối cùng, qua những ví dụ cụ thể, mình hy vọng rằng bạn đã có cái nhìn rõ ràng hơn về cách sử dụng Property trong TypeScript và có thêm kiến thức để áp dụng vào các dự án thực tế. Hãy tiếp tục khám phá và xây dựng những ứng dụng TypeScript mạnh mẽ!