🧠 Integrasi TypeScript dengan Vue.js

TypeScript adalah superset dari JavaScript yang menyediakan static typing. Dengan TypeScript, kamu bisa menulis kode Vue yang lebih aman, terstruktur, dan lebih mudah di-refactor dalam proyek besar.

---

🚀 1. Buat Proyek Vue + TypeScript

a. Vue CLI

vue create my-vue-ts-app

Saat diminta preset, pilih: ➡️ Manually select features ➡️ Centang TypeScript

b. Vite (Vue 3 + TypeScript)

npm create vite@latest my-vue-ts-app -- --template vue-ts
cd my-vue-ts-app
npm install
npm run dev

---

📦 2. Struktur Dasar File TypeScript

src/
├── main.ts
├── components/
│   └── HelloWorld.vue
├── shims-vue.d.ts
tsconfig.json

File .vue tetap ditulis seperti biasa, tapi script menggunakan lang="ts".

---

✏️ 3. Komponen dengan TypeScript

Contoh: HelloUser.vue

<template>
  <p>Halo, {{ name }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloUser',
  props: {
    name: {
      type: String,
      required: true
    }
  }
});
</script>

---

🎯 4. Menggunakan Interface

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

export default defineComponent({
  data() {
    return {
      user: {} as User
    };
  }
});

---

📃 5. shims-vue.d.ts

Agar TypeScript mengenali file .vue, buat file src/shims-vue.d.ts:

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

---

🧪 6. Tools & Editor Support

• Gunakan VS Code untuk IntelliSense dan linting otomatis

• Aktifkan Volar (pengganti Vetur) untuk dukungan terbaik Vue 3 + TS

• Integrasikan dengan ESLint dan Prettier untuk format otomatis

---

🛠️ 7. Tips Best Practice

• Gunakan defineComponent() di semua file .vue

• Definisikan tipe untuk props, emits, dan refs

• Gunakan composables (dengan setup()) untuk pemanfaatan maksimal TypeScript

---

🌍 8. Integrasi Lanjutan

• Vuex + TS → Gunakan store modular dengan interface

• Pinia + TS → Dukungan TypeScript bawaan & lebih mudah

• Vue Router + TS → Tambahkan tipe ke param route & meta