Tiếng Việt

Nền tảng TypeScript

Loại cơ bản của TypeScript

Luồng điều khiển TypeScript

Hàm TypeScript

Giao diện TypeScript

Lớp và Đối tượng TypeScript

Loại Cao Cấp TypeScript

Thao tác trên các kiểu TypeScript

Nhiều loại TypeScript

TypeScript Phụ 

# Hướng dẫn TypeScript: Cẩm nang dành cho người mới bắt đầu

Xin chào bạn, tương lai của ngôi sao lập trình! ? Chào mừng bạn đến với hướng dẫn TypeScript của chúng tôi. Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này vào thế giới của TypeScript. Là một người đã dạy lập trình trong nhiều năm, tôi không thể chờ đợi để chia sẻ kiến thức và giúp bạn解锁 sức mạnh của ngôn ngữ tuyệt vời này.

## TypeScript là gì?

Hãy bắt đầu từ những điều cơ bản. TypeScript giống như người cousin cool hơn, tinh tế hơn của JavaScript. Nó là một ngôn ngữ lập trình được xây dựng trên JavaScript, thêm các tính năng mới và giúp phát hiện lỗi trước khi chúng trở thành vấn đề. Hãy tưởng tượng JavaScript mặc một bộ com-lê và佩戴 một mắt kính - đó chính là TypeScript!

### Một ví dụ đơn giản

Hãy cùng nhìn vào một ví dụ đơn giản:

