vue源码阅读 -- Typescript写法

前言

vue源码看了有一段时间了,由于偷懒,一直没有做记录,今天重看,发现很多知识点有些遗忘,果然懒还是不能偷的...

vue源码中用了Typescript的写法,当初看的时候,一脸懵,这里先大致记录下Typescript的基础写法.

笔记记录出处 阮一峰老师

原始数据类型

定义好是什么类型的数据后,不可以改变数据类型,否则会报错.

• 布尔值

  let isDone: boolean = false
  

• 数值

  let mynum: number = 6
  let mynum2: number = NaN
  let mynum3: number = Infinity
  

• 字符串

  let myname: string = 'siva'
  

• 空值

  js中没有空值(void)的概念,在Typescript中,可以用void表示没有返回值的函数

  function test():void{
      console.log('siva')
  }
  

• Null&Undefined

  let u: undefined = undefined;
  let n: null = null
  

任意值Any

任意值用来表示允许赋值为任意类型.

• 任意值类型

  let myNumber: string = 'siva'
  //定义myNumber为字符串类型
  
  myNumber = 7 
  //改变myNumber为数字
  //报错,不可以改变字符串类型
  

  let myNumber : any = 'siva';
  myNumber = 7
  //定义为any,则可以改变类型.
  

• 任意值的属性和方法

  //在任意值上访问任何属性都是允许的;
  let myany: any = 'siva';
  console.log(myany.name)
  console.log(myany.name.firstname);
  
  //同时也允许调用任何方法
  //都可以正常编译
  myany.sayname('ssss')
  myany.sayname('ssss').saysomething()
  

• 声明一个变量为任意值后,对他的任何操作,返回的内容类型都是任意值.

• 未声明类型的变量

  如果在声明变量的时候,未指定类型,那么默认为任意值类型

类型推论

如果没有明确指定类型,那么Typescript会按照类型推论推测出一个类型.

• 例子

  let name = 'siva';
  name = 7 //报错,因为ts会认为name是String类型.
  
  let age; //未声明类型,则默认是any
  age = 'siva';
  age = 7 //正常编译
  

联合类型

联合类型表示可以取多种类型中的一种,类似我们平时的或

• 例子

  let  nameAge : number | string;
  nameAge = 7; //编译正常
  nameAge = 'siva' //编译正常
  nameAge = true //编译错误
  

• 访问属性

  当TS不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问联合类型的共同属性.

  let nameAge : number | string;
  console.log(nameAge.toString) //正常编译
  console.log(nameAge.length) //编译错误
  //number没有length属性,所以不是共同属性;
  

  联合类型的变量在被赋值的时候,会根据类型推论推断出一个类型.

  let nameAge : number | string;
  nameAge = 'siva'
  //推断为string
  console.log(nameAge.length) //4
  nameAge = 7
  //推断为number
  console.log(nameAge.length) //编译错误
  

对象类型 -- 接口

在TS中,我们使用接口(Interfaces)来定义对象的类型.

变量的形式必须和接口的形式保持一致,不可以增加,也不可以减少

• 例子

  //定义了一个接口Person
  iterface Person{
      name: string;
      age:number;
  }
  //定义一个变量,类型是Person
  let siva : Person = {
      name:'siva',
      age:24
  } //正确编译
  
  let alex : Person = {
      name:'alex'
  }
  //编译错误,不允许变量比接口减少属性.
  
  let lara : Person = {
      name:'lara',
      hobby:'sing'
  }
  //编译错误,不允许变量比接口增加属性.
  

• 可选属性

  iterface Person{
      name: string;
      age?:number;
  }
  let alex : Person = {
      name:'alex'
  }//正确编译,但是仍然不允许增加属性.
  

• 任意属性

  interface Person{
      name:string;
      age?: number;
      [prop: string] : any
  }
   let lara : Person = {
      name:'lara',
      hobby:'sing'
  }
  

  一旦定义了任意属性,那么确定属性和可选属性,都必须是它的自属性.

  inerface Person{
      name:string;
      age?: number;
      [prop: string] : string
  }
  let lara : Person = {
      name:'lara',
      age:7,
      hobby:'sing'
  }
  //编译错误;
  //任意属性的值为string,可选属性的值是number
  //number不是string的子属性,所以报错
  

• 只读属性

有时候我们希望对象中一些字段智能在创建的时候被赋值,可以用readonly定义只读属性.

只读属性存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候.

    interface Person{
        readonly id: number;
        name: string;
        age?: number;
        [prop:string] : any;
    }
    let siva : Person={
        id:222,
        name:siva,
        age:7,
        hobby:'sing'
    }
    siva.id  = 2333;
    //编译错误;因为id是只读属性.
    let alex : Person={
        name:alex,
        age:7
    }
    siva.id  = 3333;
    //编译错误 只读属性值只存在于第一次给对象赋值的时候

数组类型

数组类型的定义方式有多种

• [类型 + 方括号]

  let numArr : number[] = [1,2,3,4,5]
  //正常编译
  

   let numArr : number[] = [1,'2',3,4,5]
   //编译错误,不允许有定义类型之外的类型数据
   let numArr2 :number[] = [1,2,3]
   numArr2.push('4')
   //编译错误
  

• 数组泛型Array<elemType>

  let myarr : Array<number> = [1,2,3]
  

• 用接口表示

  interface NumArr{
      [index: number] : number;
  }
  let myarr : NumArr = [1,2,3,4,5]
  

函数类型

• 函数声明

  //参数类型是number,返回值类型也是number
  function add(x: number,y: number) : number {
      return x+y
  }
  add(1,2,3) //编译错误,参数增加了
  add(1) //编译错误,参数减少了
  

• 函数表达式

  let add: (x: number,y: number) => number = function(x: number,y: number) : number {
      return x+y
  }
  

• 可选参数(必须写在必需参数后面)

  function add(x: string,y?: string) : string {
      if(y){return x+y}
       else{return x}
  }
  

• 参数默认值

  TS会将添加默认值的参数识别为可选参数,但是位置可以随意,不受限制.

  function add(x: string,y: string = 'siva') : string {
      return x + ' ' + y
  }
  add('hello')  //hello siva
  add('hello','alex') //hello alex
  

• 剩余参数

  //ES6写法,items只能是最后一个参数.
  function push(arr: any[],...items: any[]){
      items.forEach(function(item){
          arr.push(item) //[1,2,3]
      })
  }
  let a : any[] = [];
  push(a,1,2,3)
  

• 重载

当多个函数定义有包含关系的时候们需要优先把精确的定义写在前面.

    function reverse(x: number): number;
    function reverse(x: string): string;
    function reverse(x: number | string): number | string {
      if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
      } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
      }
    }

类型断言

• 语法

  <类型>值
  
  或
  
  值 as 类型
  

• 例子

  //错误实例
  function test(a: number | string) : number{
      if(a.length){return a.length;}
      else{return a.toString().length}
  }
  

  上例中,由于联合类型只能访问联合类型中所有类型的共有属性,number没有length属性,所以最终会编译错误.
  那当我们不确定属性的时候,怎么访问其中一个类型的属性?

  function test(a: number| string) : number {
      if((<string>a).length){
          return (<string>a).length
      }else{
          return a.toString().length
      }
  }