TypeScript - Các Loại: Hướng Dẫn Dành Cho Người Mới Bắt Đầu

Xin chào bạn, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của các loại trong TypeScript. Đừng lo lắng nếu bạn chưa từng viết một dòng mã nào trước đây - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình thú vị này. Cuối cùng của bài hướng dẫn này, bạn sẽ ngạc nhiên vì biết được nhiều điều. Vậy, chúng ta hãy bắt đầu nào!

Các Loại Trong TypeScript Là Gì?

Trước khi chúng ta nhảy vào phần sâu hơn, hãy nói về các loại là gì và tại sao chúng lại quan trọng. Hãy nghĩ về các loại như những nhãn chúng ta dán vào dữ liệu của mình. Cũng giống như cách chúng ta tổ chức tủ quần áo với các phần khác nhau cho áo, quần và giày, các loại giúp chúng ta tổ chức mã và ngăn cản chúng ta khỏi việc đặt một metaphorical sock vào ngăn áo!

TypeScript là một tập hợp của JavaScript với việc thêm vào tính tĩnh typing tùy chọn. Điều này có nghĩa là chúng ta có thể告诉 TypeScript chính xác loại dữ liệu chúng ta đang làm việc với, giúp bắt lỗi trước khi mã của chúng ta thậm chí chạy. Đó như có một người bạn giúp đỡ nhìn qua vai bạn, chỉ ra những lỗi tiềm ẩn trước khi bạn mắc phải chúng.

Loại Any: Lá Bài Joker Của TypeScript

Hãy bắt đầu với loại linh hoạt nhất trong TypeScript: any. Nó như lá bài joker trong bộ bài - nó có thể là bất kỳ thứ gì!

let myVariable: any = 42;
myVariable = "Hello, World!";
myVariable = true;

Trong ví dụ này, myVariable có thể là một số, sau đó là một chuỗi, sau đó là một boolean. Nó rất linh hoạt, nhưng với quyền lực lớn đi kèm với trách nhiệm lớn. Sử dụng any quá thường xuyên sẽ làm mất đi mục đích của việc sử dụng TypeScript, vì vậy hãy sử dụng nó một cách tiết kiệm!

Các Loại Nhiều Nhap: Những Block Xây Dựng Của TypeScript

TypeScript cung cấp một số loại nội tại giúp đáp ứng hầu hết nhu cầu của chúng ta. Hãy cùng khám phá chúng một lần một:

1. Number

let age: number = 30;
let price: number = 9.99;

Các số trong TypeScript có thể là số nguyên hoặc số động điểm. Không cần lo lắng về các loại số khác nhau như trong một số ngôn ngữ khác!

2. String

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

Các chuỗi có thể được xác định bằng dấu ngoặc đơn, dấu ngoặc kép hoặc dấu gạch ngang. Dấu gạch ngang cho phép chúng ta nhúng các biểu thức sử dụng ${}.

3. Boolean

let isStudent: boolean = true;
let hasPassedExam: boolean = false;

Các boolean đơn giản - chúng hoặc là true hoặc là false. Hãy nghĩ về chúng như câu hỏi yes/no cho mã của bạn.

4. Array

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

Các mảng có thể chứa nhiều giá trị cùng loại. Chúng ta có thể xác định chúng bằng cách sử dụng dấu vuông hoặc cú pháp Array<T>.

5. Tuple

let person: [string, number] = ["Alice", 30];

Các tuple là các mảng với số lượng phần tử cố định, nơi mỗi phần tử có thể có một loại khác nhau. Chúng như một hộp nhỏ, tổ chức với các ngăn cụ thể cho mỗi mục.

6. Enum

enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Blue;

Enums cho phép chúng ta xác định một tập hợp các hằng số có tên. Chúng rất tuyệt vời cho việc đại diện một tập hợp các tùy chọn cố định.

7. Void

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

Void được sử dụng để chỉ ra rằng một hàm không trả về gì. Nó như gửi một lá thư mà không mong đợi hồi âm.

8. Null và Undefined

let notDefined: undefined = undefined;
let empty: null = null;

Các loại này đại diện cho sự vắng mặt của giá trị. Chúng như những hộp trống - một hộp trống có chủ ý (null) và một hộp chưa được điền (undefined).

Dưới đây là bảng tóm tắt các loại nội tại chúng ta đã xem xét:

