出入typescript 筆記

wulinsheng123發表於2019-03-06
TypeScript筆記

typescript 的基本型別

1.number 數字型別 example:

   let val: Number = 2複製程式碼

2.string 字串 example:

   let val: String = '2'複製程式碼

3.Boolean 布林型別 example:

   let val: Boolean = false複製程式碼

4.array 陣列 example:

   let val: Array <Number> = [2,3] //只能數字
   leg val: number[] = [1,2,4,5] //陣列裡只能是全部數字
   
   // 類陣列有自己的定義方式
   let args: IArguments = arguments;複製程式碼

5.Boolean 元祖 example:

   let x = [String, Number]
   x = ['val', 2]
   // 按定義順序排序複製程式碼

6.enum 列舉 example:

   enum val {one = 3, two, three}
   let curVal: val = val.one
   console.log(curVal)  // curVal: 3

  let val : String | null | undefined = ''
  val = 2 
  // 建立變數可以多個變數屬性複製程式碼

注意：假設第一行程式碼宣告瞭變數 num 並=設定初始值為 2。 注意變數宣告沒有指定型別。因此，程式使用型別推斷來確定變數的資料型別，第一次賦值為 2，num 設定為 number 型別。

7.interface 介面 example:

   interface Person {
       name: string;
       age: number;
       [val: string]: any
       // 可以定義左邊可以設定是字串還是數字
   }
   
   let tom: Person = {
            name: 'Tom',
            age: 25
        };

   interface Person {
            readonly name: string; // 只能建立的時候被賦值
            age?: number; // 這個欄位可以沒有
    }
        
   let tom: Person = {
                 name: 'Tom',
    };

    // class類中介面的使用
    interface ClockInterface {
      currentTime: Date;
    }

    class Clock implements ClockInterface {
        currentTime: Date;
        constructor(h: number, m: number) { }
    }
複製程式碼

typescript 的函式使用方法

 // 傳入的引數也可以設定型別 
 function func(one: Number = 2, two?:string): Number {
    conosle.log(two) // 預設輸出undefined
    return one + two
 }
 func(1) // Nan 

 // 新增number就必須要有返回數字，不然會報錯。 如果不想返回就把number換成void
 
 //es6的解構用法
 function fun (...rest: Number[]):Number {
    return rest
 }
 
 // 函式裡的斷言<>val || <型別>值
 
 function getLength(something: string | number): number {
     if ((<string>something).length) { // 不確定這邊的值是number還是string. <string> 確定是string就可以獲取長度
         return (<string>something).length;
     } else {
         return something.toString().length;
     }
 }
 
 // 返回一個陣列
 
 function argArray(...something: Number[]): Array<number> {
          return something;
  }
  
  // 傳入一個 為定義的引數
  
  function argArray<T>(...something: Number[], value: T): asy{
            // value屬於為定義的屬性型別
            return something;
    }

    example: argArray(1,2,4,'str') 
    // value 會自動匹配成‘str’的型別複製程式碼

// ts的基本使用

 function Throttling(callback:()=> void, time:number):()=> void {
     let recording: number | undefined = undefined
     return function ():void {
        if(<undefined>recording)clearTimeout(recording)
         
        recording = setTimeout(() => {
            callback()
        },time)
     
    }

}複製程式碼

用ts寫了一個終結者模式

interface parameter {
    name: string;
    backCall?: () => {};
}
let observer = (function(){
    let obj = {}
    return {
        add(parameter): void {
            let val: Array<any> | undefined = obj[parameter.name]
            if(<Array<any>>val){
                val.push(parameter.backCall)
            }else{
                obj[parameter.name] = []
                obj[parameter.name].push(parameter.backCall)
            }
            // <Array<any>>val ? obj[parameter.name].push(parameter.backCall) : obj[parameter.name] = [], obj[parameter.name].push(parameter.backCall)
        },
        run(runComman:string): void{
            let val: Array<any> | undefined = obj[runComman]
            if(<Array<any>>val){
                for(let key of val){
                    key()
                }
            }

        }
    }
})()複製程式碼


相關文章