Sử dụng class trong TypeScript

Trong JavaScript thì không có khái niệm class như các ngôn ngữ Java, C#. Nhưng trong phiên bản ES5 bạn có thể sử dụng một hàm khởi tạo và kế thừa nguyên mẫu để tạo một class. Sử dụng class trong ES5 Ví dụ: functionPerson(ssn, firstName, lastName){this.ssn = ssn;this.firstName = firstName;this.lastName = lastName;} Bây giờ,

Trong JavaScript thì không có khái niệm class như các ngôn ngữ Java, C#. Nhưng trong phiên bản ES5 bạn có thể sử dụng một hàm khởi tạo và kế thừa nguyên mẫu để tạo một class.

Sử dụng class trong ES5

Ví dụ:

functionPerson(ssn, firstName, lastName){this.ssn = ssn;this.firstName = firstName;this.lastName = lastName;}

Bây giờ, bạn có thể định nghĩa một phương thức prototype để lấy full name của person như bên dưới.

Person.prototype.getFullName=function(){return`${this.firstName}${this.lastName}`;}

Tiếp theo, bạn có thể sử dụng class Person bằng cách tạo một new object:

let person =newPerson('171-28-0926','John','Doe');console.log(person.getFullName());

Output:

John Doe

Sử dụng class trong ES6, ví dụ:

classPerson{
    ssn;
    firstName;
    lastName;constructor(ssn, firstName, lastName){this.ssn = ssn;this.firstName = firstName;this.lastName = lastName;}}

Trong class Person, hàm constructor được xác định rõ ràng và được đặt bên trong lớp. Phần sau sẽ thêm phương thức getFullName():

classPerson{
    ssn;
    firstName;
    lastName;constructor(ssn, firstName, lastName){this.ssn = ssn;this.firstName = firstName;this.lastName = lastName;}getFullName(){return`${this.firstName}${this.lastName}`;}}

Sử dụng lớp Person cũng giống như hàm khởi tạo Person:

let person =newPerson('171-28-0926','John','Doe');console.log(person.getFullName());

Sử dụng class trong TypeScript

Class trong TypeScript sẽ thêm type annotations(chú thích kiểu) đến các thuộc tính và phương thức trong class. Ví dụ:

classPerson{
    ssn:string;
    firstName:string;
    lastName:string;constructor(ssn:string, firstName:string, lastName:string){this.ssn = ssn;this.firstName = firstName;this.lastName = lastName;}getFullName():string{return`${this.firstName}${this.lastName}`;}}

Khi thêm chú thích kiểu cho các thuộc tính, constructor, phương thức, Trình biên dịch TypeScript sẽ thực hiện các kiểm tra kiểu tương ứng.
Ví dụ, bạn không thể khởi tạo ssn với một number. Code bên dưới sẽ hiển thị lỗi:

let person =newPerson(171280926,'John','Doe');

Tóm tắt:

  • Sử dụng từ khóa class để định nghĩa một class trong TypeScript.
  • TypeScript tận dùng cú pháp của lớp ES6 và thêm các chú thích kiểu để làm cho lớp chặt chẽ hơn.

Nguồn: viblo.asia

Bài viết liên quan

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con

Khi nào nên dùng main, section, article, header, footer, và aside trong HTML5

HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th