Loại	Mô tả	Ví dụ
number	Giá trị số học (nguyên hoặc động điểm)	let age: number = 30;
string	Dữ liệu văn bản	let name: string = "Alice";
boolean	True hoặc false	let isStudent: boolean = true;
array	Tập hợp các giá trị cùng loại	let numbers: number[] = [1, 2, 3];
tuple	Mảng có độ dài cố định với các phần tử loại cụ thể	let person: [string, number] = ["Alice", 30];
enum	Tập hợp các hằng số có tên	enum Color { Red, Green, Blue }
void	Vắng mặt giá trị trả về trong hàm	function logMessage(message: string): void { ... }
null	Thiếu vắng giá trị đối tượng	let empty: null = null;
undefined	Biến chưa được gán giá trị	let notDefined: undefined = undefined;

Các Loại Định Nghĩa Bởi Người Dùng: Tạo Ra Các Công Cụ Riêng Bạn

Bây giờ chúng ta đã xem xét các loại nội tại, hãy nói về cách bạn có thể tạo ra các loại tùy chỉnh của riêng mình. Đây là nơi TypeScript thực sự tỏa sáng!

1. Interfaces

Các giao diện cho phép chúng ta xác định cấu trúc của một đối tượng. Hãy nghĩ về chúng như bản vẽ cho các đối tượng.

interface Person {
name: string;
age: number;
greet(): void;
}

let alice: Person = {
name: "Alice",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};

Trong ví dụ này, chúng ta đã xác định một giao diện Person và tạo một đối tượng tuân theo cấu trúc này. Nó như tạo một mẫu mà mọi người cần điền đầy đủ thông tin.

2. Classes

Các lớp là cách để tạo các thành phần có thể tái sử dụng. Chúng như những khuôn cookie - bạn xác định hình dạng một lần và sau đó tạo ra bao nhiêu cookie (đối tượng) tùy thích!

class Student {
name: string;
grade: number;

constructor(name: string, grade: number) {
this.name = name;
this.grade = grade;
}

study() {
console.log(`${this.name} is studying hard!`);
}
}

let bob = new Student("Bob", 10);
bob.study(); // Xuất: "Bob is studying hard!"

Ở đây, chúng ta đã tạo một lớp Student với các thuộc tính (name và grade) và một phương thức (study). Chúng ta có thể tạo ra bao nhiêu học sinh tùy thích sử dụng lớp này.

3. Type Aliases

Các别名 cho phép chúng ta tạo ra các tên mới cho các loại. Chúng rất hữu ích cho việc tạo các loại phức tạp hoặc cho các tên có ý nghĩa hơn cho các loại hiện có.

type Point = {
x: number;
y: number;
};

let center: Point = { x: 0, y: 0 };

Trong ví dụ này, chúng ta đã tạo một loại Point đại diện cho một điểm trong không gian 2D. Đây là một cách đơn giản để nhóm các thuộc tính liên quan lại với nhau.

4. Union Types

Các loại union cho phép một giá trị là một trong số các loại. Nó như nói, "Điều này có thể là cái này hoặc cái kia."

type Result = number | string;

function getResult(value: boolean): Result {
return value ? "Success" : 404;
}

Ở đây, Result có thể là một số hoặc một chuỗi. Điều này rất hữu ích khi một giá trị có thể là các loại khác nhau tùy thuộc vào các điều kiện nhất định.

5. Intersection Types

Các loại intersection kết hợp nhiều loại thành một. Nó như nói, "Điều này phải là cái này VÀ cái kia."

interface Colorful {
color: string;
}

interface Circle {
radius: number;
}

type ColorfulCircle = Colorful & Circle;

let myCircle: ColorfulCircle = {
color: "red",
radius: 5
};

Trong ví dụ này, ColorfulCircle vừa là Colorful vừa là Circle. Nó phải có cả color và radius.

Và thế là xong! Chúng ta đã xem xét các loại cơ bản của TypeScript, từ loại any linh hoạt đến các loại nội tại và các loại định nghĩa bởi người dùng. Nhớ rằng, các loại trong TypeScript là như siêu năng lực lập trình của bạn - chúng giúp bạn viết mã sạch sẽ, đáng tin cậy và bắt lỗi trước khi chúng trở thành vấn đề.

Khi bạn tiếp tục hành trình TypeScript của mình, hãy tiếp tục thử nghiệm với các loại này. Thử kết hợp chúng theo các cách khác nhau và đừng sợ mắc lỗi - đó là cách chúng ta học hỏi! Trước khi bạn biết, bạn sẽ typing như một chuyên gia, tạo ra mã robust và không có lỗi.

Chúc bạn lập trình vui vẻ, và mong rằng các loại của bạn luôn mạnh mẽ!

Credits: Image by storyset