# TypeScript - Type Annotations: A Beginner's Guide

Xin chào bạn, ngôi sao lập trình tương lai! ? Chào mừng bạn đến với hành trình thú vị vào thế giới TypeScript và các chú thích kiểu. Là người giáo viên khoa học máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong cuộc phiêu lưu này. Đừng lo lắng nếu bạn mới bắt đầu lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và cùng nhau tiến hóa. Vậy, lấy cắp balo ảo của bạn, và cùng nhau lặn xuống!

## What Are Type Annotations? (Những gì là chú thích kiểu?)

Hãy tưởng tượng bạn đang chuẩn bị hành lý cho một chuyến đi. Bạn có những túi khác nhau cho những物品 khác nhau - một túi cho quần áo, một túi cho vật dụng cá nhân, và một túi cho điện tử. Các chú thích kiểu trong TypeScript giống như những nhãn trên những túi này. Chúng cho chúng ta và máy tính biết chúng ta đang xử lý loại "stuff" (dữ liệu) nào.

Trong thế giới TypeScript, các chú thích kiểu là cách để明确规定 với编译器 một biến, tham số hàm, hoặc thuộc tính đối tượng có thể giữ loại giá trị nào. Đó giống như cảnh báo trước cho máy tính về những gì nó nên mong đợi.

### Why Use Type Annotations? (Tại sao sử dụng chú thích kiểu?)

1. **Catch errors early**: Chúng giúp chúng ta phát hiện lỗi trước khi chạy mã.
2. **Better code documentation**: Chúng làm cho mã của chúng ta dễ hiểu hơn.
3. **Improved development experience**: Chúng cung cấp autocomplete và IntelliSense tốt hơn trong các trình chỉnh sửa mã của chúng ta.

Bây giờ, hãy cùng nhìn vào các cách khác nhau chúng ta có thể sử dụng chú thích kiểu.

## Variable Type Annotations (Chú thích kiểu cho biến)

Khi chúng ta tạo một biến trong TypeScript, chúng ta có thể thêm một chú thích kiểu để chỉ định loại giá trị nó nên giữ.

### Basic Syntax (Cú pháp cơ bản)

