Ứng Dụng TypeScript Trong Angular

Angular được xây dựng hoàn toàn trên TypeScript, giúp phát triển ứng dụng mạnh mẽ, dễ bảo trì và mở rộng. Trong bài học này, chúng ta sẽ tìm hiểu:

• TypeScript được sử dụng như thế nào trong Angular?
• Sử dụng Interface để định nghĩa kiểu dữ liệu.
• Sử dụng Class để xây dựng Component.
• Sử dụng Decorators trong Angular (@Component, @Injectable).
• Viết một ứng dụng nhỏ sử dụng TypeScript trong Angular.

Sau bài học này, bạn sẽ hiểu cách kết hợp TypeScript với Angular để xây dựng ứng dụng hiệu quả.

Ứng dụng TypeScript trong Angular

1. TypeScript được sử dụng trong Angular như thế nào?

Angular tận dụng TypeScript để giúp:

• Kiểm soát kiểu dữ liệu tốt hơn với Interface.
• Xây dựng Component bằng Class.
• Tạo các Service, Directive, Pipe với Decorators.
• Hỗ trợ lập trình bất đồng bộ dễ dàng hơn với Async/Await.

2. Sử dụng Interface để định nghĩa kiểu dữ liệu

Trong Angular, Interface giúp định nghĩa kiểu dữ liệu, đảm bảo code rõ ràng và dễ kiểm soát.

Ví dụ: Định nghĩa Interface cho đối tượng User

export interface User {
  id: number;
  name: string;
  email: string;
}

Sử dụng Interface trong Component

import { Component } from '@angular/core';
import { User } from './user.model';

@Component({
  selector: 'app-user',
  template: `<p>{{ user.name }} - {{ user.email }}</p>`,
})
export class UserComponent {
  user: User = {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com',
  };
}

Lợi ích của Interface

• Đảm bảo kiểu dữ liệu chính xác.
• Giúp dễ dàng mở rộng và bảo trì code.

3. Sử dụng Class để xây dựng Component

Component là khối xây dựng quan trọng trong Angular, và nó được tạo ra bằng Class TypeScript.

Ví dụ: Tạo Component đơn giản

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
  name: string = 'Angular';
}

Giải thích:

• @Component({...}): Decorator giúp Angular nhận diện đây là một Component.
• name: string = 'Angular'; → Sử dụng TypeScript để khai báo biến.

Lợi ích của Class trong Angular

• Tái sử dụng logic dễ dàng.
• Dễ bảo trì khi dự án lớn.

4. Sử dụng Decorators trong Angular (@Component, @Injectable)

Decorators là một trong những tính năng quan trọng nhất của Angular.

Ví dụ: @Component – Định nghĩa Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: `<h2>Chào mừng đến với Angular!</h2>`,
})
export class GreetingComponent {}

Ví dụ: @Injectable – Định nghĩa Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  getUsers() {
    return [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
  }
}

Sử dụng Service trong Component

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `<ul>
    <li *ngFor="let user of users">{{ user.name }}</li>
  </ul>`,
})
export class UserListComponent {
  users = [];

  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

Lợi ích của Decorators

• Giúp Angular nhận diện Component, Service, Directive, Pipe.
• Tổ chức code gọn gàng, dễ quản lý.

5. Viết một ứng dụng nhỏ sử dụng TypeScript trong Angular

Chúng ta sẽ viết một ứng dụng nhỏ hiển thị danh sách người dùng.

Bước 1: Tạo Interface User

export interface User {
  id: number;
  name: string;
  email: string;
}

Bước 2: Tạo Service UserService để lấy danh sách người dùng

import { Injectable } from '@angular/core';
import { User } from './user.model';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  getUsers(): User[] {
    return [
      { id: 1, name: 'Alice', email: 'alice@example.com' },
      { id: 2, name: 'Bob', email: 'bob@example.com' },
    ];
  }
}

Bước 3: Tạo Component UserListComponent để hiển thị danh sách người dùng

import { Component } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user.model';

@Component({
  selector: 'app-user-list',
  template: `
    <h3>Danh sách người dùng</h3>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  `,
})
export class UserListComponent {
  users: User[] = [];

  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

Bước 4: Thêm UserListComponent vào app.component.html

<app-user-list></app-user-list>

Chạy ứng dụng

ng serve

Sau khi chạy, trình duyệt sẽ hiển thị danh sách người dùng như sau:

Danh sách người dùng
- Alice - alice@example.com
- Bob - bob@example.com

Lợi ích của việc sử dụng TypeScript trong Angular

• Giúp tổ chức code rõ ràng, dễ bảo trì.
• Đảm bảo kiểu dữ liệu chính xác.
• Tận dụng tính năng mạnh mẽ của TypeScript như Interface, Class, Decorators.

Kết luận

• TypeScript là nền tảng quan trọng trong Angular, giúp code dễ hiểu và bảo trì hơn.
• Interface giúp định nghĩa kiểu dữ liệu rõ ràng.
• Class giúp xây dựng Component và Service dễ dàng.
• Decorators (@Component, @Injectable) giúp Angular quản lý các phần tử trong ứng dụng.
• Ứng dụng nhỏ đã giúp bạn hiểu cách sử dụng TypeScript trong Angular một cách thực tế.