Panduan Integrasi TypeScript dengan React Langkah demi Langkah

Mengintegrasikan TypeScript dengan React meningkatkan pengalaman pengembangan dengan menyediakan pemeriksaan tipe statis dan dukungan perkakas yang lebih baik. Panduan ini memandu proses pengaturan TypeScript dalam proyek React dari awal.

Prasyarat

Pastikan Node.js dan npm (Node Package Manager) telah terinstal di sistem. Alat-alat ini diperlukan untuk mengelola dependensi dan skrip proyek.

Membuat Proyek React Baru dengan TypeScript

Cara termudah untuk memulai proyek React baru dengan TypeScript adalah dengan menggunakan template Create React App with TypeScript. Ikuti langkah-langkah berikut:

1. Buat Proyek Baru: Gunakan Buat Aplikasi React untuk membuat proyek React baru dengan dukungan TypeScript.

npx create-react-app my-app --template typescript

Perintah ini menyiapkan proyek React baru bernama my-app dengan konfigurasi TypeScript siap pakai.

Memahami Konfigurasi TypeScript

Proyek yang dibuat menyertakan file tsconfig.json, yang berisi opsi penyusun TypeScript dan pengaturan proyek. Berikut ini adalah contoh konfigurasinya:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Menulis Komponen TypeScript

Komponen React dapat ditulis menggunakan TypeScript untuk memastikan keamanan tipe. Berikut adalah contoh komponen fungsional dengan TypeScript:

import React from 'react';

interface Props {
  name: string;
  age?: number;
}

const Greeting: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
}

export default Greeting;

Dalam contoh ini, antarmuka Props mendefinisikan tipe untuk properti komponen. Tipe React.FC digunakan untuk komponen fungsional dengan anak dan pemeriksaan tipe.

Menjalankan Proyek

Setelah menyiapkan TypeScript dan menulis komponen, proyek dapat dijalankan menggunakan skrip npm berikut:

npm start

Perintah ini memulai server pengembangan dan membuka aplikasi React di peramban web default.

Tips Tambahan

• Definisi Tipe: Untuk pustaka pihak ketiga, instal definisi tipe menggunakan npm. Misalnya, npm install @types/react @types/react-dom --save-dev menyediakan tipe untuk React dan ReactDOM.
• Menggunakan TypeScript dengan Redux: Saat menggunakan Redux dengan TypeScript, pastikan untuk mengetik tindakan, pereduksi, dan penyimpanan demi keamanan tipe dan pelengkapan otomatis yang lebih baik.

Kesimpulan

Mengintegrasikan TypeScript dengan React meningkatkan pengembangan dengan menyediakan keamanan tipe dan kemudahan pemeliharaan kode yang lebih baik. Dengan mengikuti langkah-langkah yang diuraikan dalam panduan ini, proyek React dengan TypeScript dapat disiapkan secara efektif, yang memungkinkan pengembang memanfaatkan fitur-fitur TypeScript untuk membangun aplikasi yang tangguh dan dapat diskalakan.