- vừa được xem lúc

Sử dụng Getters và Setters trong TypeScript

0 0 19

Người đăng: Gấu con

Theo Viblo Asia

Ví dụ bên dưới là một class Person có 3 thuộc tính: age, firstName, và lastName:

class Person { public age: number; public firstName: string; public lastName: string; }

Để truy cập các thuộc tính của class Person, bạn có thể làm như sau:

let person = new Person();
person.age = 26; 

Giả sử bạn gán một giá trị, cái giá trị được người dùng nhập từ form input để gán đến thuộc tính age:

person.age = inputAge; 

Dó là giá trị nhập từ form input của người dùng, nên inputAge có thể là bất kỳ số nào. Để đảm bảo tính hợp lệ của tuổi, bạn có thể kiểm tra trước khi gán giá trị như sau:

if( inputAge > 0 && inputAge < 200 ) { person.age = inputAge;
} 

Nếu sử dụng đoạn kiểm tra này ở khắp nơi trong dự án, code của chúng ta sẽ bị lặp lại nhiều lần và trở nên cồng kềnh, khó bảo trì.
Để tránh lặp lại việc kiểm tra này, bạn có thể sử dụng setters và getters. Các setters và getters cho phép bạn kiểm soát quyền truy cập vào các thuộc tính của lớp.
chú ý:

  • Một phương thức getter trả về giá trị của thuộc tính
  • Một phương thức setter thì cập nhật giá trị của thuộc tính

Một phương thức getter bắt đầu với từ khóa get, một phương thức setter bắt đầu với từ khóa set.

class Person { private _age: number; private _firstName: string; private _lastName: string; public get age() { return this._age; } public set age(theAge: number) { if (theAge <= 0 || theAge >= 200) { throw new Error('The age is invalid'); } this._age = theAge; } public getFullName(): string { return `${this._firstName} ${this._lastName}`; }
} 

Cách hoạt động:

  • Đầu tiên chúng ta thay đổi mức truy cập các thuộc tính age, firstName, và lastName từ public đến private.
  • Thứ hai, thay đổi thuộc tính age đến _age.
  • Thứ ba, tạo phương thức getter và setter cho thuộc tính _age. Trong phương thức setter, hãy kiểm tra tính hợp lệ của độ tuổi đầu vào trước khi gán nó cho thuộc tính _age.

Bây giờ, bạn có thể truy cập phương thức setter age như sau:

let person = new Person();
person.age = 10;

Lưu ý rằng lệnh gọi tới setter không có dấu ngoặc đơn như một phương thức thông thường. Khi bạn gọi person.age, phương thức setter với age sẽ được gọi. Nếu bạn chỉ định giá trị age không hợp lệ, setter với age sẽ gây ra lỗi:

person.age = 0;

Error:

Error: The age is invalid

Khi bạn truy cập vào person.age, getter với age sẽ được gọi.
Phần sau thêm getters và setters vào thuộc tính firstName và lastName.

class Person { private _age: number; private _firstName: string; private _lastName: string; public get age() { return this._age; } public set age(theAge: number) { if (theAge <= 0 || theAge >= 200) { throw new Error('The age is invalid'); } this._age = theAge; } public get firstName() { return this._firstName; } public set firstName(theFirstName: string) { if (!theFirstName) { throw new Error('Invalid first name.'); } this._firstName = theFirstName; } public get lastName() { return this._lastName; } public set lastName(theLastName: string) { if (!theLastName) { throw new Error('Invalid last name.'); } this._lastName = theLastName; } public getFullName(): string { return `${this.firstName} ${this.lastName}`; }
} 

Tóm tắt:

  • Sử dụng TypeScript getters/setters để kiểm soát các thuộc tính truy cập của một class

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 500

- vừa được xem lúc

Type annotation vs Type Inference - Typescript

Trong bài viết này, chúng ta sẽ tìm hiểu kỹ về TypeScript bằng cách tìm hiểu sự khác biệt giữa kiểu chú thích và kiểu suy luận. Tôi sẽ cho rằng bạn có một số kinh nghiệm về JavaScript và biết về các kiểu cơ bản, như chuỗi, số và boolean.

0 0 32

- vừa được xem lúc

Type Annotation và Type Inference trong TypeScript là gì?

Khi làm việc với javascript chắc hẳn các bạn đã quá quen với việc dùng biến mà không cần phải quan tâm đến kiểu dữ liệu của nó là gì phải không? Đúng là mới đầu tiếp cận với Typescript mình cũng cảm thấy nó khá là phiền vì cần phải khai báo đủ type để nó chặt chẽ hơn. Lúc đó mình còn nghĩ: " JavaScr

0 0 25

- vừa được xem lúc

Tìm hiểu TypeScript và kiến thức cơ bản

TypeScript là gì. TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules.

0 0 35

- vừa được xem lúc

TypeScript - P1: Vì sao TypeScript được yêu thích đến vậy?

Trải nghiệm thực tế. Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi.

0 1 58

- vừa được xem lúc

4 Tính năng rất hay từ TypeScript

Xin chào các bạn hôm nay mình xin chia sẽ những tính năng rất hay của TypeScript (TS), các bạn cùng tìm hiểu nhé. Ngoài việc set Type cho biến, tham số hay function thì ví dụ khi bạn nhìn vào một tham

0 0 82