TypeScript增強了使用類型安全性和改進工具的VUE 3項目，尤其是在使用組成API時。要使用Typescript設置VUE 3，請使用Vite或Vue CLI，安裝所需的軟件包，創(chuàng)建tsconfig.json文件，然後將.js文件命名為.ts。使用組合物API時，用DefineProps定義Prop和發(fā)射，並為更好的類型控制。使用REF並與顯性類型進行反應性，以確保正確的數(shù)據(jù)處理，並在破壞反應物體以保持反應性時應用TOREF。生命週期掛鉤不需要額外的鍵入，但是應註釋自定義功能以清晰和重複使用，以確?？缃M件的穩(wěn)健和可維護的代碼。

Typescript為VUE 3項目帶來了類型的安全性和更好的工具，尤其是在使用構圖API時。為了充分利用它，您需要正確設置內(nèi)容並遵循一些關鍵實踐。

用打字稿設置VUE 3

最簡單的開始方法是使用VITE或VUE CLI。如果您使用的是VITE，只需在設置過程中選擇VUE打字條選項即可。這為您提供了一個工作的項目結構。

如果您將打字稿添加到現(xiàn)有VUE項目中，請安裝必要的軟件包：

• typescript
• ts-loader （如果使用WebPack）
• @vitejs/plugin-vue和@vitejs/plugin-vue-jsx
• 可選， @types/vue用於更好的類型定義

然後在您的根目錄中創(chuàng)建一個tsconfig.json文件。基本配置可能看起來像這樣：

 {
  “ compileroptions”：{
    “目標”：“ esnext”，
    “模塊”：“ esnext”，
    “ Moduleresolution”：“ Node”，
    “嚴格”：是的，
    “ JSX”：false，
    “ sourcemap”：是的，
    “ resolvejsonmodule”：是的，
    “ eSmoduleInterop”：true，
    “ lib”：[“ esnext”，“ dom”]，
    “ Outdir”：“ ./dist”
  }，，
  “包括”：[。
}

另外，請確保將.js文件重命名為.ts ，然後更新任何使用<script lang="ts"> VUE組件。

將打字稿與構圖API一起使用

使用構圖API編寫組件時，通常會使用typecript使用<script setup> 。這允許使用乾淨的語法，同時仍然獲得類型的所有好處。

例如，這是您定義道具的方式：

 <腳本設置lang =“ ts”>
接口書{
  標題：字符串
  作者：字符串
  頁面？ ：號碼
}

const props = defineprops <book>（）
</script>

這樣可以確保在使用此組件的任何地方，都必須接收正確的數(shù)據(jù)形狀。它還改善了IDE支持 - 您在編碼時會獲得自動完成和內(nèi)聯(lián)錯誤。

您還可以用defineEmits定義排放，這使事件處理更具可預測性：

 const emit = defineemits <{{
  （e：&#39;update&#39;，value：string）：void
}>（）

這有助於避免錯別字，並使您的活動更易於跨較大的應用程序管理。

使用反應性狀態(tài)和裁判

當使用ref或reactive時，Typescript可以在許多情況下自動推斷類型。但是有時您需要明確。

例如：

 const count = ref <數(shù)字>（0）

這告訴TypeScript， count.value應該始終是一個數(shù)字。

使用reactive ，您可以預先定義接口或類型：

接口用戶{
  名稱：字符串
  年齡：數(shù)字
}

const user =反應性<user>（{{
  名稱：“愛麗絲”，
  年齡：25
}））

這使得早期捕獲錯誤變得更容易 - 例如嘗試將字符串分配給user.age 。

要注意的一件事：破壞反應物體時，除非使用toRefs ，否則您可能會失去反應性。因此，而不是：

 const {name} =用戶//失去反應性

使用：

 const {name} = torefs（用戶）

這使反應性保持完整，同時仍使您可以訪問各個屬性。

處理設置和生命週期類型

Vue 3的生命週期掛鉤是組成API中導入的功能，因此鍵入它們很簡單。

例如：

從'vue'導入{onMounted}

on mounted（（）=> {
  console.log（'組件已安裝'）
}））

無需額外的鍵入 - 功能簽名已經(jīng)包括預期參數(shù)。

但是，如果您正在編寫期望特定類型的自定義邏輯，那麼註釋這些類型是很好的做法：

函數(shù)fetchdata（callback ：（ data：string []）=> void）{
  //獲取並致電回調(diào)
}

這使您的功能更易於跨組件理解和重複使用。

使用構圖API將打字稿集成到VUE 3項目中幾乎是如此。它不是過於復雜的，但是有足夠的小細節(jié)需要注意，尤其是在道具，狀態(tài)和設置周圍。

以上是如何將打字稿有效地集成到VUE 3項目中，尤其是與組成API？的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！