TypeScript基础概念及语法（day02）

typescript函数梳理

• 在src下新建文件 function.ts

  // 函数定义 function.ts
  
  function add5 (x: number, y: number) {
         
      return x + y
  }
  
  // 后三种没有实现
  
  let add6: (x: number, y: number) => number
  
  type add7 = (x: number, y: number) => number
  
  interface add8 {
         
      (x: number, y: number): number
  }
  
  
  // 对函数参数的要求
  
  // add5(1)
  add5(1, 2)
  // add5(1, 2, 3)
  
  // 可选参数  可选参数要位于必选参数之后
  function add9(x: number, y?: number){
         
      return y? x + y : x ;
  }
  add9(1)
  
  function add10(x: number, y = 0, z: number, q = 1){
         
      return x + y + z + q;
  }
  add10(1, undefined, 3)
  
  function add11(x: number, ...rest: number[]){
         
      return x + rest.reduce((pre, cur) => pre + cur)
  }
  add11(1, 2, 3, 4, 5)
  
  // 函数重载
  function add12(...rest: number[]): number;
  function add12(...rest: string[]): string;
  function add12(...rest: any[]): any {
         
      let first = rest[0];
      if(typeof first === 'string'){
         
          return rest.join('')
      }
      if(typeof first === 'number'){
         
          return rest.reduce((pre, cur) => pre + cur)
      }
  }
  console.log(add12(1, 2, 3))
  console.log(add12('a', 'b', 'c'))
  

typescript中的类

ts中的类覆盖了ES6的类，同时引入了其他特性。

类的实现，类的继承，类的成员修饰符

• 在src目录下新建 class.ts

  // ts中的类 calss.ts
  // 类的实现，类的继承，类的成员修饰符
  
  // 无论es还是ts中，类成员属性都是实例属性，而不是原型属性。类成员的方法都是实例方法
  // 实例属性必须有初始值
  class Dog {
         
  
      // 私有构造表示这个类不能被实例化，也不能被继承。
      // private constructor(name: string) {
         
      //     this.name = name
      // }
  
      // 受保护构造表示不能被实例化，只能被继承
      // protected constructor(name: string) {
         
      //     this.name = name
      // }
  
      constructor(name: string) {
         
          this.name = name
      }
      // public 类的成员修饰符，默认public
      public name: string = 'dog'
      run(){
         }  
      // private 类的成员修饰符，私有成员只能被类的本身调用，不能被子类和实例调用
      private pri(){
         }
      // protected 类的成员修饰符，受保护成员，只能在类或者子类中访问，而不能在类的实例中访问
      protected pro(){
         }
      // readonly 只读属性，需要初始化。
      readonly legs: number = 4
      // static 静态成员, 只能通过类名调用，不能通过子类调用
      static food: string = 'bones'
  
  }
  console.log(Dog.prototype)
  let dog = new Dog('wangwang')
  console.log(dog)
  
  // dog.pri()   // 不允许,私有
  // dog.pro()       //不允许，被保护
  
  // 类的继承
  class Husky extends Dog {
         
  
      // 在构造器中，构造函数的参数也可以添加修饰符。作用是将参数自动变成实例属性。
      constructor (name: string, public color: string){
         
          // super代表父类实例
          super(name)
          // 在super之后
          this.color = color
          // dog.pri()   // 不允许,私有
          this.pro()
      }
      // color 变成了实例属性。
      // color: string
  }
  
  // 类的静态成员可以通过子类调用
  console.log(Husky.food)
  
  // 类的成员修饰符
  
  

抽象类，多态

• 在 class.ts 中追加

在这里插入代码片

类和接口：总结

一个接口可以约束类成员有哪些属性，以及类型

• 在src下新建 class-interface.ts

  // 类和接口：总结 class-interface.ts
  // 一个接口可以约束类成员有哪些属性，以及类型
  
  interface Human {
         
      
      // new (name: string): void
      name: string;
      eat(): void;
  }
  
  class Asian implements Human {
         
      constructor(name: string){
         
          this.name = name
      }
  
      // 接口只能约束公有成员
      // private name: string
  
      name: string
      eat(){
         }
      sleep(){
         }
  }
  
  // 一个接口可以继承多个接口
  interface Man extends Human {
         
      run(): void
  }
  
  interface Child {
         
      cry(): void
  }
  
  interface Boy extends Man, Child {
         }
  
  let boy: Boy = {
         
      name: '',
      run(){
         },
      eat(){
         },
      cry(){
         }
  }
  
  // 接口继承类
  class Auto {
         
      state = 1
      // private state2 = 0
  }
  
  interface AutoInterface extends Auto {
         
      //隐含state属性
  }
  
  class C implements AutoInterface {
         
      state = 1
  }
  
  class Bus extends Auto implements AutoInterface {
         
      // 不必实现state属性，因为他是Auto子类，继承了state属性
      // 接口在抽离类成员的时候，不仅抽离了公共成员，私有成员还有受保护成员
  }
  
  /**
   * 接口之间可以相互继承，实现接口的复用
   * 类之间也可以相互继承，实现方法和属性的复用
   * 接口可以通过类实现，但是接口只能约束类的公有成员
   * 接口可以抽离出类的成员，包括共有，私有，受保护
   */
  
  
  

泛型

不预先确定的数据类型，具体的类型在使用的时候才能确定。

• 在src下新建 generice.ts

  // generice.ts
  
  function log<T>(value: T): T {
         
      console.log(value);
      return value;
  }
  
  log<String[]>(['a', 'b', 'c'])
  log(['a', 'b', 'c']) //类型推断
  
  // type Log = (value: T) => T
  // let myLog: Log = log
  
  
  //当泛型变量约束了整个接口之后，在实现的时候我们必须指定一个类型
  interface Log<T> {
         
      <T>(value: T): T
  }
  let myLog: Log<number> = log
  myLog(1)
  
  
  //指定默认类型
  interface Log<T = string> {
         
      <T>(value: T): T
  }
  myLog('a')
  
  // 泛型也可以约束类的成员
  class Log<T> {
         
  //泛型不能应用于类的静态成员
  // static run(value: T) {
         
  //    console.log(value)
  //     return value
  // }
  
      run(value: T) {
         
          console.log(value)
          return value
      }
  }
  
  let log1 = new Log<number>()
  log1.run(1)
  // log1.run('a')
  
  let log2 = new Log()
  log2.run('a')
  
  
  interface Length{
         
      length: number
  }
  
  function log<T extends Length>(value: T): T {
         
      console.log(value, value.length)
      return value
  }
  
  log([1])
  log('123')
  log({
         length: 1})
  
  

• 使用泛型的好处

  • 函数和类可以轻松的支持多种类型，增强程序的扩展性
  • 不必写多多条函数重载，冗长的联合类型声明，增强代码可读性
  • 灵活控制类型之间的约束