### 一、Vue3.x集成Typescript **Ts基礎教程**：[https://www.itying.com/goods-905.html](https://www.itying.com/goods-905.html) ~~~ # 1. Install Vue CLI, if it's not already installed npm install --global @vue/cli # 2. Create a new project, then choose the "Manually select features" option vue create my-project-name # If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin: vue add typescript ~~~    ### 二、Vue3.x集成Typescript后定義組件 vue3.x中集成ts后請確保組件的 `script` 部分已將語言設置為 TypeScript ~~~ <script lang="ts"> ... </script> ~~~ 要讓 TypeScript 正確推斷 Vue 組件選項中的類型，需要使用 `defineComponent` 全局方法定義組件 ~~~ import { defineComponent } from 'vue' const Component = defineComponent({ // 已啟用類型推斷 }) ~~~ #### **1、定義一個基于ts的Home組件** ~~~ <template> <div> home組件 <br> {{book.title}} <br> {{book.author}} <br> {{book.year}} <br> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App', data() { return { book: { title: 'Vue 3 Guide', author: 'Vue Team', year: 2020 } } } }); </script> <style> </style> ~~~ #### 2、定義一個接口約束Home組件中data的數據類型 ~~~ <template> <div> home組件 <br /> {{ book.title }} <br /> {{ book.author }} <br /> {{ book.year }} <br /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; interface Book { title: string author: string year: number } var book: Book = { title: 'Vue 3 Guide', author: 'Vue Team', year: 2020 } export default defineComponent({ name: 'App', data() { return { book } } }); </script> <style> </style> ~~~ #### **3、方法、計算屬性中約束數據類型** ~~~ <template> <div> home組件 <br /> <br /> {{ book.title }} <br /> <br /> {{ book.author }} <br /> <br /> {{ book.year }} <br /> <br /> <button @click="setTitle()">設置數據</button> <br /> <br /> {{greeting}} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; interface Book { title: string author: string year: number } var book: Book = { title: 'Vue 3 Guide', author: 'Vue Team', year: 2020 } export default defineComponent({ name: 'App', data() { return { book } }, methods: { setTitle(): void { this.book.title = "你好vue3.0" } }, computed: { // 需要注釋 greeting(): string { return this.book.title + '!' } } }); </script> <style> </style> ~~~ ### 三、Vue3.x集成Typescript與組合式 API 一起使用 ~~~ <template> <div> home組件 </div> </template> <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; interface Book { title: string year ? : number } export default defineComponent({ name: 'App', setup() { const year1 = ref < string | number > ('2020'); const book1 = reactive < Book > ({ title: 'Vue 3 Guide' }) // or const book2: Book = reactive({ title: 'Vue 3 Guide' }) // or const book3 = reactive({ title: 'Vue 3 Guide' }) as Book return { year1, book1, book2, book3 } } }); </script> <style> </style> ~~~