TypeScript: bản chất ngôn ngữ, kiểu dữ liệu nghiêm ngặt và React Native

TypeScript là gì?

TypeScript là một ngôn ngữ lập trình của Microsoft (2012) được tạo bởi Anders Hejlsberg (người tạo ra C# và Turbo Pascal). TypeScript mở rộng JavaScript với hệ thống kiểu tĩnh, giao diện, generics, liệt kê và decorator. Mã TS biên dịch thành JavaScript thuần (dịch chuyển đổi) qua trình biên dịch tsc hoặc Babel — đầu ra là JS tiêu chuẩn chạy trong mọi môi trường.

Động lực tạo ra TypeScript là những hạn chế của JavaScript trong các dự án lớn. Kiểu dữ liệu động của JS dẫn đến các lỗi chỉ được phát hiện khi chạy: undefined is not a function, Cannot read property of null. TypeScript chuyển việc kiểm tra kiểu sang thời điểm biên dịch, ngăn chặn các lỗi này trước khi thực thi mã. Dự án càng lớn, lợi ích của TS càng nhiều: trong cơ sở mã hơn 100.000 dòng, TS ngăn chặn hàng trăm lỗi tiềm ẩn.

Một tính năng chính của TypeScript là kiểu dữ liệu nghiêm ngặt với cờ tùy chọn strict: true trong tsconfig.json. Chế độ nghiêm ngặt kích hoạt tất cả kiểm tra: strictNullChecks (null/undefined không tương thích với các kiểu khác), noImplicitAny (cấm any ngầm định), strictFunctionTypes (tính đối nghịch của tham số hàm). Theo mặc định, strict: true được khuyến nghị cho tất cả các dự án mới.

TypeScript so với JavaScript

TypeScript chỉ khác JavaScript ở giai đoạn phát triển. Sau khi biên dịch, các kiểu bị xóa — runtime thực thi JS thông thường mà không mất hiệu suất. Đây là sự đánh đổi: phát triển yêu cầu thêm bước biên dịch, nhưng cung cấp tự động hoàn thành trong IDE, tái cấu trúc với đổi tên ký hiệu và tài liệu kiểu trực tiếp trong mã.

Hệ thống kiểu của TypeScript

Hệ thống kiểu của TypeScript là cấu trúc, không phải định danh: hai kiểu tương thích nếu cấu trúc của chúng khớp nhau, bất kể tên gọi. Điều này khác với Java/C# nơi khả năng tương thích được xác định bằng tên lớp hoặc giao diện. Kiểu cấu trúc đơn giản hóa việc tích hợp với mã JS hiện có — không cần khai báo implements cho mọi kiểu.

Kiểu cơ bản và nâng cao

TypeScript hỗ trợ các kiểu nguyên thủy của JS cộng thêm: any (vô hiệu hóa kiểm tra), unknown (any an toàn — yêu cầu kiểm tra trước khi sử dụng), never (không bao giờ trả về), void (không trả về), tuple (bộ có độ dài cố định), enum (liệt kê), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Hệ thống kiểu cơ bản của TypeScript
// Kiểu nguyên thủy
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Kiểu Union và Literal
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — bộ có độ dài cố định
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — liệt kê với tự động tăng
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — thay thế an toàn cho any
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Kiểu Platform là một union các literal chuỗi, giới hạn giá trị ở ba tùy chọn. Nếu bạn truyền 'windows', TypeScript sẽ báo lỗi. Tuple Coordinate đảm bảo chính xác hai số — hữu ích cho tọa độ hoặc màu RGB. Enum AppState biên dịch thành đối tượng với ánh xạ ngược. Unknown buộc kiểm tra kiểu trước khi sử dụng — không giống any, unknown an toàn theo mặc định.

Giao diện và bí danh kiểu

Giao diện và bí danh kiểu trong TypeScript mô tả hình dạng đối tượng. Giao diện hỗ trợ hợp nhất khai báo (khai báo lại thêm trường) và mở rộng (extends). Bí danh kiểu có thể mô tả union, intersection, tuple và kiểu điều kiện, nhưng không hỗ trợ hợp nhất khai báo. Quy tắc: sử dụng interface cho đối tượng API, type cho mọi thứ khác.

// Giao diện và kiểu cho React Native
// Giao diện với trường tùy chọn
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // trường tùy chọn
  readonly createdAt: Date; // chỉ đọc
}

// Mở rộng giao diện (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Kiểu cho dữ liệu API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial làm tất cả trường thành tùy chọn
type PartialUser = Partial<User>;

// Pick — chọn các trường được chỉ định
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — từ điển với khóa được định kiểu
type UserMap = Record<string, User>;

