TypeScript

yybb717
243 阅读3分钟

什么是TypeScript

  1. TypeScript = JS + : 类型
  • 类型不止JS的那七种类型
  • 还可以有类（也就是构造函数，对象类型再细分）
  • 还可以有我们自己声明的类
  1. 类型也就是编译时的类型，会根据他检查JS代码
  2. 在安装TypeScript库时，会安装一个工具TypeScript Compile（TSC），TSC会把TS代码编译成JS代码，期间会根据我们写的编译时类型对代码进行检查
  • 检查发现没有错误就会进行一些操作，比如删掉编译时的类型等，然后TS代码就会变成JS代码
  • 检查发现有错，那就属于编译时报错，我们需要根据提示修改代码，事实上就算编译时报错了也会得到JS代码
  1. 注意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运行时类型大多数情况不用写（但是括号不能省），有编译时类型就行了。

这就要求在TS代码必须写的特别严谨，必须充分考虑到所有编译时类型，不然会有编译时报错！

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>

语法

声明组件在@Component里

声明一个类

type Tag = {
  id: string;
  name: string;
}
type TagListModel = {
  data: Tag[];
  fetch: () => Tag[];
  create: (name: string) => 'success' | 'duplicated'; // 联合类型
  save: () => void;  //void啥也不返回
  xxx？：string  //问号表示可以不存在
}

hashTable的TS编译时类型为一个对象

const hashTable: {[key:string]: string} = {}
  1. createAt？： Date 问好表示可以不存在

watch

@Watch('xxx')
onXxxChange(new,old){}
  1. const xxx as String 强制声明xxx是String

Props

 @Prop({default:''}) value!: string; 
 @Prop({required: true,type: Array}) fieldName!: string;  
 @Prop() placeholder?: string;
  • {default:''}表示默认值
  • {required: true}表示父组件使用本子组件时，必须给我这个外部数据一个值，不然就会报错。
  • ！表示我就不给你初始值
  • ?表示有可能不存在

计算属性：要写成getter

export default class xxx extends Vue {
    get count() {
        return this.$store.state.count
    }
}

mixins

要使用vue-class-component了

  1. 首先写mixins

在mixins.ts

import Vue from 'vue'
import {Component} from 'vue-property-decorator'; //Component还是用vue-property-decorator


@Component
export default class Hello extends Vue {
  hello = 'Hello'
}

@Component
export default class World extends Vue {
  world = 'World'
}

export {Hello,World}
  1. 然后在需要使用mixins的组件HelloWorld.vue里
import {Component} from 'vue-property-decorator'; //Component还是用vue-property-decorator
import {mixins} from 'vue-class-component'   //mixins得用vue-class-component

import { Hello, World } from './mixins'

// 不是继承Vue了，而是继承mixins(Hello, World)，因为mixins(Hello, World)已经继承Vue了
@Component
export default class HelloWorld extends mixins(Hello, World) {
  created () {
    console.log(this.hello + ' ' + this.world + '!') // -> Hello World!
  }
}
avatar
文章
阅读
粉丝