TypeScript

什么是TypeScript

1. TypeScript = JS + : 类型

• 类型不止JS的那七种类型
• 还可以有类（也就是构造函数，对象类型再细分）
• 还可以有我们自己声明的类

2. 类型也就是编译时的类型，会根据他检查JS代码
3. 在安装TypeScript库时，会安装一个工具TypeScript Compile（TSC），TSC会把TS代码编译成JS代码，期间会根据我们写的编译时类型对代码进行检查

• 检查发现没有错误就会进行一些操作，比如删掉编译时的类型等，然后TS代码就会变成JS代码
• 检查发现有错，那就属于编译时报错，我们需要根据提示修改代码，事实上就算编译时报错了也会得到JS代码

4. 注意ts只在<script lang="ts"></script>里！<template>标签里的是js
   

使用方法

1.从vue-property-decorator导入需要用的装饰器Component、Prop等

• 为什么从vue-property-decorator库导入？因为vue-class-component 是Vue官方提供的TypeScript支持库，但是不如vue-property-decorator库好用
  
• @开头的叫装饰器decorators
  

2.使用装饰器Component

作用是告诉TypeScript，下面是个Vue组件，里面这些直接写的语句会自动被处理为对应的构造选项data、methods、生命周期钩子等

3.其他的构造选项需要装饰器的帮助

//比如构造选项props
  @Prop(Number)  xxx: number | undefined
  
  //@Prop：使用Prop装饰器告诉Vue，XXX是prop不是data
  //Number：告诉Vue XXX在运行时类型是Number（也就是JS里是个Number） 
  //XXX属性名
  //number | undefined ：告诉TS XXX 的编译时类型是number或undefined（也就是TS里是个number或undefined）

注意：Number运行时类型大多数情况不用写（但是括号不能省），有编译时类型就行了。

使用TypeScript 的好处

• 类型提示：更智能的提示
• 编译时报错：还没运行代码就知道自己写错了
• 类型检查：无法点出错误的属性
  

写 Vue 组件的三种方式（单文件组件）

一、用 JS 对象（其次）

 export default { data, props, methods, created, ...}

二、用 TS 类 （优先）

• xxx是本组件的名字
• TS只有在

<script lang="ts">
   import Vue from 'Vue'
   import {Component, Prop} from 'vue-property-decorator';  //从vue-property-decorator导入装饰器Component、Prop

   @Component  //使用装饰器Component，作用是告诉TypeScript，下面是个Vue组件，里面这些语句等会自动被处理为对应的构造选项data、methods、生命周期钩子
   export default class XXX extends Vue{
       xxx: string = 'hi';
       @Prop(Number) xxx: number|undefined;
   }
<script>

三、用 JS 类

 <script lang="js">
   @Component
   export default class XXX extends Vue{
       xxx = 'hi'
   }
 <script>