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

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