记一次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生命周期什么的，使用上没有太大的变化。