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

Sử dụng Type Annotations trong TypeScript

0 0 6

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

Theo Viblo Asia

Type Annotation là gì?

TypeScript sử dụng type annotations(chú thích kiểu dữ liệu) để chỉ định rõ ràng các kiểu dữ liệu cho các định danh như variables, function, objects, etc.
TypeScript sử dụng cú pháp : type sau một định danh để làm type annotations, và type có thể là bất kỳ loại dữ liệu hợp lệ nào.
Một định danh được chú thích với một loại dữ liệu, nó chỉ có thể sử dụng loại dữ liệu đó. Nếu định danh sử dụng một loại khác, trình biên dịch sẽ thông báo lỗi.

Type annotations với variables và constants

Bên dưới là cú pháp hiển thị type annotations cho variables và constants:

let variableName: type;
let variableName: type = value;
const constantName: type = value;

Trong cú pháp này, type annotation đứng sau tên biến hoặc hằng số và đứng trước dấu hai chấm ( : )
Ví dụ sử dụng number annotation cho biến:

let counter: number;

Sau đó, bạn có thể gán một số đến biến counter:

counter = 1;

Nếu bạn gán một string đến biến counter, bạn sẽ nhận một thông báo lỗi:

let counter: number;
counter = 'Hello'; // compile error 

Error:

Type 'string' is not assignable to type 'number'.

Bạn có thể vừa sử dụng một type annotation cho một biến và vừa khởi tạo một giá trị cho biến đó như sau:

let counter: number = 1;

Các ví dụ khác về primitive type annotations(chú thích kiểu nguyên thủy):

let name: string = 'John';
let age: number = 25;
let active: boolean = true;

Trong ví dụ này, biến name có kiểu string, biến age có kiểu number, và biến active có kiểu boolean.

Các ví dụ về Type annotation

Arrays
Để chú thích loại mảng, chúng tả sử dụng một ngoặc vuông : type[]

let arrayName: type[];

Ví dụ, phần sau khai báo một mảng các chuỗi:

let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary'];

Objects
Để chỉ định kiểu cho một đối tượng, bạn sử dụng chú thích kiểu đối tượng. Ví dụ:

let person: { name: string; age: number
}; person = { name: 'John', age: 25
}; // valid

Trong ví dụ trên, đối tượng person chỉ chấp nhận một đối tượng có 2 thuộc tính name có kiểu string và age có kiểu là number.

Function arguments & return types

Bên dưới là một hàm chú thích với parameter type annotation và trả về type annotation:

let greeting : (name: string) => string;

Trong ví dụ này, bạn có thể gán bất kỳ hàm nào chấp nhận một chuỗi và trả về một chuỗi cho biến greeting :

greeting = function (name: string) { return `Hi ${name}`;
};

Điều sau đây gây ra lỗi vì hàm được gán cho biến greeting không khớp với loại hàm của nó.

greeting = function () { console.log('Hello');
};

Error:

Type '() => void' is not assignable to type '(name: string) => string'. Type 'void' is not assignable to type 'string'.

Kiến thức cần nhớ:
Sử dụng type annotations với cú pháp : [type] để chỉ định một loại đặc biệt cho một variable, function, function return value, etc.

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