TypeScript: esensya ng wika, mahigpit na pag-type, at React Native

Ano ang TypeScript?

TypeScript — isang programming language mula sa Microsoft (2012), na binuo ni Anders Hejlsberg (tagalikha ng C# at Turbo Pascal). Pinapalawak ng TypeScript ang JavaScript gamit ang isang static na sistema ng tipo, mga interface, generics, enumerations, at dekorator. Ang TS code ay nini-compile sa purong JavaScript (transpilation) gamit ang compiler na tsc o Babel — ang output ay standard JS na gumagana sa anumang kapaligiran.

Ang motibasyon sa paglikha ng TypeScript — mga limitasyon ng JavaScript sa malalaking proyekto. Ang dynamic na pag-type ng JS ay humahantong sa mga error na natutuklasan lamang sa runtime: undefined is not a function, Cannot read property of null. Inililipat ng TypeScript ang pagsusuri ng tipo sa yugto ng compilation, na pinipigilan ang mga error na ito bago isagawa ang code. Kung mas malaki ang proyekto, mas makabuluhan ang mga benepisyo ng TS: sa isang codebase na 100,000+ na linya, pinipigilan ng TS ang daan-daang potensyal na bug.

Ang pangunahing tampok ng TypeScript — mahigpit na pag-type na may opsyonal na flag na strict: true sa tsconfig.json. Sa mahigpit na mode, lahat ng pagsusuri ay naa-activate: strictNullChecks (hindi tugma ang null/undefined sa ibang tipo), noImplicitAny (nagbabawal ng implicit any), strictFunctionTypes (contravariance ng mga parameter ng function). Bilang default, ang strict: true ay inirerekomenda para sa lahat ng bagong proyekto.

TypeScript vs JavaScript

TypeScript ay naiiba mula sa JavaScript lamang sa yugto ng pag-develop. Pagkatapos ng compilation, ang mga tipo ay binubura — ang runtime ay nagsasagawa ng ordinaryong JS nang walang pagkawala ng performance. Ito ay isang kompromiso: ang pag-develop ay nangangailangan ng karagdagang hakbang ng compilation, ngunit nagbibigay ng autocomplete sa IDE, refactoring na may pagpapalit ng pangalan ng simbolo, at dokumentasyon ng tipo nang direkta sa code.

Sistema ng tipo ng TypeScript

Sistema ng tipo ng TypeScript — istruktural (structural typing), hindi nominal: dalawang tipo ay tugma kung ang kanilang istruktura ay magkatugma, anuman ang pangalan. Ito ay naiiba mula sa Java/C#, kung saan ang pagkakatugma ay tinutukoy ng pangalan ng klase o interface. Ang istruktural na pag-type ay nagpapasimple ng integrasyon sa umiiral na JS code — hindi kailangang magdeklara ng implements para sa bawat tipo.

Mga pangunahing at advanced na tipo

TypeScript ay sumusuporta sa mga primitive na tipo ng JS plus: any (pag-disable ng pagsusuri), unknown (ligtas na any — nangangailangan ng pagsusuri bago gamitin), never (hindi kailanman bumabalik), void (walang balik), tuple (tuplong may takdang haba), enum (enumeration), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Pangunahing sistema ng tipo ng TypeScript
// Mga primitive na tipo
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union at Literal tipos
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 — tuplong may takdang haba
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — enumeration na may auto-increment
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — ligtas na alternatibo sa 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);
}

Ang tipong Platform — union ng string literals na naglilimita ng mga halaga sa tatlong variant. Kung ipapasa ang 'windows', magbibigay ng error ang TypeScript. Ang tuple na Coordinate ay ginagarantiyahan ang eksaktong dalawang numero — ito ay maginhawa para sa mga coordinate o RGB na kulay. Ang Enum AppState ay nini-compile sa isang bagay na may reverse mapping. Pinipilit ng Unknown ang pagsusuri ng tipo bago gamitin — hindi tulad ng any, ang unknown ay ligtas bilang default.

Mga Interface at type-alias

Mga Interface (interface) at type-alias (type) sa TypeScript ay naglalarawan ng hugis ng mga bagay. Ang mga interface ay maaaring pagsamahin (declaration merging — ang muling deklarasyon ay nagdaragdag ng mga field) at palawakin (extends). Ang mga type-alias ay maaaring maglarawan ng union, intersection, tuple, at kondisyonal na tipo, ngunit hindi sumusuporta sa declaration merging. Patakaran: gamitin ang interface para sa mga bagay ng API, type — para sa lahat ng iba pa.

// Mga interface at tipo para sa React Native
// Interface na may opsyonal na field
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // opsyonal na field
  readonly createdAt: Date; // para sa pagbabasa lamang
}

// Pagpapalawak ng interface (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Tipo para sa data ng API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Pinapa-opsyonal ng Partial ang lahat ng field
type PartialUser = Partial<User>;

// Pick — pumipili ng tinukoy na field
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — diksyunaryo na may nakatype na key
type UserMap = Record<string, User>;

Interface User na may ? (opsyonal na field) at readonly (para sa pagbabasa lamang). ApiResponse<T> — generic na interface para sa mga tugon ng API. Partial<User> — utility tipo na ginagawang opsyonal ang lahat ng field (kapaki-pakinabang para sa mga form ng pag-edit). Pick<User, 'id' | 'name'> pumipili lamang ng mga tinukoy na field — maginhawa para sa mga preview component. Record<string, User> — diksyunaryo ng mga user ayon sa ID.

