在現代前端開發中，Vue 3 和 TypeScript 的結合成為了許多開發者的首選。這是因為 TypeScript 提供了靜態類型檢查功能，讓程式碼更具可讀性和可維護性，並能及早捕捉錯誤，提升開發效率。以下將介紹如何在 Vue 3 中使用 TypeScript。

為何在 Vue 3 中使用 TypeScript

Vue 本身是一個 JavaScript 框架，而 TypeScript 是 JavaScript 的超集，它提供了強大的靜態類型檢查和一些面向對象的特性，這對於大型應用開發尤其有幫助。TypeScript 可以幫助開發者在編譯時捕捉錯誤，這樣在應用運行時就能避免很多潛在的問題。此外，強類型的支持讓團隊開發更為順暢，能夠明確知道每個變量、函數和組件的用途和類型。

在 Vue 3 中，官方團隊從框架層級上提供了對 TypeScript 的支持，這意味著 Vue 3 天然適配 TypeScript，可以享受到它帶來的好處。

在 Vue 3 中使用 TypeScript 的基本配置

要在 Vue 3 中使用 TypeScript，首先需要進行一些基本配置。

1.安裝 Vue 3 和 TypeScript 使用 Vue CLI 或 Vite 可以非常方便地配置 Vue 3 和 TypeScript 的開發環境。使用 Vue CLI 時，只需在創建項目時選擇 TypeScript 選項：

vue create my-vue-app

接著在選項中選擇 TypeScript，CLI 將會自動配置相關依賴和設定。如果你使用的是 Vite，則可以運行以下命令來創建 Vue 3 + TypeScript 的項目：

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

這會生成一個基於 TypeScript 的 Vue 3 項目。

2.tsconfig.json 配置 在項目根目錄下會有一個 tsconfig.json 文件，這個文件是 TypeScript 的配置文件，用來指定 TypeScript 編譯器如何處理你的代碼。典型的配置如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

裡最關鍵的是 include 和 exclude，它們告訴 TypeScript 編譯器哪些文件需要被處理。

在 Vue 3 組件中使用 TypeScript

在 Vue 3 中，我們可以非常輕鬆地在 .vue 單文件組件（SFC, Single File Component）中使用 TypeScript。Vue 3 的組件包括三個部分：、 和 。在使用 TypeScript 時，我們只需要將 標籤加上 lang="ts" 即可。
範例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      message: 'Hello, TypeScript!'
    };
  }
});
</script>

<style>
p {
  color: blue;
}
</style>

這樣，我們的 Vue 組件就能正確地支持 TypeScript。

使用 TypeScript 的高級特性

在 Vue 3 中使用 TypeScript，不僅僅是給變量添加類型，還可以利用它的許多高級特性來優化應用的架構。
1.組件中的 Props 和 Emit 在 Vue 組件中，Props 是一個非常重要的機制，負責組件間的數據傳遞。在使用 TypeScript 時，我們可以對 Props 的類型進行嚴格定義。

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

export default defineComponent({
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    console.log(props.count);
  }
});
</script>

這裡，我們定義了一個 count 的 Props，並將其類型明確指定為 Number。

2.使用泛型 TypeScript 的泛型讓我們能夠在函數或類中使用更加靈活的類型。在 Vue 組件中，我們可以結合泛型來實現更強大的功能。

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("Hello");

結合 Vue 3 Composition API 和 TypeScript

Vue 3 引入了 Composition API，使得我們可以更靈活地組織邏輯代碼。在與 TypeScript 結合時，Composition API 提供了更強的類型推導和代碼靈活性。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);

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

    return {
      count,
      increment
    };
  }
};

在這裡，我們使用了 TypeScript 的 ref 來明確指定 count 是一個數字類型，這樣可以避免後續的類型錯誤。

結論

TypeScript 與 Vue 3 的結合不僅提升了代碼的可讀性與維護性，還能幫助開發者及早發現潛在的問題。通過合理使用 TypeScript，我們可以讓 Vue 項目在複雜性增加的同時依然保持良好的開發體驗和高效的開發流程。無論是初學者還是經驗豐富的開發者，都能從中獲得更好的開發效果。

範例：