TypeScript 是JS的一個超集，主要提供了型別系統和對ES6的支援，使用 TypeScript 可以增加程式碼的可讀性和可維護性，在 react 和 vue 社群中也越來越多人開始使用TypeScript。從最近釋出的 Vue3 正式版本來看， Vue3 的原始碼就是用 TypeScript 編寫的，更好TypeScript 支援也是這一次升級的亮點。當然，在實際開發中如何正確擁抱 TypeScript 也是遷移至 Vue3 的一個小痛點，這裡就針對 Vue3 和 TypeScript 展開一些交流。

96。8%的程式碼都是TypeScript，支援的力度也是相當大

專案搭建

在官方倉庫的 Quickstart 中推薦用兩種方式方式來構建我們的 SPA 專案：

vite

npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3

vue-cli

npm install -g @vue/cli # OR yarn global add @vue/cli vue create sail-vue3 # select vue 3 preset

vite 是一個由原生ESM驅動的Web開發構建工具，開啟 vite 依賴的 package。json 可以發現在 devDependencies 開發依賴裡面已經引入了TypeScript ，甚至還有 vuex ， vue-router ， less ， sass 這些本地開發經常需要用到的工具。vite 輕量，開箱即用的特點，滿足了大部分開發場景的需求，作為快速啟動本地 Vue 專案來說，這是一個非常完美的工具。

後面的演示程式碼也是用vite搭的

從 vue2。x 走過來的掘友肯定知道 vue-cli 這個官方腳手架， vue3 的更新怎麼能少得了 vue-cli 呢， vue-cli 更強調的是用 cli 的方式進行互動式的配置，選擇起來更加靈活可控。豐富的官方外掛適配，GUI的建立管理介面，標準化開發流程，這些都是 vue-cli 的特點。

vue-cli TypeScript STEP1

vue-cli TypeScript STEP2

想要預裝TypeScript，就需要選擇手動配置，並check好TypeScript

忘記使用選擇 TypeScript 也沒事，加一行cli命令就行了

vue add typescript

最後，別忘了在 。vue 程式碼中，給 script 標籤加上