記一次TypeScript+vue的小坑

在vue3支持TS之後，大多數多開始使用ts來進行開發了，只不過在vue使用ts的時候，很多小坑是很令人難受的。

vue+ts的項目創建

現在的vue-cli3是支持ts項目的直接創建，很多都不用特別去配置，創建一個ts項目非常方便和快捷。

1.使用vue create my-demo直接創建一個項目。
2.選擇配置項可以選擇最後一個自定義，主要的是這一步，需要勾選上TypeScript這個選項
3.之後的配置項就按照自己的配置來吧，到這裏基本創建完一個ts+vue項目了。

vue+ts的簡單運用

1. 創建完成之後的項目結構應該是這樣的：

2. 其中src下的目錄結構應該是這樣的：

具體就不必細說每個目錄的作用的，可以看到，裏面多了兩個ts文件shims-tsx.d.ts 和shims-vue.d.ts，第一個顧名思義就是支持解析tsx文件，第二個主要是解析vue文件，因爲ts是不支持vue的所以這裏需要這個文件來告訴ts“當前是vue文件，請移交給vue來處理”。

3. 在實際的頁面中，可以創建一個home.vue是嘗試使用：

<template>
  <div class="home">
    <p>{{test}}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Home extends Vue {
  test: string = 'hello'
  created() {
    this.test = 'world'
  }
  changeTest () {
    this.test = 'hello world'
  }
}
</script>

可以看到，大體上和原來的js區別不大，其中不需要再使用data來存放變量了，可以直接定義或者在constructor構造函數中定義。不過請注意，在聲明script標籤的時候不要忘記加上lang="ts"這個標識。
其次在組件中，請務必聲明@Component這個標識，否則會有各種問題出現（這是個大坑）。
具體其他的vue生命週期什麼的，使用上沒有太大的變化。