Tuần 3 — TypeScript hướng đối tượng + React Native

Class là một khuôn mẫu mô tả một loại đối tượng: nó có những thuộc tính (property) gì và làm được những việc (method) gì. Object là một thực thể cụ thể được tạo ra từ class đó, gọi là một instance.

class NguoiDung {
  ten: string;
  tuoi: number;

  constructor(ten: string, tuoi: number) {
    this.ten = ten;
    this.tuoi = tuoi;
  }

  gioiThieu(): string {
    return `Tôi tên ${this.ten}, ${this.tuoi} tuổi.`;
  }
}

const minh = new NguoiDung("Minh", 25);
console.log(minh.gioiThieu());

• Bài tập 1: Viết class Sach có thuộc tính tieuDe, tacGia và method moTa() trả về một câu giới thiệu sách.
• Bài tập 2: Tạo 2 object Sach khác nhau từ class trên và in ra mô tả của cả hai.

• Tự kiểm tra: Class và object khác nhau ở điểm nào?
• Tự kiểm tra: constructor dùng để làm gì?

Một class có thể cam kết tuân theo một interface bằng từ khoá implements — nghĩa là class đó bắt buộc phải có đủ các thuộc tính/phương thức mà interface yêu cầu.

interface CoTheGioiThieu {
  gioiThieu(): string;
}

class NhanVien implements CoTheGioiThieu {
  constructor(public ten: string, public chucVu: string) {}

  gioiThieu(): string {
    return `${this.ten} làm ${this.chucVu}`;
  }
}

Kế thừa (extends) cho một class con dùng lại thuộc tính/phương thức của class cha, đồng thời có thể thêm hoặc ghi đè (override) hành vi riêng. Composition là cách gộp các object nhỏ lại thành một object lớn hơn (object này 'có một' object khác) thay vì bắt nó phải kế thừa.

class NhanVienQuanLy extends NhanVien {
  constructor(ten: string, public soNhanVien: number) {
    super(ten, "Quản lý");
  }
}

• Bài tập 1: Viết interface CoTheKeu với method keu(), cho 2 class ChoCon và MeoCon cùng implements interface đó với nội dung keu() khác nhau.
• Bài tập 2: Viết class XeMay có thuộc tính dongCo là một object DongCo riêng (composition) thay vì kế thừa.

• Tự kiểm tra: implements dùng để làm gì?
• Tự kiểm tra: Khi nào nên dùng kế thừa, khi nào nên dùng composition?

Union type mô tả một biến chỉ có thể nhận một trong vài giá trị cụ thể, nối bằng dấu |. Đây chính là nền tảng để mô tả trạng thái màn hình (UI state) mà bạn sẽ dùng nhiều ở Tuần 5: một màn hình chỉ có thể đang loading, đã success, hoặc bị error.

type TrangThai = "loading" | "success" | "error";

function hienThi(trangThai: TrangThai): string {
  if (trangThai === "loading") return "Đang tải...";
  if (trangThai === "success") return "Xong!";
  return "Có lỗi xảy ra";
}

enum cũng dùng để gom một tập giá trị cố định, có tên gọi rõ ràng, hay dùng khi tập giá trị đó có ý nghĩa cụ thể (ví dụ các vai trò người dùng).

enum VaiTro {
  Admin = "admin",
  KhachHang = "khach_hang",
}

const vaiTro: VaiTro = VaiTro.KhachHang;

Generic cho phép viết một function/type dùng chung được cho nhiều kiểu dữ liệu khác nhau, thay vì phải viết lặp lại cho từng kiểu. <T> là một 'kiểu ẩn danh' sẽ được xác định cụ thể mỗi lần gọi.

function phanTuDauTien<T>(danhSach: T[]): T {
  return danhSach[0];
}

console.log(phanTuDauTien<number>([1, 2, 3])); // 1
console.log(phanTuDauTien<string>(["a", "b"])); // "a"

• Bài tập 1: Viết union type PhuongTien = "xe_may" | "o_to" | "xe_dap" và một function nhận vào rồi in ra tên tiếng Việt tương ứng.
• Bài tập 2: Viết enum MucDoUuTien với 3 giá trị Thap/TrungBinh/Cao.

• Tự kiểm tra: Union type khác gì so với việc chỉ dùng string thông thường?
• Tự kiểm tra: Generic dùng để giải quyết vấn đề gì?

Trong React (và React Native), giao diện được chia thành các component — mỗi component là một function trả về mô tả giao diện bằng JSX (cú pháp giống HTML viết ngay trong TypeScript). Nhiều component nhỏ ghép lại tạo thành một màn hình lớn.

type LoiChaoProps = {
  ten: string;
};

function LoiChao({ ten }: LoiChaoProps) {
  return <Text>Xin chào, {ten}!</Text>;
}

// Dùng lại: <LoiChao ten="Minh" />

Props là dữ liệu được truyền từ component cha xuống component con, giống như tham số của một function. Component con không tự sửa props của mình, chỉ hiển thị dựa trên props nhận được.