```typescript
let variableName: Type = value;

Hãy xem một số ví dụ:

TypeScript - Type Annotations

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

Trong các ví dụ này, chúng ta đang告诉 TypeScript:

myName chỉ nên chứa văn bản (chuỗi)
myAge chỉ nên là số
isStudent chỉ nên là true hoặc false (boolean)

Nếu chúng ta cố gắng gán một loại giá trị khác sau này, TypeScript sẽ cảnh báo chúng ta:

myName = 42; // Error: Type 'number' is not assignable to type 'string'

Arrays and Special Types (Mảng và các loại đặc biệt)

Chúng ta cũng có thể chú thích kiểu cho mảng và sử dụng các loại đặc biệt:

let favorites: string[] = ["pizza", "coding", "cats"];
let anything: any = "I can be anything!";
let maybe: unknown = 4;

string[] có nghĩa là một mảng các chuỗi
any là một loại đặc biệt có thể là bất kỳ thứ gì (sử dụng cẩn thận!)
unknown là một lựa chọn an toàn hơn so với any

Function Type Annotations (Chú thích kiểu cho hàm)

Hàm có thể có chú thích kiểu cho các tham số và giá trị trả về.

Basic Syntax (Cú pháp cơ bản)

function functionName(param1: Type1, param2: Type2): ReturnType {
    // function body
}

Hãy xem một số ví dụ:

function greet(name: string): string {
    return `Hello, ${name}!`;
}

function add(a: number, b: number): number {
    return a + b;
}

function logMessage(message: string): void {
    console.log(message);
}

Trong các ví dụ này:

greet nhận một chuỗi và trả về một chuỗi
add nhận hai số và trả về một số
logMessage nhận một chuỗi nhưng không trả về gì (void)

Arrow Functions (Hàm mũi tên)

Hàm mũi tên cũng có thể có chú thích kiểu:

const multiply = (a: number, b: number): number => a * b;

Object Properties Type Annotations (Chú thích kiểu cho thuộc tính đối tượng)

Khi làm việc với các đối tượng, chúng ta có thể chú thích kiểu cho các thuộc tính của chúng.

Basic Syntax (Cú pháp cơ bản)

let objectName: { property1: Type1; property2: Type2 } = {
    property1: value1,
    property2: value2
};

Hãy xem một ví dụ:

let user: { name: string; age: number; isAdmin: boolean } = {
    name: "Bob",
    age: 25,
    isAdmin: false
};

Ở đây, chúng ta đang định nghĩa một đối tượng với các loại thuộc tính cụ thể.

Interfaces for Complex Objects (Giao diện cho các đối tượng phức tạp)

Đối với các đối tượng phức tạp hơn, chúng ta có thể sử dụng các giao diện:

interface Person {
    name: string;
    age: number;
    hobbies: string[];
    greet: () => void;
}

let employee: Person = {
    name: "Charlie",
    age: 30,
    hobbies: ["reading", "gaming"],
    greet: () => console.log("Hello!")
};

Các giao diện giúp chúng ta định nghĩa các hình dạng đối tượng có thể tái sử dụng.

Putting It All Together (Kết hợp tất cả lại)

Bây giờ chúng ta đã học về các chú thích kiểu khác nhau, hãy xem chúng trong hành động với một ví dụ phức tạp hơn:

interface Book {
    title: string;
    author: string;
    pages: number;
    isPublished: boolean;
}

function createBookList(books: Book[]): string[] {
    return books.map(book => `${book.title} by ${book.author}`);
}

const myBooks: Book[] = [
    { title: "TypeScript 101", author: "Code Wizard", pages: 200, isPublished: true },
    { title: "JavaScript Adventures", author: "JS Ninja", pages: 150, isPublished: false }
];

const bookTitles: string[] = createBookList(myBooks);
console.log(bookTitles);

Ví dụ này kết hợp nhiều khái niệm chúng ta đã học:

Chúng ta định nghĩa một giao diện Book
Chúng ta tạo một hàm createBookList nhận một mảng các đối tượng Book và trả về một mảng các chuỗi
Chúng ta tạo một mảng các đối tượng Book
Chúng ta gọi hàm và lưu kết quả trong một biến với chú thích kiểu chính xác

Conclusion (Kết luận)

Chúc mừng! Bạn vừa mới bước những bước đầu tiên vào thế giới các chú thích kiểu TypeScript. Nhớ rằng, các chú thích kiểu này giống như những biển báo thân thiện dẫn dắt bạn và mã của bạn đến an toàn. Chúng có thể看起来有点令人眼花缭乱起初，但随着 thực hành, chúng sẽ trở thành bản năng thứ hai.

Trong hành trình lập trình của bạn, tiếp tục thử nghiệm với các loại và chú thích kiểu khác nhau. Đừng sợ mắc lỗi - đó là cách chúng ta học và phát triển!

Dưới đây là bảng tóm tắt các chú thích kiểu chúng ta đã covered:

Type Annotation	Example	Description
Basic Types	`let name: string = "Alice";`	Cho các giá trị đơn giản như chuỗi, số, boolean
Array Types	`let numbers: number[] = [1, 2, 3];`	Cho các mảng của một loại cụ thể
Function Types	`function add(a: number, b: number): number`	Cho các tham số và giá trị trả về của hàm
Object Types	`let user: { name: string; age: number }`	Cho các thuộc tính của đối tượng
Interface	`interface Person { name: string; age: number }`	Cho việc định nghĩa các hình dạng đối tượng phức tạp

Tiếp tục lập mã, giữ vững sự tò mò, và nhớ rằng - mỗi bậc thầy từng là một người mới bắt đầu. Chúc may mắn với TypeScript! ??‍??‍?

Credits: Image by storyset

Hướng Dẫn Trước:

TypeScript - Loại

Hướng Dẫn Tiếp Theo:

TypeScript - suy luận kiểu