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

Sử dụng Interface trong TypeScript

0 0 31

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

Theo Viblo Asia

Giới thiệu interfaces trong TypeScript

Interfaces trong TypeScript định nghĩa một tiêu chuẩn trong code của bạn. Chúng cung cấp các tên rõ ràng để kiểm tra loại dữ liệu.
Ví dụ:

function getFullName(person: { firstName: string; lastName: string
}) { return `${person.firstName} ${person.lastName}`;
} let person = { firstName: 'John', lastName: 'Doe'
}; console.log(getFullName(person)); 

Output:

John Doe

Trong ví dụ trên, trình biên dịch sẽ kiểm tra các đối số bạn truyền vào hàm getFullName().
Nếu đối số có hai thuộc tính là kiểu string, thì trình biên dịch sẽ không cảnh báo lỗi. Ngược lại, nó sẽ hiển thị ra lỗi.
Như bạn thấy ví dụ trên làm cho code khó đọc, để giải quyết vấn đề này, TypeScript giới thiệu một khái niệm về interfaces.
Ví dụ sau sử dụng một interface gọi là Person, cái có 2 thuộc tính là string:

interface Person { firstName: string; lastName: string;
}

Theo convention, tên của các interface sẽ được viết theo kiểu camel case(quy tắc lạc đà). Quy tắc sử dụng ký tự đầu tiên của từ tiếp theo viết hoa để nối giữa các tến.
Ví dụ, Person, UserProfile, FullName.
Sau khi định nghĩa interface Person, bạn có thể sử dụng nó như một type. Bạn có thể chú thích tham số hàm với name interface:

function getFullName(person: Person) { return `${person.firstName} ${person.lastName}`;
} let john = { firstName: 'John', lastName: 'Doe'
}; console.log(getFullName(john));

Mã code bây giờ dễ đọc hơn trước phải không nào.
Hàm getFullName() sẽ chấp nhận bất kỳ đối số nào có hai thuộc tính là string. Và nó không nhất thiết phải có chính xác hai thuộc tính string. Hãy xem ví dụ:

let jane = { firstName: 'Jane', middleName: 'K.' lastName: 'Doe', age: 22
};

Vì đối tượng jane có hai thuộc tính chuỗi firstNamelastName, bạn có thể chuyển nó vào hàm getFullName () như sau:

let fullName = getFullName(jane);
console.log(fullName); // Jane Doe

Optional properties

Một interface có thể có các thuộc tính tùy chọn. Để khai báo một thuộc tính tùy chọn, bạn sử dụng dấu ( ? ) đặt ở cuối tên thuộc tính trong khai báo, ví dụ:

interface Person { firstName: string; middleName?: string; lastName: string;
}

Trong ví dụ trên, interface Person có 2 thuộc tính bắt buộc phải có và một thuộc tính tùy chọn(thuộc tính không bắt buộc).
Ví dụ sử dụng interface Person trong hàm getFullName() :

function getFullName(person: Person) { if (person.middleName) { return `${person.firstName} ${person.middleName} ${person.lastName}`; } return `${person.firstName} ${person.lastName}`;
}

Readonly properties

Nếu thuộc tính chỉ có thể sửa đổi khi đối tượng được tạo lần đầu tiên, bạn có thể sử dụng từ khóa readonly trước tên của thuộc tính:

interface Person { readonly ssn: string; firstName: string; lastName: string; } let person: Person;
person = { ssn: '171-28-0926', firstName: 'John', lastName: 'Doe'
}

Trong ví dụ này, thuộc tính ssn không thể thay đổi:

person.ssn = '171-28-0000';

Error:

error TS2540: Cannot assign to 'ssn' because it is a read-only property.

Tóm tắt.

  • Các Interfaces trong TypeScript định nghĩa một tiêu chuẩn trong code của bạn và cung cấp các tên rõ ràng để kiểm tra kiểu.
  • Các Interfaces có thể có các thuộc tính optional hoặc các thuộc tính readonly .

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