```typescript
function greet(name: string) {
    console.log(`Xin chào, ${name}!`);
}

greet("Alice"); // Output: Xin chào, Alice!
greet(123); // Lỗi: Tham số của loại 'number' không thể gán cho tham số của loại 'string'.

Trong ví dụ này, chúng ta đã định nghĩa một hàm greet nhận một tham số name. Phần : string cho biết name nên là một chuỗi. Khi chúng ta cố gắng gọi greet với một số, TypeScript sẽ bắt lỗi trước khi chúng ta chạy mã!

TypeScript - Home

Tại sao nên học TypeScript?

Bạn có thể tự hỏi, "Tại sao tôi nên phiền phức học TypeScript khi JavaScript đã tồn tại?" Đó là một câu hỏi tuyệt vời! Dưới đây là một số lý do thuyết phục:

  1. Phát hiện lỗi sớm: TypeScript giúp bạn tìm và sửa lỗi trước khi mã của bạn chạy.
  2. Công cụ tốt hơn: Nhận được gợi ý mã thông minh và tự động hoàn thành trong trình chỉnh sửa của bạn.
  3. Mã rõ ràng hơn: TypeScript giúp mã của bạn dễ đọc và dễ hiểu hơn.
  4. Tính mở rộng: Nó rất tốt cho các dự án lớn và các nhóm làm việc.

Ai nên học TypeScript?

TypeScript dành cho mọi người! Dù bạn là:

  • Một người mới bắt đầu lập trình
  • Một nhà phát triển JavaScript muốn nâng cao kỹ năng
  • Một phần của nhóm làm việc trên các ứng dụng quy mô lớn

TypeScript đều có điều gì đó để offer bạn. Nó giống như học đi xe đạp với bánh xe tập luyện - nó cho bạn thêm sự hỗ trợ trong khi bạn đang học, nhưng bạn vẫn có thể thực hiện tất cả các trick tuyệt vời!

Yêu cầu trước khi học TypeScript

Trước khi chúng ta đi sâu hơn, đây là những gì bạn nên biết:

  • Hiểu biết cơ bản về các khái niệm lập trình (biến, hàm, v.v.)
  • Một chút quen thuộc với JavaScript (nhưng đừng lo nếu bạn đã quên!)

Nếu bạn không có những kiến thức này? Không có vấn đề! Chúng tôi sẽ cover các kiến thức cơ bản khi chúng ta tiếp tục.

Bắt đầu với TypeScript

Cài đặt

Thứ nhất, hãy cài đặt TypeScript trên máy tính của bạn. Mở terminal và chạy:

npm install -g typescript

Điều này cài đặt TypeScript toàn cục trên máy tính của bạn. Bây giờ bạn đã sẵn sàng để bắt đầu lập trình!

Chương trình TypeScript đầu tiên

Hãy viết một chương trình đơn giản để tính diện tích của một hình tròn:

function calculateCircleArea(radius: number): number {
    const pi: number = 3.14159;
    return pi * radius * radius;
}

const area: number = calculateCircleArea(5);
console.log(`Diện tích của hình tròn là ${area.toFixed(2)} đơn vị vuông.`);

Hãy phân tích điều này:

  1. Chúng ta định nghĩa một hàm calculateCircleArea nhận một tham số radius của loại number.
  2. Phần : number sau khai báo hàm chỉ định rằng hàm sẽ trả về một số.
  3. Chúng ta tính diện tích bằng công thức πr².
  4. Chúng ta gọi hàm với bán kính là 5 và lưu kết quả vào area.
  5. Cuối cùng, chúng ta ghi kết quả, sử dụng toFixed(2) để làm tròn đến hai chữ số thập phân.

Để chạy chương trình này, lưu nó dưới tên circle.ts, sau đó biên dịch và chạy nó:

tsc circle.ts
node circle.js

Bạn nên thấy đầu ra: "Diện tích của hình tròn là 78.54 đơn vị vuông."

Các kiểu dữ liệu TypeScript

Một trong những siêu năng lực của TypeScript là hệ thống kiểu của nó. Hãy khám phá một số kiểu phổ biến:

Kiểu Mô tả Ví dụ
number Giá trị số học let age: number = 30;
string Giá trị văn bản let name: string = "Alice";
boolean Giá trị đúng/sai let isStudent: boolean = true;
array Danh sách các giá trị let fruits: string[] = ["apple", "banana"];
object Cặp khóa-giá trị let person: { name: string, age: number } = { name: "Bob", age: 25 };
any Bất kỳ loại nào (sử dụng cẩn thận!) let data: any = 42;

Dưới đây là một ví dụ phức tạp hơn sử dụng nhiều kiểu:

interface Student {
    name: string;
    age: number;
    grades: number[];
    isActive: boolean;
}

function printStudentInfo(student: Student): void {
    console.log(`Tên: ${student.name}`);
    console.log(`Tuổi: ${student.age}`);
    console.log(`Điểm trung bình: ${calculateAverage(student.grades)}`);
    console.log(`Hoạt động: ${student.isActive ? "Có" : "Không"}`);
}

function calculateAverage(grades: number[]): number {
    const sum = grades.reduce((acc, grade) => acc + grade, 0);
    return sum / grades.length;
}

const alice: Student = {
    name: "Alice",
    age: 20,
    grades: [85, 90, 92],
    isActive: true
};

printStudentInfo(alice);

Ví dụ này minh họa:

  1. Sử dụng interface để định nghĩa một kiểu phức tạp (Student).
  2. Làm việc với các mảng và đối tượng.
  3. Sử dụng các chú thích kiểu trong các tham số và kiểu trả về của hàm.
  4. Sử dụng toán tử điều kiện (ternary) cho logic if/else ngắn gọn.

Biên dịch và Chạy các chương trình TypeScript

Để chạy các chương trình TypeScript, bạn cần biên dịch chúng thành JavaScript trước. Dưới đây là quy trình:

  1. Viết mã TypeScript của bạn (ví dụ: app.ts)
  2. Biên dịch nó: tsc app.ts
  3. Chạy mã JavaScript tạo ra: node app.js

Mẹo nhỏ: Sử dụng tsc --watch app.ts để tự động biên dịch mỗi khi bạn lưu thay đổi!

TypeScript trong thế giới thực tế

TypeScript không chỉ dùng để học - nó được sử dụng trong nhiều thư viện và khung công tác phổ biến:

  • Angular (khung công tác ứng dụng web của Google)
  • React ( với hỗ trợ TypeScript)
  • Node.js (cho JavaScript trên máy chủ)
  • Vue.js ( với hỗ trợ TypeScript)

Học TypeScript sẽ mở ra cánh cửa để làm việc với những công cụ mạnh mẽ này!

Kết luận

Chúc mừng! Bạn đã迈出第一步进入TypeScript的世界。 Chúng tôi đã cover các kiến thức cơ bản, nhưng vẫn còn rất nhiều điều để khám phá. Nhớ rằng, học lập trình giống như học một ngôn ngữ mới - thực hành, kiên nhẫn và kiên trì là chìa khóa.

Trong hành trình TypeScript của bạn, đừng sợ hãi khi mắc lỗi. Mỗi lỗi là một cơ hội học hỏi. Tiếp tục mã hóa, tiếp tục thử nghiệm, và quan trọng nhất, hãy vui vẻ!

Chúc bạn may mắn và những cuộc phiêu lưu TypeScript không có lỗi và đầy niềm vui! ?✨

Credits: Image by storyset

 
Hướng Dẫn Tiếp Theo:
TypeScript - Tổng quan