typescript總結筆記一

一、資料類型

• 1、

  boolean

  布爾值隻能是

  true

  或者

  false

  let isSave: boolean = true           

• 2、字元類型

  let name: string = '張三';           

• 3、數字類型

  let num1: number = 20;
  let num2: number = 12.3           

• 4、數組類型,有兩種表示方式

  let ary1: number[] = [1,2,3];
  let ary2: Array<number> = [1,2,3];           

• 5、元組(

  Tuple

  )表示一組已知數量及類型的

  let tup1:[string:number] = ['hello',20]           

• 6、枚舉類型

  enum Sex {'body','gril'};
  let sex1:Sex = Sex.body;
  console.log(sex1);           

• 7、空值常用于函數的傳回

  void

  function warnUser(): void {
      alert("This is my warning message");
  }           

• 8、任意類型

  any

  let ary: any[] = [1,'hello']           

• 9、自定義類型

  自己定義的類或者接口都可以給一個變量約定其資料類型

二、解構

• 1、數組的解構

  let input = [1, 2];
  let [first, second] = input;           

• 2、對象解構

  let o = {
      a: "foo",
      b: 12,
      c: "bar"
  };
  let { a, b } = o;           

• 3、對象解構

  var json = {
      'data':{
          'data1':{
              'data12':'張三'
          },
          'data2':'李四' 
      },
      'code':200,
      'info':{
          'message':'成功'
      }
  }
  let {data:{data1:{data12},data2},code,info:{message}} = json;
  console.log(`data12:${data12},data2:${data2},code:${code},message:${message}`);           

三、預設值

• 1、函數的預設值(必須放在參數的最後)

  function foo(a:number,b:number = 10):number{
      return a + b;
  }
  console.log(foo(1));           

四、可選參數

• 1、函數的可選參數(必須放在參數的最後)

  function bar(a:number,b?:number):number{
      return a + b;
  }
  console.log(bar(2));
  console.log(bar(2,5));           

五、展開

• 1、數組展開

  let ary1:number[] = [1,2,3];
  let ary2:number[] = [...ary1,4,5];
  console.log(ary2);           

• 2、對象的展開

  let json1:object = {
      'name':'張三'
  };
  
  let json2:object = {
      'sex':'男'
  };
  let json3:object = {...json1,...json2};
  console.log(json3);           

• 3、在函數的參數中叫剩餘參數(也隻能是放在最後面)

  function fo(...arg){
      return arg.reduce((pre,next)=>{
          return (pre + next)
      })
  }
  console.log(fo(1,2,3,4,5));
  
  function buildName(firstName: string, ...names): string {
      return `${firstName}---${names.join(',')}`;
  }
  console.log(buildName('張三','馬六','王五'));           

六、接口

接口就是一個規範資料類型

• 1、接口的定義,使用

  interface

  關鍵字
• 2、在接口裡面定義

  key

  及類型

  interface LabelledValue {
      label: string;
  }           

• 3、使用接口

  function printLabel(labelledObj: LabelledValue) {
      console.log(labelledObj.label);
  }
  let myObj = {size: 10, label: "Size 10 Object"};
  printLabel(myObj);           

• 4、接口中定義函數的規範

  //定義一個接口
  interface SearchFunc {
    (source: string, subString: string): boolean;
  }
  //定義一個變量約定資料類型是接口,根據接口中隻能是一個傳遞兩個參數的函數,并傳回一個boolean
  let mySearch: SearchFunc;
  mySearch = function(source: string, subString: string): boolean {
    let result = source.search(subString);
    return result > -1;
  }           

• 5、定義可選參數

  //定義一個接口
  interface SquareConfig {
      color?:string;
      width?:number;
  }
  function createSquare(config:SquareConfig):{ color: string; area: number }{
      let color = config.color;
      let area = config.width * 10;
      return {
          color:color,
          area:area
      }
  }
  let mySquare = createSquare({width:10});
  console.log(mySquare);           

• 6、類實作接口

  //定義一個接口,在接口中定義一個變量的約定與一個函數
  interface ClockInterface {
      currentTime: Date;
      setTime(d: Date);
  }
  class Clock implements ClockInterface {
      currentTime: Date;
      h1: number;
      m1: number;
  
      setTime(d: Date) {
          this.currentTime = d;
          console.log(this.currentTime);
          console.log(`傳遞的時間:${this.h1}-${this.m1}`);
      }
  
      //定義構造函數
      constructor(h: number, m: number) {
          this.h1 = h;
          this.m1 = m;
      }
  }
  
  let c = new Clock(20, 30);
  c.setTime(new Date());           

• 7、接口繼承接口,使用關鍵字

  extends

  ,可以多繼承

  interface Shape {
      color: string
  }
  interface PenStroke {
      width: number;
  }
  
  interface Square extends Shape, PenStroke {
      height: number;
  }
  
  let square:Square = {
      color:'red',
      width:20,
      height:30
  };
  console.log(square);           

七、 關于類的定義與繼承

• 1、定義類

  class Report { 
      //屬性 
      data: string[];
      //構造函數
      constructor(data:string[]) {
          this.data = data;
      }
      //方法
      run(): void { 
          this.data.forEach((val) => console.log(val));
      }
  }           

• 2、類的繼承,使用

  extends

  class person extends Report{
      headers: string[];
      constructor(headers: string[], val: string[]) {
          super(val);
          this.headers = headers;
      }
  
      run(): void{
          super.run();
          console.log(this.headers);
      }
  }
  var r: person = new person(['張三', '李四', '王五'],['aaa']);
  r.run()           

• 3、類實作接口使用關鍵字

  implements

  [代碼見接口]
• 4、關于類中屬性定義的

  public

  ,

  private

  protected

  • protected

    表示受保護的,類本身及其之類中都可以擷取到
  • 2、

    private

    表示隻能自己才可以擷取的,子類都不能擷取
  • 3、

    public

    公開的(不寫就是預設的)
• 5、類中的私有屬性隻能通過

  set

  和

  get

  來設定值與取值

  class Employee {
      //定義一個私有屬性 
      private _name: string;
      set name(name: string) {
          this._name = name;
      }
  
      get name(): string {
          return this._name
      }
  
      constructor() {
  
      }
  }
  
  let em = new Employee();
  em.name = '張三';
  console.log(em.name);           

• 6、靜态屬性(直接類.屬性就可以擷取到的,靜态屬性本身不屬于類的執行個體)

  class Grid {
      static origin: object = {x: 10, y: 10};
  
      static run(): void {
          console.log(`我是靜态方法`);
      }
  
      constructor() {
  
      }
  }
  console.log(Grid.origin);
  Grid.run();           

• abstract class Animal {
      color: string;
  
      move(): void {
          console.log(`在運動`);
      }
  }
  class Dog extends Animal{
      move():void{
          console.log(`已經運動了`);
      }
  }
  let dog = new Dog();
  dog.move();