Home  >  Vue Js

Vue.js dan TypeScript: Memulai dengan Pemrograman Tipe Statis di Vue

Vue.js dikenal karena kesederhanaannya dan kemudahan untuk membuat UI yang interaktif. Tapi ketika proyek mulai tumbuh—fitur bertambah, tim bertambah—kode yang tadinya sederhana bisa berubah jadi tumpukan teka-teki. Apalagi jika kamu masih menggunakan JavaScript biasa. Kenapa? Karena JavaScript tidak punya sistem tipe statis (Static Typing) secara default. Artinya, kamu bisa membuat banyak kesalahan tanpa disadari, dan itu baru ketahuan saat aplikasi sudah berjalan.

Masuklah TypeScript, sebuah superset dari JavaScript yang menambahkan tipe statis dan kemampuan pengecekan error saat proses compile. Dan kabar baiknya: Vue 3 telah mendukung TypeScript dengan sangat baik, bahkan menyediakan fitur script setup khusus untuk membuat integrasi TypeScript makin mulus.

Artikel ini akan membimbingmu dari dasar penggunaan TypeScript di proyek Vue, lengkap dengan contoh kode, hingga beberapa praktik terbaik agar kamu tidak sekadar “memakai”, tapi juga memahami why dan how di baliknya.

Kenapa Harus TypeScript di Vue?

Sebelum masuk ke teknis, kita bahas dulu alasan mendasarnya. TypeScript bukan tentang menambah beban atau membuat kode lebih ribet—sebaliknya, tujuannya adalah membuat kode:

  • Lebih eksplisit: Kamu tahu variabel apa yang sedang digunakan, dan editor pun bisa memberimu petunjuk.
  • Lebih aman: TypeScript menangkap kesalahan sejak dini—bahkan sebelum kamu membuka browser.
  • Lebih terstruktur: TypeScript membantu memodelkan data dan kontrak antar komponen dengan jelas.
  • Lebih enak buat kolaborasi: Saat kamu kerja tim, gak perlu tebak-tebakan isi fungsi atau bentuk objek, semuanya terdokumentasi lewat tipe.

Contoh sederhana, bandingkan ini:

function tambah(a, b) {
  return a + b
}

Dengan ini:

function tambah(a: number, b: number): number {
  return a + b
}

Kode kedua langsung memberikan jaminan bahwa a dan b harus angka, dan hasilnya pun angka. Tidak akan ada kejutan seperti tambah("1", 2) menghasilkan "12".

Setup Proyek Vue dengan TypeScript

Untuk memulai proyek Vue dengan dukungan TypeScript sejak awal, kamu bisa pakai:

npm init vite@latest my-vue-ts-app --template vue-ts

Atau, kalau kamu pakai Vue CLI:

vue create my-vue-ts-app
# Pilih "Manually select features" dan aktifkan TypeScript

Kamu akan mendapatkan file seperti main.ts, shims-vue.d.ts, dan .vue file yang bisa langsung pakai <script lang="ts">.

Komponen Vue Dasar dengan TypeScript

<script lang="ts" setup>
import { ref } from 'vue'

const name = ref<string>('Vue Dev')
const age = ref<number>(30)

function greet(): string {
  return `Hello, ${name.value}. You are ${age.value} years old.`
}
</script>

<template>
  <div>
    <p>{{ greet() }}</p>
  </div>
</template>

Hal yang perlu diperhatikan:

  • ref<string> menunjukkan bahwa nilai awal adalah string, dan editor akan membantumu dengan autocomplete.
  • greet() punya return type string, membuat maksud fungsi ini lebih jelas dan menjaga dari kesalahan penulisan.

Mengetik Props dan Emits (Komunikasi antar Komponen)

Kamu bisa mengetikkan props dan event menggunakan defineProps dan defineEmits:

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps<{
  username: string
  score?: number
}>()

const emit = defineEmits<{
  (e: 'submit', value: string): void
}>()

function handleSubmit() {
  emit('submit', props.username)
}
</script>

<template>
  <div>
    <p>Hi, {{ props.username }}!</p>
    <button @click="handleSubmit">Submit</button>
  </div>
</template>

Keuntungan mengetik props dan emit:

  • Kamu tahu persis tipe data yang diharapkan komponen.
  • Editor akan memperingati jika props belum diberikan, atau jika kamu memanggil event dengan parameter yang salah.

Interaksi dengan API dan Data Asinkron

Saat bekerja dengan data eksternal (API), TypeScript membantu dengan interface:

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

interface Post {
  id: number
  title: string
  body: string
}

const posts = ref<Post[]>([])

onMounted(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data: Post[] = await res.json()
  posts.value = data
})
</script>

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Kalau API mengubah struktur data, TypeScript langsung memberikan warning. Ini membuat integrasi API jauh lebih aman.

Membuat Composables Bertipe

Composables adalah fungsi reaktif yang bisa dipakai ulang. Contoh:

// useToggle.ts
import { ref } from 'vue'

export function useToggle(initial: boolean = false) {
  const state = ref<boolean>(initial)

  function toggle() {
    state.value = !state.value
  }

  return {
    state,
    toggle
  }
}

Gunakan dalam komponen:

<script lang="ts" setup>
import { useToggle } from './useToggle'

const { state, toggle } = useToggle()
</script>

<template>
  <div>
    <p>Status: {{ state ? 'ON' : 'OFF' }}</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

Tips dan Praktik Baik

  • Gunakan interface atau type untuk memodelkan data dari API.
  • Hindari any kecuali benar-benar tidak bisa ditentukan.
  • Pisahkan file tipe data ke dalam folder seperti types/ untuk organisasi yang lebih rapi.
  • Gunakan defineExpose untuk mengetikkan variabel yang diekspor dari komponen.

Integrasi TypeScript ke dalam proyek Vue bukan sekadar soal mengikuti tren. Ini tentang membuat kode yang tahan lama, mudah dipelihara, dan lebih terpercaya. Dengan bantuan tooling modern, kamu bisa menghindari banyak jebakan klasik JavaScript, dan membangun aplikasi dengan pondasi yang kuat.

Awalnya mungkin akan terasa “kaku”, tapi setelah terbiasa, kamu akan merasa kehilangan kalau harus kembali ke JavaScript biasa. TypeScript di Vue bukan hanya soal teknis, tapi juga soal mindset: kamu tidak hanya menulis kode yang “jalan”, tapi kode yang benar dari awal.

Selamat membangun aplikasi Vue yang lebih kokoh dan pintar!

Categories:Vue Js

Tags:

Related Posts