TypeScript: esensi bahasa, pengetikan ketat, dan React Native

Apa itu TypeScript?

TypeScript — bahasa pemrograman dari Microsoft (2012), dikembangkan oleh Anders Hejlsberg (pencipta C# dan Turbo Pascal). TypeScript memperluas JavaScript dengan sistem tipe statis, antarmuka, generik, enumerasi, dan dekorator. Kode TS dikompilasi menjadi JavaScript murni (transpilasi) menggunakan kompiler tsc atau Babel — hasilnya adalah JS standar yang berjalan di lingkungan apa pun.

Motivasi pembuatan TypeScript — keterbatasan JavaScript dalam proyek besar. Pengetikan dinamis JS menyebabkan kesalahan yang hanya terdeteksi saat runtime: undefined is not a function, Cannot read property of null. TypeScript memindahkan pemeriksaan tipe ke tahap kompilasi, mencegah kesalahan ini sebelum kode dieksekusi. Semakin besar proyek, semakin signifikan keuntungan TS: dalam basis kode 100.000+ baris, TS mencegah ratusan potensi bug.

Fitur utama TypeScript — pengetikan ketat dengan flag opsional strict: true di tsconfig.json. Dalam mode ketat, semua pemeriksaan diaktifkan: strictNullChecks (null/undefined tidak kompatibel dengan tipe lain), noImplicitAny (melarang any implisit), strictFunctionTypes (kontravarian parameter fungsi). Secara default, strict: true direkomendasikan untuk semua proyek baru.

TypeScript vs JavaScript

TypeScript berbeda dari JavaScript hanya pada tahap pengembangan. Setelah kompilasi, tipe dihapus — runtime menjalankan JS biasa tanpa kehilangan kinerja. Ini adalah kompromi: pengembangan memerlukan langkah kompilasi tambahan, tetapi memberikan penyelesaian otomatis di IDE, refactoring dengan penggantian nama simbol, dan dokumentasi tipe langsung di kode.

Sistem tipe TypeScript

Sistem tipe TypeScript — struktural (structural typing), bukan nominal: dua tipe kompatibel jika strukturnya cocok, terlepas dari namanya. Ini berbeda dari Java/C#, di mana kompatibilitas ditentukan oleh nama kelas atau antarmuka. Pengetikan struktural menyederhanakan integrasi dengan kode JS yang ada — tidak perlu mendeklarasikan implements untuk setiap tipe.

Tipe dasar dan lanjutan

TypeScript mendukung tipe primitif JS plus: any (menonaktifkan pemeriksaan), unknown (any aman — memerlukan pemeriksaan sebelum digunakan), never (tidak pernah mengembalikan), void (tanpa pengembalian), tuple (tupel panjang tetap), enum (enumerasi), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Sistem tipe dasar TypeScript
// Tipe primitif
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Tipe Union dan 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 — tupel panjang tetap
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — enumerasi dengan kenaikan otomatis
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — alternatif aman untuk 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);
}

Tipe Platform — union dari literal string yang membatasi nilai menjadi tiga varian. Jika 'windows' diberikan, TypeScript akan memberikan kesalahan. Tupel Coordinate menjamin tepat dua angka — ini nyaman untuk koordinat atau warna RGB. Enum AppState dikompilasi menjadi objek dengan pemetaan terbalik. Unknown memaksa pemeriksaan tipe sebelum digunakan — tidak seperti any, unknown aman secara default.

Antarmuka dan alias tipe

Antarmuka (interface) dan alias tipe (type) di TypeScript menggambarkan bentuk objek. Antarmuka dapat digabungkan (declaration merging — deklarasi ulang menambahkan bidang) dan diperluas (extends). Alias tipe dapat menggambarkan union, intersection, tuple, dan tipe kondisional, tetapi tidak mendukung declaration merging. Aturan: gunakan interface untuk objek API, type — untuk yang lainnya.

// Antarmuka dan tipe untuk React Native
// Antarmuka dengan bidang opsional
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // bidang opsional
  readonly createdAt: Date; // hanya baca
}

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

// Tipe untuk data API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial membuat semua bidang opsional
type PartialUser = Partial<User>;

// Pick — memilih bidang yang ditentukan
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — kamus dengan kunci beripe
type UserMap = Record<string, User>;

Antarmuka User dengan ? (bidang opsional) dan readonly (hanya baca). ApiResponse<T> — antarmuka generik untuk respons API. Partial<User> — tipe utilitas yang membuat semua bidang opsional (berguna untuk formulir edit). Pick<User, 'id' | 'name'> memilih hanya bidang yang ditentukan — nyaman untuk komponen pratinjau. Record<string, User> — kamus pengguna berdasarkan ID.

