TypeScript: แก่นแท้ของภาษา การกำหนดชนิดที่เข้มงวด และ React Native

TypeScript คืออะไร?

TypeScript คือภาษาการเขียนโปรแกรมจาก Microsoft (2012) ที่สร้างโดย Anders Hejlsberg (ผู้สร้าง C# และ Turbo Pascal) TypeScript ขยาย JavaScript ด้วยระบบชนิดแบบสถิต อินเทอร์เฟส เจเนอริก การแจงนับ และเดคอเรเตอร์ โค้ด TS จะถูกคอมไพล์เป็น JavaScript บริสุทธิ์ (transpilation) ผ่านคอมไพเลอร์ tsc หรือ Babel — ผลลัพธ์คือ JS มาตรฐานที่ทำงานได้ในทุกสภาพแวดล้อม

แรงจูงใจเบื้องหลัง TypeScript คือข้อจำกัดของ JavaScript ในโปรเจกต์ขนาดใหญ่ การกำหนดชนิดแบบไดนามิกของ JS นำไปสู่ข้อผิดพลาดที่ค้นพบได้ในรันไทม์เท่านั้น: undefined is not a function, Cannot read property of null TypeScript ย้ายการตรวจสอบชนิดไปยังขั้นตอนคอมไพล์ ป้องกันข้อผิดพลาดเหล่านี้ก่อนการทำงานของโค้ด ยิ่งโปรเจกต์ใหญ่เท่าไหร่ ประโยชน์ของ TS ก็ยิ่งมากขึ้นเท่านั้น: ในฐานโค้ดที่มี 100,000+ บรรทัด TS ป้องกันบั๊กที่อาจเกิดขึ้นได้หลายร้อยรายการ

คุณลักษณะสำคัญของ TypeScript คือการกำหนดชนิดที่เข้มงวดพร้อมแฟล็กเสริม strict: true ใน tsconfig.json โหมดเข้มงวดจะเปิดใช้งานการตรวจสอบทั้งหมด: strictNullChecks (null/undefined เข้ากันไม่ได้กับชนิดอื่น), noImplicitAny (ห้าม any โดยนัย), strictFunctionTypes (ความแปรปรวนตรงข้ามของพารามิเตอร์ฟังก์ชัน) โดยค่าเริ่มต้น แนะนำให้ใช้ strict: true สำหรับโปรเจกต์ใหม่ทั้งหมด

TypeScript เทียบกับ JavaScript

TypeScript แตกต่างจาก JavaScript เฉพาะในขั้นตอนการพัฒนาเท่านั้น หลังจากคอมไพล์ ชนิดต่างๆ จะถูกลบออก — รันไทม์ทำงาน JS ปกติโดยไม่สูญเสียประสิทธิภาพ นี่คือการแลกเปลี่ยน: การพัฒนาต้องการขั้นตอนการคอมไพล์เพิ่มเติม แต่ให้การเติมข้อความอัตโนมัติใน IDE การปรับโครงสร้างพร้อมการเปลี่ยนชื่อสัญลักษณ์ และเอกสารชนิดโดยตรงในโค้ด

ระบบชนิดของ TypeScript

ระบบชนิดของ TypeScript เป็นแบบโครงสร้าง ไม่ใช่แบบระบุชื่อ: ชนิดสองชนิดเข้ากันได้หากโครงสร้างตรงกัน โดยไม่คำนึงถึงชื่อ ซึ่งแตกต่างจาก Java/C# ที่ความเข้ากันได้ถูกกำหนดโดยชื่อคลาสหรืออินเทอร์เฟส การกำหนดชนิดแบบโครงสร้างช่วยลดความซับซ้อนในการรวมเข้ากับโค้ด JS ที่มีอยู่ — ไม่จำเป็นต้องประกาศ implements สำหรับทุกชนิด

ชนิดพื้นฐานและขั้นสูง

TypeScript รองรับชนิดพื้นฐานของ JS บวกกับ: any (ปิดการตรวจสอบ), unknown (any ที่ปลอดภัย — ต้องตรวจสอบก่อนใช้), never (ไม่ส่งคืนเลย), void (ไม่มีการส่งคืน), tuple (ทูเพิลความยาวคงที่), enum (การแจงนับ), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number)

// ระบบชนิดพื้นฐานของ TypeScript
// ชนิดพื้นฐาน
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// ชนิด Union และ 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 — ทูเพิลความยาวคงที่
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — การแจงนับที่เพิ่มอัตโนมัติ
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — ทางเลือกที่ปลอดภัยสำหรับ 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);
}