• Bài tập 1: Viết component ThongTinSach nhận props tieuDe và tacGia, hiển thị bằng hai dòng Text.
• Bài tập 2: Dùng lại component đó 3 lần với 3 props khác nhau.

• Tự kiểm tra: Component là gì? Props dùng để làm gì?
• Tự kiểm tra: Declarative khác imperative ở điểm nào?

Expo là một bộ công cụ giúp tạo và chạy app React Native mà không cần cài Android Studio hay Xcode ngay từ đầu — bạn có thể chạy thử app trên điện thoại thật qua ứng dụng Expo Go (sẽ dùng ở Ngày 6). Khi nào cần build app thật để phát hành, Expo cung cấp dịch vụ EAS Build (sẽ học ở Tuần 8).

• 1. Đảm bảo Node.js đã cài từ Tuần 2 (kiểm tra bằng lệnh node -v).
• 2. Chạy lệnh npx create-expo-app ten-du-an để tạo project mới (npx tự tải Expo CLI khi cần, không cần cài riêng).
• 3. Vào thư mục project vừa tạo bằng lệnh cd ten-du-an.

Sau khi tạo xong, project có sẵn một số file quan trọng: App.tsx là màn hình gốc của app; package.json liệt kê các thư viện project dùng; thư mục assets chứa hình ảnh/icon. Đây là những file bạn sẽ chỉnh sửa nhiều nhất trong các tuần tới.

• Bài tập 1: Cài đặt và tạo một project tên hoc-react-native bằng create-expo-app.
• Bài tập 2: Mở file App.tsx, đọc và đoán xem đoạn code mặc định đang hiển thị gì trên màn hình.

• Tự kiểm tra: Vì sao người mới nên bắt đầu bằng Expo thay vì React Native CLI thuần?
• Tự kiểm tra: File App.tsx dùng để làm gì trong project?

Expo Go là một app có sẵn trên Google Play và App Store, cho phép mở thử project Expo của bạn ngay trên điện thoại thật mà không cần build/cài riêng. Chạy lệnh npx expo start trong thư mục project sẽ hiện một mã QR; quét mã đó bằng app Expo Go (điện thoại và máy tính cần chung một mạng Wi-Fi) để mở app.

Simulator (cho iOS, chạy trên máy Mac) và emulator (cho Android, chạy trên máy tính) là điện thoại giả lập trên máy tính, hữu ích khi không có sẵn điện thoại thật hoặc cần thử nhiều kích thước màn hình khác nhau cùng lúc.

• Bài tập 1: Cài Expo Go trên điện thoại, chạy npx expo start và mở thử project Ngày 5 qua quét QR.
• Bài tập 2: Sửa một dòng chữ trong App.tsx, lưu file, quan sát app trên điện thoại tự cập nhật ngay (fast refresh).

• Tự kiểm tra: Expo Go dùng để làm gì?
• Tự kiểm tra: Vì sao nên thử trên điện thoại thật thay vì chỉ dùng simulator/emulator?

Pressable (hoặc Button) là component tạo vùng bấm được. Thuộc tính onPress nhận vào một function sẽ chạy mỗi khi người dùng bấm vào — giống lambda bạn gán cho một sự kiện.

import { useState } from "react";
import { Pressable, Text, View } from "react-native";

function DemSoLan() {
  const [soLan, setSoLan] = useState(0);

  return (
    <View>
      <Text>Đã bấm {soLan} lần</Text>
      <Pressable onPress={() => setSoLan(soLan + 1)}>
        <Text>Bấm vào đây</Text>
      </Pressable>
    </View>
  );
}

Đọc ý chính: Text hiển thị chữ; Pressable với onPress={...} là một arrow function chạy MỖI khi bấm (nhớ arrow function ở Ngày 4-5 tuần trước); useState(0) tạo một state ban đầu là 0, setSoLan(...) cập nhật state đó và khiến màn hình tự vẽ lại. Chi tiết state sẽ học sâu hơn ở Tuần 4-5.

Khi app có lỗi hoặc chạy sai, cửa sổ terminal đang chạy npx expo start sẽ hiện log — thông tin giúp bạn 'nhìn vào bên trong' app. Dùng console.log(...) để tự in thêm thông tin cần kiểm tra, rồi đọc lại trong log đó.

• Bài tập 1: Sửa dòng chữ mặc định trên màn hình thành tên của bạn, lưu và xem app tự cập nhật.
• Bài tập 2 (sản phẩm cuối tuần): Làm app đếm số lần bấm nút, hoặc app tính tuổi (nhập năm sinh, bấm nút hiện tuổi), chạy được trên điện thoại thật qua Expo Go.
• Bài tập 3: Thêm một console.log trong onPress và xem nó hiện trong log terminal.

• Ôn tập tuần: class, interface, kế thừa và composition dùng khi nào.
• Ôn tập tuần: union type và enum giải quyết vấn đề gì.
• Ôn tập tuần: component, JSX, props là gì; declarative nghĩa là sao.
• Ôn tập tuần: Các bước tạo và chạy một project React Native đầu tiên qua Expo Go; vì sao cần đọc log khi debug.