TypeScript学习笔记

一. TS的基本格式

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
//import Component from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  // Declared as component data
  message: string = 'Hello World!'
  //注意string前面有个空格！！！！！！
}
</script>

这就是ts组件的基本格式，需引入vue-class-component这样的一个库来修饰TS组件，具体用法可以看链接文档，vue-property-decorator是官方vue-class-component的一个优化

<script lang="js">
import Vue from 'vue'
import Component from 'vue-class-component'
//import Component from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  // Declared as component data
  message = 'Hello World!'
  //这是js类的写法，可以不注明类型
}
</script>

二. TS内部

1. Props

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  //如果外部变量未赋值则用default赋值，！表示忽略未定义初始值
  @Prop({required: true}) fileName!: string;
  //必须传入一个值  
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

@Prop(Number) readonly propA: number | undefined

@Prop告知Vue这是个prop属性而不是data
Number告知Vue这是个Number(运行时类型判断)
propA属性名
number|undefined (编译时类型判断)

$\color{ #ff0000}{注:}$ 如果在TS编译成JS阶段出错，但是编译还是会成功只是会报错，此时是根据4中的类型进行判断

{
  "compilerOptions": {
    "noEmitOnError": true,
    //可以在tsconfig中配置成有错误编译不通过选项
}

如果在template中传入的propA不是一个number则不会再编译时报错，而是在运行时报错因为template中的部分是作为JS直接传入Vue的

将一个外部数据propA申明类型这种写法与下面这种等价

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    }
  }
}

2. 强制指定类型

setContent(event: MouseEvent){
      const button=(event.target as HTMLButtonElement);
      this.output+=button.textContent;
    }
   // const input=button.textContent!
   //或者加感叹号则排除null和undefined类型情况

如果你在使用event对象的时候，要考虑点击对象是否存在内容以及target，那么你可以强制指定event.target为button这样button是必有内容和对象的就不用为undefined写if逻辑

3. component

@Component({components:
      {Tags, Notes, Types, NumberPad}}
      )

将原来Vue构造选项中的组件部分写入@Component()

4. Watch

import {Component,Watch} from 'vue-property-decorator';
export default class Notes extends Vue {
 @Watch('value')
      onValueChanged(val: string ,oldVal: string){
       this.$emit('update:value',val)
      }
     }

@Watch()你需要监听的对象然后后面跟一个函数，函数的第一个参数为新的值，第二个参数为旧值，比如我可以在函数中触发一个事件，然后将新值传入供外部监听

5. 申明一个类型

如果你想申明一个复杂类型的对象同时定义其内部属性的数据类型，那么可以提前将对象类型申明

<script lang="ts">
type Record = {
    tags?: string[];
    notes: string;
    type: string;
    amount: number;
  }
export default class fileName extends Vue {
    record: Record={tags: [],notes: '',type: '',amount: 0}
}
</script>
提前申明一个对象的类型，然后新建一个data对象，将它的类型定义为Record同时给其内部值赋一个初始值,"?"可以表示此属性可有可无，即可省略初始赋值

6. 在ts中导入js

export default model
//使用default导出在使用require时要加.default
require('@/model.js').default;

export {model}
//相对的直接导出model对象时后缀加.model
require('@/model.js').model;
//或者
const {model}=require('@/model.js')

7. 全局声明类型

new file:custom.d.ts
//d.ts结尾的文件会被理解成全局数据类型，这样不用引用也可以使用此类型

8. 联合数据类型

dataname: 'string1'|'string2'|....
//类型枚举法，将每个可能的值列举出来