Dự án cuối khoá

Bài cuối không dạy gì mới - mèo con sẽ tự làm ba dự án nhỏ, mỗi cái chạy được và an toàn kiểu hoàn toàn, để ghép lại mọi thứ đã học. Dưới đây là đề bài kèm một lời giải mẫu cho mỗi dự án (mèo con nên tự viết trước, rồi mới so).

• ▸Dự án 1 - Thư viện generic: ôn generics (Bài 6) với một class Stack<T>.
• ▸Dự án 2 - Typed event emitter: ghép generics + mapped type + keyof (Bài 8).
• ▸Dự án 3 - Migrate: đưa một module JavaScript sang TypeScript strict (Bài 10-11).

Dựng một Stack<T> (ngăn xếp) dùng được cho mọi kiểu phần tử mà không mất an toàn - đúng tinh thần generics:

class Stack<T> {
  private items: T[] = [];
  push(item: T): void { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items[this.items.length - 1]; }
  get size(): number { return this.items.length; }
}

const s = new Stack<number>();
s.push(1);
s.push(2);
console.log(s.pop(), s.peek(), s.size);
// s.push("ba");  // Loi: "ba" la string, Stack<number> chi nhan number

2 1 1

• ▸Tham số kiểu T nối đầu vào (push) với đầu ra (pop) - không mất kiểu.
• ▸Stack<number> chỉ nhận số; push một chuỗi vào bị tsc chặn ngay.
• ▸pop/peek trả về T | undefined - buộc người dùng xử lý trường hợp rỗng.

Tham vọng hơn: một bộ phát sự kiện mà on và emit tự biết payload của từng sự kiện, dựa trên một mapped type trên bản đồ sự kiện. Gõ sai payload là tsc bắt được:

type EventMap = {
  click: { x: number };
  msg: { text: string };
};

class Emitter<M> {
  private handlers: { [K in keyof M]?: ((p: M[K]) => void)[] } = {};
  on<K extends keyof M>(event: K, fn: (p: M[K]) => void): void {
    (this.handlers[event] ??= []).push(fn);
  }
  emit<K extends keyof M>(event: K, payload: M[K]): void {
    this.handlers[event]?.forEach((fn) => fn(payload));
  }
}

const e = new Emitter<EventMap>();
e.on("click", (p) => console.log("click tai x =", p.x));  // p: { x: number }
e.emit("click", { x: 10 });
// e.emit("click", { text: "sai" });  // Loi: payload sai kieu

click tai x = 10

Cuối cùng, đưa một mẩu JavaScript chưa kiểu về TypeScript strict, đúng cách di chuyển ở bài trước: thêm kiểu, xử lý trường hợp rỗng mà strict nhắc, bỏ mọi any:

// Truoc: function tinhTrungBinh(ds) { return ds.reduce(...) / ds.length; }
// (mang rong -> chia cho 0 -> NaN, va ds ngam la any)

function tinhTrungBinh(ds: number[]): number {
  if (ds.length === 0) return 0;   // strictNullChecks/logic nhac xu ly rong
  return ds.reduce((a, b) => a + b, 0) / ds.length;
}

console.log(tinhTrungBinh([8, 9, 10]));

9

• ▸Thêm kiểu tham số (number[]) và kiểu trả về (number) - hết any ngầm.
• ▸Xử lý trường hợp rỗng để tránh NaN - strict đẩy bạn nghĩ tới ca biên.
• ▸Module nhỏ, kiểu chặt, gọi sai bị bắt: đúng đích của cả khoá.

Ba dự án nhỏ này gói trọn hành trình: từ kiểu cơ bản, qua hệ thống kiểu, lên tới lập trình ở tầng kiểu, rồi về với cấu hình và migration đời thực. Mèo con giờ không chỉ DÙNG được TypeScript mà còn HIỂU nó vận hành ra sao bên dưới.