M

MLOG

Bahasa Indonesia

Jelajahi praktik terbaik penggunaan TypeScript dengan React untuk membangun aplikasi web yang tangguh, skalabel, dan mudah dipelihara. Pelajari tentang struktur proyek, desain komponen, pengujian, dan optimisasi.

TypeScript dengan React: Praktik Terbaik untuk Aplikasi yang Skalabel dan Mudah Dipelihara

TypeScript dan React adalah kombinasi yang kuat untuk membangun aplikasi web modern. TypeScript membawa pengetikan statis ke JavaScript, meningkatkan kualitas dan kemudahan pemeliharaan kode, sementara React menyediakan pendekatan deklaratif dan berbasis komponen untuk membangun antarmuka pengguna. Postingan blog ini mengeksplorasi praktik terbaik penggunaan TypeScript dengan React untuk menciptakan aplikasi yang tangguh, skalabel, dan mudah dipelihara yang sesuai untuk audiens global.

Mengapa Menggunakan TypeScript dengan React?

Sebelum membahas praktik terbaik, mari kita pahami mengapa TypeScript merupakan tambahan yang berharga untuk pengembangan React:

Menyiapkan Proyek React TypeScript

Menggunakan Create React App

Cara termudah untuk memulai proyek React TypeScript baru adalah dengan menggunakan Create React App dengan templat TypeScript:

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

Perintah ini menyiapkan proyek React dasar dengan TypeScript yang sudah dikonfigurasi, termasuk dependensi yang diperlukan dan file tsconfig.json.

Mengonfigurasi tsconfig.json

File tsconfig.json adalah inti dari konfigurasi TypeScript Anda. Berikut adalah beberapa pengaturan yang direkomendasikan:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Opsi utama yang perlu dipertimbangkan:

Praktik Terbaik untuk Komponen React dengan TypeScript

Mengetikkan Props Komponen

Salah satu aspek terpenting dalam menggunakan TypeScript dengan React adalah mengetikkan props komponen Anda dengan benar. Gunakan antarmuka (interface) atau alias tipe (type alias) untuk mendefinisikan bentuk objek props.

interface MyComponentProps {
  name: string;
  age?: number; // Prop opsional
  onClick: () => void;
}

const MyComponent: React.FC = ({ name, age, onClick }) => {
  return (
    

      
Hello, {name}!

      {age && 
You are {age} years old.
}
      
    

  );
};

Menggunakan React.FC<MyComponentProps> memastikan bahwa komponen tersebut adalah komponen fungsional dan props-nya diketik dengan benar.

Mengetikkan State Komponen

Jika Anda menggunakan komponen kelas, Anda juga perlu mengetikkan state komponen. Definisikan antarmuka atau alias tipe untuk objek state dan gunakan dalam definisi komponen.

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      

        
Count: {this.state.count}

        
      

    );
  }
}

Untuk komponen fungsional yang menggunakan hook useState, TypeScript sering kali dapat menyimpulkan tipe variabel state, tetapi Anda juga dapat menyediakannya secara eksplisit:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}

      
    

  );
};

Menggunakan Type Guards

Type guard adalah fungsi yang mempersempit tipe variabel dalam cakupan tertentu. Fungsi ini berguna saat berhadapan dengan tipe union atau saat Anda perlu memastikan bahwa variabel memiliki tipe tertentu sebelum melakukan operasi.

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.side ** 2;
  }
}

Fungsi isCircle adalah type guard yang memeriksa apakah sebuah Shape adalah Circle. Di dalam blok if, TypeScript tahu bahwa shape adalah Circle dan memungkinkan Anda untuk mengakses properti radius-nya.

Menangani Event

Saat menangani event di React dengan TypeScript, penting untuk mengetikkan objek event dengan benar. Gunakan tipe event yang sesuai dari namespace React.

const MyComponent: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
  );
};

Dalam contoh ini, React.ChangeEvent<HTMLInputElement> digunakan untuk mengetikkan objek event untuk event perubahan pada elemen input. Ini memberikan akses ke properti target, yang merupakan HTMLInputElement.

Struktur Proyek

Proyek yang terstruktur dengan baik sangat penting untuk kemudahan pemeliharaan dan skalabilitas. Berikut adalah struktur proyek yang disarankan untuk aplikasi React TypeScript:

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.tsx
│   │   ├── MyComponent.module.css
│   │   └── index.ts
├── pages/
│   ├── HomePage.tsx
│   └── AboutPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── types/
│   ├── index.ts
│   └── models.ts
├── utils/
│   ├── helpers.ts
│   └── constants.ts
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── tsconfig.json