Generics at utility tipo

Generics — isa sa mga pangunahing tampok ng TypeScript, na nagpapahintulot sa paglikha ng mga component na gumagana sa anumang tipo nang hindi nawawala ang kaligtasan ng tipo. Ang generic na function ay tinutukoy gamit ang parameter ng tipo sa mga anggulong bracket: function identity<T>(arg: T): T. Ang tipong T ay awtomatikong hinuhusgahan mula sa argumento o tahasang tinutukoy: identity<string>('hello').

Utility tipos — mga built-in na generics para sa transformasyon ng tipo: Partial<T> (lahat ng field ay opsyonal), Required<T> (lahat ng field ay sapilitan), Readonly<T> (lahat ng field ay para sa pagbabasa lamang), Pick<T, K> (pagpili ng field), Omit<T, K> (pagbubukod ng field), Record<K, T> (diksyunaryo), Exclude<T, U> (pagbubukod ng union), Extract<T, U> (pagkuha ng union), NonNullable<T> (pagbubukod ng null/undefined).

// Generics sa TypeScript
// Generic na function para sa pagtatrabaho sa 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>;
}

// Paggamit na may kongkretong tipo
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Generic na klase para sa pamamahala ng estado
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 };
  }
}

// Nakatype na trabaho sa 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>>;

Ang function na fetchData<T> — isang nakatype na wrapper sa paligid ng fetch. Tinutukoy ng parameter na T ang hugis ng tugon: sa pagtawag ng fetchData<Product[]> alam ng TypeScript na ang ibinalik na array ay naglalaman ng mga bagay na Product. Ang klase na StateManager<S> ay namamahala ng estado ng anumang tipo — Partial<S> para sa bahagyang pag-update. Action<T, P> — discriminated union para sa mga aksyon ng Redux na may awtomatikong pagpapaliit ng tipo sa switch.

TypeScript sa React Native

TypeScript sa React Native ay nagbibigay ng mahigpit na pag-type ng props at estado ng mga component. Ang React Native CLI ay gumagawa ng template na may .tsx extension at tsconfig.json. Ang PropTypes (JS) ay pinapalitan ng TypeScript interfaces — ang pagsusuri ay ginagawa sa yugto ng compilation, hindi sa runtime. Ang styled-components at React Navigation ay may kumpletong tipo.

Pag-type ng component

React.FC<Props> — tipo ng isang functional component na may props. Ang mga anak (children) ay awtomatikong nati-type. useRef<T> — sanggunian sa native component. useState<S> — estado na may inference ng tipo. useNavigation<T> — nakatype na nabigasyon. useCallback, useMemo — na may awtomatikong inference ng tipo. Lahat ng React hooks ay ganap na nati-type.

// Nakatype na React Native component
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';

// Mga tipo para sa nabigasyon at data
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Interface para sa props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Nakatype na functional component
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)}
    />
  );
};

Ang tipong RootStackParamList — diksyunaryo ng mga ruta kasama ang kanilang mga parameter. NavigationProp — nakatype na nabigasyon: navigation.navigate('Profile', { userId }) ay sinusuri na ang Profile ay tumatanggap ng userId. Ang useCallback na may nakatype na parameter ay pumipigil sa mga hindi kinakailangang pag-render. Ang FlatList ay nati-type sa pamamagitan ng generic: — ang data at renderItem ay awtomatikong nakakakuha ng tipo.

Mga tool ng developer ng TypeScript

Mga tool ng TypeScript ay kinabibilangan ng compiler na tsc, tsconfig.json, suporta ng IDE sa VS Code, ESLint na may @typescript-eslint, Prettier, at DefinitelyTyped (@types/*). tsc — compiler na nagko-convert ng .ts sa .js. tsconfig.json — konfigurasyon: target (ES2020), module (ESNext), strict: true, outDir (output folder). sourceMap — pag-debug ng TS sa browser sa pamamagitan ng code maps.

DefinitelyTyped — repositoryo na may mga pag-type para sa mga library na walang built-in na tipo. Pag-install: npm install @types/react @types/react-native --save-dev. Ang mga .d.ts file — mga deklarasyon ng tipo. Ang mga modernong library (React, React Native, Angular) ay may kasamang built-in na tipo at hindi nangangailangan ng @types/. Para sa mga lumang JS library, ang DefinitelyTyped ay ang tanging mapagkukunan ng tipo.

// tsconfig.json — minimal na konfigurasyon
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // pagsusuri lamang, nang walang pagbuo ng JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Ang opsyon na strict: true ay nag-a-activate ng lahat ng pagsusuri ng tipo — inirerekomenda para sa lahat ng proyekto. jsx: 'react-native' ay nagpapanatili ng JSX nang walang pagbabago (Ang React Native ay nagpoproseso ng JSX sa pamamagitan ng Babel). moduleResolution: 'node' — paghahanap ng module tulad ng sa Node.js. esModuleInterop — pagkakatugma sa CommonJS modules. noEmit: true — pagsusuri lamang nang walang pagbuo ng mga JS file (Ang Babel o Metro ay bumubuo ng JS).