Vue2使用TS基础

三种书写方式

1. export default{}传统方式
2. TS export default class Options extends Vue方式，需要@Component
3. JS export default class Options extends Vue方式

   基本格式

   ```javascript import Vue from ‘vue’; import {Component} from ‘vue-property-decorator’;

@Component //声明下方为vue组件，然后进行自动处理为传统的js export default{}形式 export default class Options extends Vue { type = ‘-‘;

selectType(type: string) { if (type !== ‘-‘ && type !== ‘+’) { throw new Error(‘type in options is error!’); } this.type = type; }

<a name="OsZVn"></a>
## 使用prop传递数据
```javascript
@Prop(Number) xxx: number | undefined;
// Prop告诉Vue 此数据为props而不是data
// 前面告诉Vue xxx为Number,后面告诉tsc为number | undefined
@Prop(Number) propA相当于js语法

举例:

import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
@Component //声明下方为vue组件，然后进行自动处理为传统的js export default{}形式
export default class Options extends Vue {
  type = '-';
  @Prop(Number) xxx: number | undefined;
  selectType(type: string) {
    if (type !== '-' && type !== '+') {
      throw new Error('type in options is error!');
    }
    this.type = type;
  }

优点

1. 提示：父组件传子组件时，子组件已经写好，父组件可以直接提示xxx
2. 编译报错：this.xxx.yyy会提示，1.xxx可能是undefined，2.xxx没有yyy这种方法
3. 类型检查：检查是否为对应的类型

   类型声明

   创建一个形如custom.d.ts的类型定义文件，可以做如下声明

   type TagListModel = {
    data: TagType[];
    get: () => TagType[];
    set: () => void;
    create: (name: string) => 'success' | 'duplicate';
    update: (id: string, name: string) => 'success' | 'duplicate' | 'notFound';
    remove: (id: string) => void;
   }