Giao diện User với ? (trường tùy chọn) và readonly (chỉ đọc). ApiResponse<T> là giao diện generic cho phản hồi API. Partial<User> là kiểu tiện ích làm tất cả trường thành tùy chọn (hữu ích cho biểu mẫu chỉnh sửa). Pick<User, 'id' | 'name'> chỉ chọn các trường được chỉ định — thuận tiện cho thành phần xem trước. Record<string, User> là từ điển người dùng theo ID.

Generics và kiểu tiện ích

Generics là một tính năng chính của TypeScript, cho phép tạo các thành phần hoạt động với bất kỳ kiểu nào mà không mất an toàn kiểu. Một hàm generic được định nghĩa với tham số kiểu trong dấu ngoặc nhọn: function identity<T>(arg: T): T. Kiểu T được suy luận tự động từ đối số hoặc được chỉ định rõ ràng: identity<string>('hello').

Kiểu tiện ích là các generic tích hợp sẵn để biến đổi kiểu: Partial<T> (tất cả trường tùy chọn), Required<T> (tất cả trường bắt buộc), Readonly<T> (tất cả trường chỉ đọc), Pick<T, K> (chọn trường), Omit<T, K> (loại trừ trường), Record<K, T> (từ điển), Exclude<T, U> (loại trừ khỏi union), Extract<T, U> (trích xuất từ union), NonNullable<T> (loại trừ null/undefined).

// Generics trong TypeScript
// Hàm generic để làm việc với API
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// Sử dụng với kiểu cụ thể
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// Lớp generic để quản lý trạng thái
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Làm việc với kiểu với Redux Reducer
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

Hàm fetchData<T> là một wrapper được định kiểu bao quanh fetch. Tham số T xác định hình dạng phản hồi: khi gọi fetchData<Product[]>, TypeScript biết mảng trả về chứa các đối tượng Product. Lớp StateManager<S> quản lý trạng thái của bất kỳ kiểu nào — Partial<S> cho cập nhật một phần. Action<T, P> là union phân biệt cho các action Redux với thu hẹp kiểu tự động trong switch.

TypeScript trong React Native

TypeScript trong React Native cung cấp kiểu dữ liệu nghiêm ngặt cho props và state của thành phần. React Native CLI tạo mẫu với phần mở rộng .tsx và tsconfig.json. PropTypes (JS) được thay thế bằng giao diện TypeScript — kiểm tra được thực hiện tại thời điểm biên dịch, không phải runtime. styled-components và React Navigation có hỗ trợ kiểu đầy đủ.

Định kiểu thành phần

React.FC<Props> là kiểu cho thành phần chức năng với props. Children được định kiểu tự động. useRef<T> — tham chiếu đến thành phần gốc. useState<S> — trạng thái với suy luận kiểu. useNavigation<T> — điều hướng được định kiểu. useCallback, useMemo — với suy luận kiểu tự động. Tất cả hook React đều được định kiểu đầy đủ.

// Thành phần React Native được định kiểu
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// Kiểu cho điều hướng và dữ liệu
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// Giao diện cho props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Thành phần chức năng được định kiểu
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

Kiểu RootStackParamList là từ điển các tuyến đường với tham số của chúng. NavigationProp cung cấp điều hướng được định kiểu: navigation.navigate('Profile', { userId }) xác minh rằng Profile chấp nhận userId. useCallback với tham số được định kiểu ngăn chặn việc kết xuất lại không cần thiết. FlatList được định kiểu qua generics: — data và renderItem nhận kiểu tự động.

Công cụ phát triển TypeScript

Công cụ TypeScript bao gồm trình biên dịch tsc, tsconfig.json, hỗ trợ IDE trong VS Code, ESLint với @typescript-eslint, Prettier và DefinitelyTyped (@types/*). tsc là trình biên dịch chuyển đổi .ts thành .js. tsconfig.json cấu hình: target (ES2020), module (ESNext), strict: true, outDir (thư mục đầu ra). sourceMap — gỡ lỗi TS trong trình duyệt qua bản đồ mã.

DefinitelyTyped là kho lưu trữ định nghĩa kiểu cho các thư viện không có kiểu tích hợp. Cài đặt: npm install @types/react @types/react-native --save-dev. Tệp .d.ts là khai báo kiểu. Các thư viện hiện đại (React, React Native, Angular) bao gồm kiểu tích hợp và không yêu cầu @types/. Đối với thư viện JS cũ, DefinitelyTyped là nguồn kiểu duy nhất.

// tsconfig.json — cấu hình tối thiểu
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // chỉ kiểm tra, không tạo JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Tùy chọn strict: true kích hoạt tất cả kiểm tra kiểu — được khuyến nghị cho tất cả dự án. jsx: 'react-native' giữ nguyên JSX mà không biến đổi (React Native xử lý JSX qua Babel). moduleResolution: 'node' — giải quyết mô-đun như trong Node.js. esModuleInterop — tương thích với mô-đun CommonJS. noEmit: true — chỉ kiểm tra mà không tạo tệp JS (Babel hoặc Metro tạo JS).