Integrasi TypeScript dengan React dan Vue: Panduan Props, State, dan Composition API

Integrasi TypeScript dengan React dan Vue telah menjadi praktik umum di kalangan developer modern untuk meningkatkan kualitas dan keandalan kode. TypeScript memberikan sistem tipe statis di atas JavaScript yang membantu mendeteksi error sejak tahap pengembangan. Dengan penerapan yang tepat, framework seperti React dan Vue menjadi lebih kuat, scalable, serta mudah dirawat dalam jangka panjang.

Dalam proyek frontend berskala besar, penggunaan TypeScript sangat membantu dalam pengelolaan komponen, props, dan state. Developer dapat menulis kode yang lebih konsisten dan mudah dipahami antar tim. Selain itu, integrasi ini juga mempermudah refactoring tanpa takut memunculkan bug tersembunyi. React dan Vue 3 memiliki dukungan bawaan terhadap TypeScript, sehingga penerapannya relatif mudah bahkan untuk pemula.

Mengapa Menggunakan TypeScript di Framework Frontend

React dan Vue berbasis JavaScript, yang fleksibel namun terkadang rawan error karena tidak memiliki tipe data statis. Dengan TypeScript, setiap komponen memiliki definisi yang jelas untuk props, state, dan event. Hal ini membantu IDE seperti VS Code memberikan auto-completion dan linting yang akurat.

Selain itu, TypeScript mempercepat kolaborasi antar developer karena setiap bagian kode terdokumentasi secara otomatis melalui tipe data. Dengan demikian, tim pengembang bisa fokus pada logika bisnis tanpa khawatir tentang kesalahan tipe atau data yang tidak sesuai.

TypeScript di React: Props, State, dan Hook Typing

Dalam React, TypeScript digunakan untuk memperjelas struktur data pada props, state, dan hooks. Berikut contoh sederhana:

import React, { useState } from "react";

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

const UserCard: React.FC<UserProps> = ({ name, age }) => {
  const [isActive, setIsActive] = useState<boolean>(true);

  return (
    <div>
      <h3>{name}</h3>
      <p>Usia: {age}</p>
      <p>Status: {isActive ? "Aktif" : "Nonaktif"}</p>
      <button onClick={() => setIsActive(!isActive)}>Toggle Status</button>
    </div>
  );
};

export default UserCard;

Pada contoh di atas:

• interface UserProps menentukan struktur props yang harus dikirim ke komponen.

• useState<boolean> mendefinisikan bahwa state hanya menerima nilai true atau false.

• Dengan TypeScript, kesalahan seperti pengiriman tipe data yang salah dapat terdeteksi sebelum kode dijalankan.

Selain itu, untuk proyek React yang kompleks, developer juga dapat membuat custom hook dengan tipe data tertentu agar lebih reusable dan terjamin keamanannya.

TypeScript di Vue 3 dengan Composition API

Vue 3 memperkenalkan Composition API yang sangat kompatibel dengan TypeScript. Developer dapat memanfaatkan defineComponent dan ref() untuk memberikan tipe pada reactive state dan computed property.

Contoh penerapan sederhana:

<script lang="ts">
import { defineComponent, ref, computed } from "vue";

export default defineComponent({
  name: "Counter",
  setup() {
    const count = ref<number>(0);

    const double = computed<number>(() => count.value * 2);

    function increment(): void {
      count.value++;
    }

    return { count, double, increment };
  },
});
</script>

Penjelasan:

• ref<number> memastikan bahwa count hanya berisi angka.

• computed<number> memberikan tipe data pada hasil perhitungan.

• Fungsi increment() dideklarasikan dengan tipe pengembalian void untuk memperjelas bahwa fungsi tidak mengembalikan nilai.

Dengan TypeScript, Vue menjadi lebih mudah di-debug dan aman dari kesalahan penulisan. Selain itu, IDE dapat menampilkan saran otomatis berdasarkan tipe data yang digunakan di setiap properti dan method.

Tips Praktis Integrasi TypeScript

Berikut beberapa tips agar integrasi TypeScript di React atau Vue berjalan optimal:

• Gunakan ESLint dan Prettier untuk menjaga konsistensi kode.

• Pisahkan tipe data dalam folder types/ agar mudah digunakan ulang.

• Gunakan tsconfig.json dengan pengaturan strict: true untuk memastikan pemeriksaan tipe yang ketat.

• Hindari penggunaan any kecuali benar-benar diperlukan.

Kesimpulan

Integrasi TypeScript dengan React dan Vue memberikan manfaat besar dalam hal kejelasan struktur, keamanan kode, dan efisiensi pengembangan. Di React, TypeScript memperkuat penggunaan props, state, dan hooks. Sementara di Vue 3, integrasi dengan Composition API menjadikan manajemen data lebih kuat dan terstruktur. Dengan memanfaatkan fitur ini secara optimal, developer dapat membangun aplikasi frontend modern yang scalable, maintainable, dan bebas error.