Tìm hiểu về Type Annotations trong TypeScript

Trong quá trình học về TypeScript mình muốn note lại một số kiến thức, hy vọng bài viết phần nào giúp ích cho các bạn trong quá trình học TypeScript ^^.

Hôm nay chúng ta sẽ tìm hiểu về Type Annotations trong TypeScript nhé 😅.

Type Annotations trong TypeScript

Type annotations dịch ra là kiểu chú thích, đúng như tên gọi của nó, Type annotations giúp chúng ta chỉ định rõ type(kiểu) cho một biến, functions, objects.

Khi chúng ta sử dụng Type Annotations, thì khi sử dụng, giá trị của biến, functions,... phải phù hợp với kiểu đã đặt. Nếu ta sử dụng một kiểu khác, TypeScript sẽ báo lỗi.

Cú pháp của nó cũng rất đơn giản, ta chỉ cần sử dụng : type vào sau một đối tượng cần định kiểu với type là bất kỳ kiểu nào ví dụ như: boolean, number, string, null,...

Variables

Khi sử dụng biến trong JavaScript ta thường đơn giản chỉ cần tạo biến và gán giá trị cho biến, hoặc khởi tạo biến này😁.

Tuy nhiên, trong một số trường hợp ta không biết rõ biến này thuộc kiểu nào và điều này có thể khiến chương trình của chúng ta bị một số lỗi không mong muốn. Để khắc phục vấn đề này ta có thể sử dụng Type Annotations trong TypeScript để định kiểu rõ ràng cho biến.

Chúng ta có thể sử dụng Type Annotations khi khởi tạo một biến hoặc khi gán giá trị cho biến:

let varName: type;
let varName: type = value;
const constName: type = value;

Thêm một vài ví dụ về biến nữa nhé:

const old: number = 22;
let blog: string = "homiedev.com";
let isHandsome: boolean = false;
let nullValue: null = null;

Chúng ta thử khai báo biến name với kiểu là string:

let name: string;

Sau đó ta thử set một giá trị number gán cho biến này:

let name: string;
name = 123;

Lúc này ta sẽ nhận được một thông báo lỗi: "Type 'number' is not assignable to type 'string'". Như vậy khi sử dụng Type Annotations ta có thể tránh được một số lỗi về kiểu giá trị không phù hợp trong một số tình huống.

Arrays

Với Array chúng ta sẽ định kiểu với cú pháp : type[]. [] có nhiệm vụ cho TypeScript biết rằng đây là một mảng và các element trong mảng sẽ có kiểu giống như type ta đã set.

Ví dụ:

let users: string[] = ['Mi', 'Minh', 'Manh'];

Ta cũng có thể set kiểu cho một biến là một mảng như sau:

let numbers: number[];

Giả sử một mảng có nhiều hơn 1 type ta có thể sử dụng | để báo cho TypeScript biết rằng biến này có thể có nhiều hơn 1 type ^^:

const dates: (string | Date)[] = [new Date(), "08/01/2022"];

Objects

Khi sử dụng Type Annotations cho object, ta sẽ cần phải định kiểu cho các property có trong object như sau:

let person: {
   name: string;
   address: string;
   age: number;
};

person = {
   name: 'Nguyen Anh Vu',
   address: 'Ho Chi Minh City',
   age: 25,
};

Khi chúng ta định kiểu cho các property thì giá trị nhận được phải đáp ứng kiểu đã khai báo và phải đầy đủ property như khai báo thì lúc này mới chính xác và không bị báo lỗi ^^.

Functions

Đối với functions, ta sẽ khai báo kiểu cho đối số của hàm và chúng ta còn có thể khai báo kiểu trả về của hàm ^^.

const add = (a: number, b: number): number => {
  return a + b;
};

Để khai báo kiểu cho đối số thì ta chỉ cần sử dụng : type cho từng đối số. Nếu muốn định kiểu return cho hàm thì ta sẽ sử dụng : type vào sau (đối số,...): type giống ví dụ ở trên.

Ta có thể khai báo kiểu cho một biến với kiểu là function như sau:

let sayHi: (user: string) => string; // Type Annotations

sayHi = (user: string) => {
  return `Hi! ${user}`;
};

Nếu function của chúng ta không đúng như đã khai báo thì ta sẽ nhận được thông báo lỗi:

let sayHi: (user: string) => string; // Type Annotations

sayHi = (user: string) => {
  console.log(user);
};

// lỗi: Type 'void' is not assignable to type 'string'

Lý do ở trên là hàm sayHi yêu cần ta phải return về một string. Nhưng function gán cho sayHi không thỏa mãn điều đó, function này chỉ thực hiện console.log(user). Nếu function không cần có giá trị return thì chúng ta có thể sử dụng kiểu trả về là void:

let sayHi = (user: string): void => {
  console.log(user);
};

Kết luận

Hy vọng sau bài viết này các bạn có thể hiểu rõ hơn về Type Annotations trong TypeScript.

Chúc các bạn học tốt ^^. Hẹn gặp các bạn trong các bài viết sắp tới nhé.