前言

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
      }
  }