Generik dan tipe utilitas

Generik — salah satu fitur utama TypeScript, memungkinkan pembuatan komponen yang bekerja dengan tipe apa pun tanpa kehilangan keamanan tipe. Fungsi generik didefinisikan dengan parameter tipe dalam kurung sudut: function identity<T>(arg: T): T. Tipe T disimpulkan secara otomatis dari argumen atau ditentukan secara eksplisit: identity<string>('hello').

Tipe utilitas — generik bawaan untuk transformasi tipe: Partial<T> (semua bidang opsional), Required<T> (semua bidang wajib), Readonly<T> (semua bidang hanya baca), Pick<T, K> (pemilihan bidang), Omit<T, K> (pengecualian bidang), Record<K, T> (kamus), Exclude<T, U> (pengecualian union), Extract<T, U> (ekstraksi union), NonNullable<T> (pengecualian null/undefined).

// Generik di TypeScript
// Fungsi generik untuk bekerja dengan 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>;
}

// Penggunaan dengan tipe konkret
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Kelas generik untuk mengelola status
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 };
  }
}

// Pekerjaan beripe dengan 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>>;

Fungsi fetchData<T> — pembungus beripe di sekitar fetch. Parameter T menentukan bentuk respons: saat pemanggilan fetchData<Product[]> TypeScript tahu bahwa array yang dikembalikan berisi objek Product. Kelas StateManager<S> mengelola status tipe apa pun — Partial<S> untuk pembaruan parsial. Action<T, P> — discriminated union untuk aksi Redux dengan penyempitan tipe otomatis di switch.

TypeScript di React Native

TypeScript di React Native menyediakan pengetikan ketat props dan state komponen. React Native CLI membuat template dengan ekstensi .tsx dan tsconfig.json. PropTypes (JS) digantikan dengan antarmuka TypeScript — pemeriksaan dilakukan pada tahap kompilasi, bukan saat runtime. styled-components dan React Navigation memiliki tipe lengkap.

Pengetikan komponen

React.FC<Props> — tipe komponen fungsional dengan props. Anak-anak (children) secara otomatis diketik. useRef<T> — referensi ke komponen asli. useState<S> — status dengan inferensi tipe. useNavigation<T> — navigasi beripe. useCallback, useMemo — dengan inferensi tipe otomatis. Semua hook React sepenuhnya diketik.

// Komponen React Native beripe
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';

// Tipe untuk navigasi dan data
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

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

// Komponen fungsional beripe
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)}
    />
  );
};

Tipe RootStackParamList — kamus rute dengan parameternya. NavigationProp — navigasi beripe: navigation.navigate('Profile', { userId }) memeriksa bahwa Profile menerima userId. useCallback dengan parameter beripe mencegah render ulang yang tidak perlu. FlatList diketik melalui generik: — data dan renderItem mendapatkan tipe secara otomatis.

Alat pengembang TypeScript

Alat TypeScript mencakup kompiler tsc, tsconfig.json, dukungan IDE di VS Code, ESLint dengan @typescript-eslint, Prettier, dan DefinitelyTyped (@types/*). tsc — kompiler yang mengubah .ts menjadi .js. tsconfig.json — konfigurasi: target (ES2020), module (ESNext), strict: true, outDir (folder keluaran). sourceMap — debugging TS di browser melalui peta kode.

DefinitelyTyped — repositori dengan pengetikan untuk pustaka tanpa tipe bawaan. Instalasi: npm install @types/react @types/react-native --save-dev. File .d.ts — deklarasi tipe. Pustaka modern (React, React Native, Angular) menyertakan tipe bawaan dan tidak memerlukan @types/. Untuk pustaka JS lama, DefinitelyTyped adalah satu-satunya sumber tipe.

// tsconfig.json — konfigurasi minimal
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // hanya pemeriksaan, tanpa menghasilkan JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Opsi strict: true mengaktifkan semua pemeriksaan tipe — direkomendasikan untuk semua proyek. jsx: 'react-native' mempertahankan JSX tanpa transformasi (React Native memproses JSX melalui Babel). moduleResolution: 'node' — pencarian modul seperti di Node.js. esModuleInterop — kompatibilitas dengan modul CommonJS. noEmit: true — hanya pemeriksaan tanpa menghasilkan file JS (Babel atau Metro menghasilkan JS).