Từ con số 0 đến chuyên gia với TypeScript

TypeScript giúp mã JavaScript của bạn an toàn hơn. Nó giúp bạn tìm ra lỗi trước khi chạy mã. Hướng dẫn này bao gồm lộ trình từ các khái niệm cơ bản đến nâng cao.

TypeScript bổ sung kiểu dữ liệu tĩnh (static typing) cho JavaScript. Nó chuyển đổi mã của bạn thành JavaScript thuần để trình duyệt có thể hiểu được.

Basic Types

  • number: số nguyên hoặc số thập phân
  • boolean: true hoặc false
  • string: văn bản
  • symbol: các định danh duy nhất
  • bigint: các số nguyên lớn

Type Annotations Bạn định nghĩa các kiểu dữ liệu trong quá trình tạo biến: let name: string = "Alice"; let age: number = 30;

Arrays and Objects

  • Arrays: let fruits: string[] = ["apple", "banana"];
  • Objects: let user: { name: string; age: number } = { name: "Bob", age: 25 };

Functions Bạn có thể chỉ định tham số đầu vào và giá trị trả về của một hàm. Sử dụng void nếu hàm không trả về gì cả.

function greet(name: string): string {
  return "Hello, " + name;
}

Advanced Structures

  • Type Aliases: Định nghĩa một tên tùy chỉnh cho một kiểu dữ liệu.
  • Interfaces: Định nghĩa cấu trúc (shape) của một đối tượng.
  • Enums: Tạo một tập hợp các hằng số có tên.
  • Tuples: Tạo một mảng với số lượng phần tử cố định và các kiểu dữ liệu cụ thể.

Complex Logic

  • Union Types: Cho phép một biến có thể chứa nhiều hơn một kiểu dữ liệu.
  • Intersection Types: Kết hợp nhiều kiểu dữ liệu thành một.
  • Generics: Tạo các thành phần có thể tái sử dụng và hoạt động với nhiều kiểu dữ liệu khác nhau.
  • Utility Types: Sử dụng các công cụ có sẵn như Partial hoặc Pick để thay đổi kiểu dữ liệu.

Best Practices

  • Sử dụng type cho các bí danh (aliases) đơn giản và các kiểu dữ liệu nguyên thủy (primitives).
  • Sử dụng interface cho cấu trúc của đối tượng.
  • Tránh sử dụng any. Nó làm mất đi tính an toàn của TypeScript.
  • Sử dụng unknown thay vì any khi bạn không chắc chắn về kiểu dữ liệu.
  • Hãy để trình biên dịch tự suy luận kiểu dữ liệu khi mã nguồn đã rõ ràng.

TypeScript giúp bạn xây dựng các ứng dụng lớn một cách tự tin.

Nguồn: https://dev.to/miasalazar/from-zero-to-hero-in-typescript-425j