Cú pháp TypeScript cơ bản

TypeScript là ngôn ngữ lập trình mở rộng của JavaScript và là nền tảng của Angular. Việc hiểu rõ cú pháp TypeScript sẽ giúp bạn lập trình hiệu quả hơn khi phát triển ứng dụng Angular.

Trong bài học này, chúng ta sẽ:

• Giới thiệu TypeScript và vai trò của nó trong Angular.
• Tìm hiểu các kiểu dữ liệu cơ bản trong TypeScript.
• Học cách khai báo biến với let, const, var.
• Hiểu về cách viết hàm, sử dụng arrow function và giá trị mặc định.
• Tìm hiểu về lớp và kế thừa trong TypeScript.
• Hiểu cách sử dụng Interface và Module để tổ chức code tốt hơn.

Sau bài học này, bạn sẽ có thể viết mã TypeScript một cách chuẩn chỉnh, từ đó áp dụng vào Angular dễ dàng hơn.

TypeScript ngôn ngữ lập trình của Angular

1. Giới thiệu TypeScript và vai trò trong Angular

TypeScript là gì?
TypeScript là một phiên bản nâng cao của JavaScript, được Microsoft phát triển với các tính năng như:

• Hỗ trợ kiểu tĩnh (Static Typing) giúp giảm lỗi khi lập trình.
• Cải thiện cấu trúc code với class, interface, module.
• Tương thích với JavaScript, có thể chạy trên mọi trình duyệt.

Tại sao TypeScript quan trọng trong Angular?

• Angular được xây dựng bằng TypeScript.
• TypeScript giúp kiểm tra lỗi ngay trong lúc lập trình.
• Cung cấp cú pháp hiện đại giúp tổ chức code tốt hơn.

2. Các kiểu dữ liệu cơ bản trong TypeScript

TypeScript cung cấp nhiều kiểu dữ liệu giúp quản lý biến tốt hơn:

string, number, boolean

let username: string = "John Doe";
let age: number = 30;
let isActive: boolean = true;

array, tuple

let numbers: number[] = [1, 2, 3, 4, 5];
let userInfo: [string, number] = ["Alice", 25]; // Tuple có thể chứa nhiều kiểu dữ liệu khác nhau

enum

enum Status {
  Pending,
  Completed,
  Failed
}

let currentStatus: Status = Status.Completed; // Giá trị sẽ là 1

any, void, never

let randomValue: any = "Hello"; // Biến có thể nhận bất kỳ kiểu dữ liệu nào

function logMessage(): void {
  console.log("This function does not return anything.");
}

function throwError(): never {
  throw new Error("Something went wrong!");
}

3. Khai báo biến với let, const, var

Trong TypeScript, chúng ta có 3 cách khai báo biến:

var a = 10;   // Có phạm vi toàn cục hoặc phạm vi function
let b = 20;   // Phạm vi block (dùng trong phạm vi nhỏ hơn)
const c = 30; // Không thể thay đổi giá trị

Lưu ý:

• let và const an toàn hơn var vì có phạm vi giới hạn trong block code.
• Dùng const khi giá trị không thay đổi.

4. Hàm trong TypeScript

Hàm có tham số và kiểu trả về

function greet(name: string): string {
  return "Hello, " + name;
}
console.log(greet("Alice")); // Output: Hello, Alice

Hàm có giá trị mặc định

function multiply(a: number, b: number = 2): number {
  return a * b;
}
console.log(multiply(5)); // Output: 10 (vì b mặc định là 2)

Arrow function

const add = (x: number, y: number): number => x + y;
console.log(add(10, 5)); // Output: 15

5. Lớp và kế thừa trong TypeScript

Định nghĩa lớp (Class) trong TypeScript

class Person {
  name: string;
  age: number;

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

  introduce(): string {
    return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
  }
}

let person1 = new Person("Bob", 25);
console.log(person1.introduce()); // Output: Hi, I'm Bob and I'm 25 years old.

Kế thừa (Inheritance) trong TypeScript

class Employee extends Person {
  position: string;

  constructor(name: string, age: number, position: string) {
    super(name, age);
    this.position = position;
  }

  introduce(): string {
    return `${super.introduce()} I work as a ${this.position}.`;
  }
}

let employee1 = new Employee("Charlie", 30, "Developer");
console.log(employee1.introduce()); // Output: Hi, I'm Charlie and I'm 30 years old. I work as a Developer.

6. Interface và Module trong TypeScript

Interface trong TypeScript

Interface giúp xác định cấu trúc của một đối tượng:

interface User {
  name: string;
  age: number;
  email?: string; // Dấu ? nghĩa là trường này có thể có hoặc không
}

const user1: User = { name: "Alice", age: 25 };
console.log(user1);

Module trong TypeScript

Module giúp tổ chức code tốt hơn bằng cách tách nhỏ các phần thành file riêng biệt.

File user.ts (Module xuất dữ liệu)

export class User {
  constructor(public name: string, public age: number) {}
}

File main.ts (Import module và sử dụng)

import { User } from "./user";

const user2 = new User("David", 28);
console.log(user2);

Lưu ý:

• Dùng export để xuất module.
• Dùng import để lấy dữ liệu từ module khác.

Kết luận

• TypeScript là ngôn ngữ nền tảng của Angular, giúp code mạnh mẽ và an toàn hơn.
• Chúng ta đã học về các kiểu dữ liệu cơ bản, khai báo biến, hàm, class & kế thừa, interface và module.
• Hiểu TypeScript giúp lập trình Angular dễ dàng hơn và giảm lỗi khi code.