ชนิด Platform คือ union ของลิเทอรัลสตริง ที่จำกัดค่าให้เหลือสามตัวเลือก หากคุณส่ง 'windows' เข้าไป TypeScript จะแสดงข้อผิดพลาด ทูเพิล Coordinate รับประกันตัวเลขสองตัวพอดี — มีประโยชน์สำหรับพิกัดหรือสี RGB Enum AppState จะคอมไพล์เป็นออบเจกต์ที่มีการแมปย้อนกลับ Unknown บังคับให้ตรวจสอบชนิดก่อนใช้ — แตกต่างจาก any unknown ปลอดภัยโดยค่าเริ่มต้น

อินเทอร์เฟสและนามแฝงชนิด

อินเทอร์เฟส และ นามแฝงชนิด ใน TypeScript อธิบายรูปร่างของออบเจกต์ อินเทอร์เฟสรองรับการรวมประกาศ (การประกาศซ้ำจะเพิ่มฟิลด์) และการขยาย (extends) นามแฝงชนิดสามารถอธิบาย union, intersection, tuple และชนิดแบบมีเงื่อนไข แต่ไม่รองรับการรวมประกาศ กฎ: ใช้อินเทอร์เฟสสำหรับออบเจกต์ API และใช้ type สำหรับทุกอย่างอื่น

// อินเทอร์เฟสและชนิดสำหรับ React Native
// อินเทอร์เฟสพร้อมฟิลด์ที่ไม่บังคับ
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // ฟิลด์ที่ไม่บังคับ
  readonly createdAt: Date; // อ่านอย่างเดียว
}

// การขยายอินเทอร์เฟส (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// ชนิดสำหรับข้อมูล API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial ทำให้ฟิลด์ทั้งหมดเป็นตัวเลือก
type PartialUser = Partial<User>;

// Pick — เลือกฟิลด์ที่ระบุ
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — พจนานุกรมพร้อมคีย์ที่กำหนดชนิด
type UserMap = Record<string, User>;

อินเทอร์เฟส User ที่มี ? (ฟิลด์ที่ไม่บังคับ) และ readonly (อ่านอย่างเดียว) ApiResponse<T> คืออินเทอร์เฟสเจเนอริกสำหรับการตอบสนองจาก API Partial<User> คือชนิดอรรถประโยชน์ที่ทำให้ฟิลด์ทั้งหมดเป็นตัวเลือก (มีประโยชน์สำหรับฟอร์มแก้ไข) Pick<User, 'id' | 'name'> เลือกเฉพาะฟิลด์ที่ระบุ — สะดวกสำหรับคอมโพเนนต์ตัวอย่าง Record<string, User> คือพจนานุกรมผู้ใช้งานตาม ID

เจเนอริกและชนิดอรรถประโยชน์

เจเนอริก เป็นหนึ่งในคุณลักษณะสำคัญของ TypeScript ที่ช่วยให้สร้างคอมโพเนนต์ที่ทำงานกับชนิดใดก็ได้โดยไม่สูญเสียความปลอดภัยของชนิด ฟังก์ชันเจเนอริกถูกกำหนดด้วยพารามิเตอร์ชนิดในวงเล็บแหลม: function identity<T>(arg: T): T ชนิด T จะถูกอนุมานโดยอัตโนมัติจากอาร์กิวเมนต์หรือระบุอย่างชัดเจน: identity<string>('hello')

ชนิดอรรถประโยชน์ คือเจเนอริกในตัวสำหรับการแปลงชนิด: Partial<T> (ฟิลด์ทั้งหมดเป็นตัวเลือก), Required<T> (ฟิลด์ทั้งหมดจำเป็น), Readonly<T> (ฟิลด์ทั้งหมดอ่านอย่างเดียว), Pick<T, K> (เลือกฟิลด์), Omit<T, K> (แยกฟิลด์ออก), Record<K, T> (พจนานุกรม), Exclude<T, U> (แยกออกจาก union), Extract<T, U> (ดึงจาก union), NonNullable<T> (แยก null/undefined ออก)

// เจเนอริกใน TypeScript
// ฟังก์ชันเจเนอริกสำหรับทำงานกับ 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>;
}

// การใช้งานกับชนิดเฉพาะ
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// คลาสเจเนอริกสำหรับจัดการสถานะ
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 };
  }
}

// การทำงานที่กำหนดชนิดกับ 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>>;

