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();