Tips dan Trik Biar Nggak Pusing TypeScript - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

Menggunakan TypeScript dalam proyek React memang memberikan banyak manfaat, seperti validasi tipe yang lebih ketat dan peningkatan keterbacaan kode. Namun, bagi yang baru mengenal TypeScript, sering kali muncul tantangan yang bisa membuat pusing. Artikel ini akan membahas beberapa tips dan trik agar bekerja dengan TypeScript di React menjadi lebih mudah dan efisien.

1. Gunakan Type Aliases dan Interface dengan Bijak

TypeScript menyediakan dua cara utama untuk mendefinisikan tipe: type aliases dan interface. Keduanya bisa digunakan secara bergantian, tetapi ada beberapa perbedaan utama:

• type lebih fleksibel karena bisa digunakan untuk tipe primitif, union types, dan tuples.
• interface lebih baik untuk mendefinisikan struktur objek yang dapat diperluas.

Contoh penggunaan type alias:

type User = {
  name: string;
  age: number;
};

Contoh penggunaan interface:

interface User {
  name: string;
  age: number;
}

Gunakan interface jika Anda berencana untuk memperluas struktur dengan extends, dan gunakan type untuk fleksibilitas yang lebih besar.

2. Manfaatkan Tipe Default untuk useState

Saat menggunakan useState, selalu tentukan tipe state untuk menghindari masalah runtime.

Contoh:

const [count, setCount] = useState<number>(0);

Jika state bisa memiliki nilai null, gunakan union types:

const [user, setUser] = useState<User | null>(null);

3. Hindari any, Gunakan unknown atau never

Tipe any memang bisa digunakan sebagai jalan pintas, tetapi mengurangi manfaat utama TypeScript. Sebisa mungkin, gunakan unknown untuk variabel yang belum diketahui tipenya atau never untuk tipe yang tidak akan pernah terjadi.

Contoh salah:

let data: any;

Contoh benar:

let data: unknown;

4. Gunakan React.FC untuk Komponen

Saat mendeklarasikan komponen, gunakan React.FC untuk mendapatkan keuntungan dari tipe bawaan seperti children.

const Button: React.FC<{ label: string }> = ({ label }) => {
  return <button>{label}</button>;
};

Namun, hindari penggunaan React.FC jika tidak membutuhkan children, karena bisa membuat kode kurang fleksibel.

5. Pastikan Props Bersifat Readonly Jika Tidak Diubah

Jika props hanya digunakan untuk ditampilkan tanpa diubah, gunakan readonly untuk mencegah modifikasi yang tidak disengaja.

type UserProps = {
  readonly name: string;
  readonly age: number;
};

6. Gunakan Enum untuk Data yang Terbatas

Jika ada data yang memiliki nilai tetap, gunakan enum untuk meningkatkan kejelasan kode.

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
}

const userStatus: Status = Status.Active;

7. Gunakan Partial dan Required untuk Manipulasi Props

TypeScript menyediakan helper types seperti Partial<T> untuk membuat semua properti opsional dan Required<T> untuk membuatnya wajib.

Contoh Partial<T>:

type User = {
  name: string;
  age: number;
};

const updateUser = (user: Partial<User>) => {
  console.log(user);
};

Contoh Required<T>:

type User = {
  name?: string;
  age?: number;
};

const user: Required<User> = {
  name: "John",
  age: 30,
};

8. Gunakan as const untuk Array atau Object yang Tidak Berubah

Jika memiliki array atau object yang tidak akan berubah, gunakan as const agar nilainya tetap.

const roles = ["admin", "user", "guest"] as const;

const role: typeof roles[number] = "admin";

9. Validasi Props dengan PropTypes (Opsional)

Meskipun TypeScript sudah memberikan tipe statis, menggunakan prop-types tetap bisa membantu jika proyek perlu kompatibel dengan JavaScript.

import PropTypes from 'prop-types';

const Button = ({ label }: { label: string }) => {
  return <button>{label}</button>;
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
};

10. Gunakan ESLint dan Prettier untuk Standarisasi

Gunakan ESLint dan Prettier untuk menjaga konsistensi kode TypeScript di proyek React.

Tambahkan plugin TypeScript untuk ESLint:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Tambahkan konfigurasi pada .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ]
}

Kesimpulan

Menggunakan TypeScript dalam proyek React memang membutuhkan sedikit pembiasaan, tetapi dengan memahami konsep dasar dan menerapkan tips di atas, Anda bisa menghindari banyak kesalahan umum. TypeScript membantu dalam menulis kode yang lebih aman, mudah dipelihara, dan lebih terstruktur.

Dengan menggunakan type alias, interface, helper types, dan enum, serta menerapkan praktik terbaik seperti menghindari any dan menggunakan Partial, proyek TypeScript di React bisa berjalan lebih lancar dan efisien.