ฟังก์ชัน fetchData<T> คือ wrapper ที่กำหนดชนิดรอบ fetch พารามิเตอร์ T กำหนดรูปร่างของการตอบสนอง: เมื่อเรียก fetchData<Product[]> TypeScript รู้ว่าอาร์เรย์ที่ส่งคืนประกอบด้วยออบเจกต์ Product คลาส StateManager<S> จัดการสถานะของชนิดใดก็ได้ — Partial<S> สำหรับการอัปเดตบางส่วน Action<T, P> คือ union ที่แบ่งแยกสำหรับแอ็กชัน Redux พร้อมการจำกัดชนิดอัตโนมัติใน switch

TypeScript ใน React Native

TypeScript ใน React Native ให้การกำหนดชนิดที่เข้มงวดสำหรับ props และ state ของคอมโพเนนต์ React Native CLI สร้างเทมเพลตที่มีนามสกุล .tsx และ tsconfig.json PropTypes (JS) ถูกแทนที่ด้วยอินเทอร์เฟส TypeScript — การตรวจสอบจะทำในขั้นตอนคอมไพล์ ไม่ใช่ในรันไทม์ styled-components และ React Navigation มีการรองรับชนิดอย่างสมบูรณ์

การกำหนดชนิดคอมโพเนนต์

React.FC<Props> คือชนิดสำหรับคอมโพเนนต์เชิงฟังก์ชันที่มี props Children ถูกกำหนดชนิดโดยอัตโนมัติ useRef<T> — การอ้างอิงถึงคอมโพเนนต์ดั้งเดิม useState<S> — สถานะพร้อมการอนุมานชนิด useNavigation<T> — การนำทางที่กำหนดชนิด useCallback, useMemo — พร้อมการอนุมานชนิดอัตโนมัติ ฮุค React ทั้งหมดถูกกำหนดชนิดอย่างสมบูรณ์

// คอมโพเนนต์ React Native ที่กำหนดชนิด
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';

// ชนิดสำหรับการนำทางและข้อมูล
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// อินเทอร์เฟสสำหรับ props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// คอมโพเนนต์เชิงฟังก์ชันที่กำหนดชนิด
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)}
    />
  );
};

ชนิด RootStackParamList คือพจนานุกรมของเส้นทางพร้อมพารามิเตอร์ของมัน NavigationProp ให้การนำทางที่กำหนดชนิด: navigation.navigate('Profile', { userId }) ตรวจสอบว่า Profile ยอมรับ userId useCallback ที่มีพารามิเตอร์กำหนดชนิดป้องกันการเรนเดอร์ซ้ำที่ไม่จำเป็น FlatList ถูกกำหนดชนิดผ่านเจเนอริก: — data และ renderItem จะได้รับชนิดโดยอัตโนมัติ

เครื่องมือสำหรับนักพัฒนา TypeScript

เครื่องมือ TypeScript ประกอบด้วยคอมไพเลอร์ tsc, tsconfig.json, การรองรับ IDE ใน VS Code, ESLint กับ @typescript-eslint, Prettier และ DefinitelyTyped (@types/*) tsc คือคอมไพเลอร์ที่แปลง .ts เป็น .js tsconfig.json กำหนดค่า: target (ES2020), module (ESNext), strict: true, outDir (โฟลเดอร์ส่งออก) sourceMap — การดีบัก TS ในเบราว์เซอร์ผ่านแผนที่โค้ด

DefinitelyTyped คือพื้นที่เก็บคำจำกัดความชนิดสำหรับไลบรารีที่ไม่มีชนิดในตัว การติดตั้ง: npm install @types/react @types/react-native --save-dev ไฟล์ .d.ts คือการประกาศชนิด ไลบรารีสมัยใหม่ (React, React Native, Angular) รวมชนิดในตัวและไม่ต้องการ @types/ สำหรับไลบรารี JS เก่า DefinitelyTyped เป็นแหล่งชนิดเดียว

// tsconfig.json — การกำหนดค่าขั้นต่ำ
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // ตรวจสอบอย่างเดียว ไม่สร้าง JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

ตัวเลือก strict: true เปิดใช้งานการตรวจสอบชนิดทั้งหมด — แนะนำสำหรับทุกโปรเจกต์ jsx: 'react-native' รักษา JSX ไว้โดยไม่แปลง (React Native จัดการ JSX ผ่าน Babel) moduleResolution: 'node' — การแก้ไขโมดูลเหมือนใน Node.js esModuleInterop — ความเข้ากันได้กับโมดูล CommonJS noEmit: true — ตรวจสอบอย่างเดียวโดยไม่สร้างไฟล์ JS (Babel หรือ Metro สร้าง JS)