Poin-poin penting:

Menggunakan Hooks dengan TypeScript

React Hooks memungkinkan Anda menggunakan state dan fitur React lainnya dalam komponen fungsional. TypeScript bekerja dengan mulus bersama Hooks, memberikan keamanan tipe dan pengalaman pengembang yang lebih baik.

useState

Seperti yang ditunjukkan sebelumnya, Anda dapat secara eksplisit mengetikkan variabel state saat menggunakan useState:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}

      
    

  );
};

useEffect

Saat menggunakan useEffect, perhatikan array dependensi. TypeScript dapat membantu Anda menangkap kesalahan jika Anda lupa menyertakan dependensi yang digunakan di dalam efek.

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Tambahkan 'count' ke array dependensi

  return (
    

      
Count: {count}

      
    

  );
};

Jika Anda menghilangkan count dari array dependensi, efek hanya akan berjalan sekali saat komponen di-mount, dan judul dokumen tidak akan diperbarui saat hitungan berubah. TypeScript akan memperingatkan Anda tentang potensi masalah ini.

useContext

Saat menggunakan useContext, Anda perlu menyediakan tipe untuk nilai konteks.

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Implementasikan logika tema di sini
  return (
     {} }}>
      {children}
    
  );
};

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType;

  return (
    

      
Theme: {theme}

      
    

  );
};

export { ThemeProvider, MyComponent };

Dengan menyediakan tipe untuk nilai konteks, Anda memastikan bahwa hook useContext mengembalikan nilai dengan tipe yang benar.

Menguji Komponen React TypeScript

Pengujian adalah bagian penting dari membangun aplikasi yang tangguh. TypeScript meningkatkan pengujian dengan menyediakan keamanan tipe dan cakupan kode yang lebih baik.

Pengujian Unit

Gunakan kerangka kerja pengujian seperti Jest dan React Testing Library untuk menguji unit komponen Anda.

// MyComponent.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component with the correct name', () => {
    render();
    expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

  it('calls the onClick handler when the button is clicked', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

Pemeriksaan tipe TypeScript membantu menangkap kesalahan dalam pengujian Anda, seperti memberikan props yang salah atau menggunakan handler event yang keliru.

Pengujian Integrasi

Tes integrasi memverifikasi bahwa berbagai bagian aplikasi Anda bekerja sama dengan benar. Gunakan alat seperti Cypress atau Playwright untuk pengujian end-to-end.

Optimisasi Performa

TypeScript juga dapat membantu optimisasi performa dengan menangkap potensi hambatan performa di awal proses pengembangan.

Memoization

Gunakan React.memo untuk melakukan memoization pada komponen fungsional dan mencegah render ulang yang tidak perlu.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('Merender MyComponent');
  return (
    
Hello, {name}!

  );
};

export default React.memo(MyComponent);

React.memo hanya akan merender ulang komponen jika props telah berubah. Ini dapat secara signifikan meningkatkan performa, terutama untuk komponen yang kompleks.

Code Splitting

Gunakan impor dinamis untuk membagi kode Anda menjadi bagian-bagian yang lebih kecil dan memuatnya sesuai permintaan. Ini dapat mengurangi waktu muat awal aplikasi Anda.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App: React.FC = () => {
  return (
    Loading...
}> ); };

React.lazy memungkinkan Anda mengimpor komponen secara dinamis, yang dimuat hanya saat dibutuhkan. Komponen Suspense menyediakan UI fallback saat komponen sedang dimuat.

Kesimpulan

Menggunakan TypeScript dengan React dapat secara signifikan meningkatkan kualitas, kemudahan pemeliharaan, dan skalabilitas aplikasi web Anda. Dengan mengikuti praktik terbaik ini, Anda dapat memanfaatkan kekuatan TypeScript untuk membangun aplikasi yang tangguh dan beperforma tinggi yang memenuhi kebutuhan audiens global. Ingatlah untuk fokus pada definisi tipe yang jelas, organisasi proyek yang terstruktur dengan baik, dan pengujian yang menyeluruh untuk memastikan keberhasilan jangka panjang proyek Anda.

Sumber Daya Lebih Lanjut