摘要

Vue 3 從底層就對 TypeScript 提供了第一流的支援。結合 TS 可以為我們的 Vue 專案帶來完整的類型檢查、更智慧的程式碼自動完成和更強的健壯性。

定義與說明

在 <script setup> 中使用 TypeScript 非常自然。我們可以為 ref、reactive、props 等提供明確的型別註記，TS 會在編譯階段就幫我們找出潛在的型別錯誤。

實作範例

TypeScript 與 Vue 3 整合

<script setup lang="ts"> // 標明使用 TypeScript
import { ref } from 'vue';

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

// 為 props 提供型別
const props = defineProps<{
  user: User
}>();

// 為 ref 提供型別
const count = ref<number>(0);
</script>

結論

雖然 Vue 可以不用 TypeScript，但對於任何中大型或需要長期維護的專案，整合 TypeScript 都是強烈推薦的最佳實踐。它能顯著提升程式碼品質和開發效率。

TypeScript 類型檢查程式碼品質