typScript学习笔记（下）

 一、TS 继承

class Person {

  name: string;

  age:number;

  // 通过 constructor 构造函数 创建自己的小动物

  constructor(name:string,age:number) {

    this.name =name;

    this.age = age

  }

  sayhi(val:string) {

    console.log('我你爹');

    console.log(val);

  }

}

/**

 * extends 继承

 * 设置子类的独有函数

 */

class Dog extends Person {

  run() {

    console.log(this.name,'paopao~~~');

  }

}

// 直接继承，函数调用

class Cat extends Person{}

const per = new Person('老狗',18)

const pers = new Cat('死狗',17)

const res = new Dog('小狗',9)

console.log(per)

console.log(res)

console.log(pers)

res.run()

per.sayhi('111')

pers.sayhi('222')

二、TS接口

(function() {

  /**

   *  TS 接口

   */

  

  // 不可重复定义类名

  type myType = {

    name:string;

    age:number

  }

  

  /**

   * interface 接口定义一个类结构

   * 定义一个类中应该包含哪些属性和方法，可重复定义，叠加或覆盖

   * 也可以当作类型去使用

   * 接口可以在定义类的时候去限制类的结构

   * 接口只定义对象的结构，不考虑实际值

   */

  interface myInterface{

    name:string;

    age:number

  }

  interface myInterface{

    gender:string

  }

  let obj: myInterface = {

    name: 'ls',

    age:18,

    gender: 'nan'

  }

  console.log(obj)

  interface myInter{

    name:string;

    sayHi():void

  }

  /**

   * 在类中使用 implements 使用接口

   */

  class myClass implements myInter{

    name: string

    // sayHi(): void {

    //   throw new Error("Method not implemented.")

    // }

    constructor(name:string) {

      this.name = name

    }

    sayHi() {

      console.log('daji')

    }

  }

  let sss = new myClass('ls')

  console.log(sss)

  sss.sayHi()

})()

三、TS 的修饰符

  class mini{

    /**

     * TS 可以在属性前添加属性的修饰符

     * public 修饰的属性可在任意位置修改，访问（默认值）

     * private 私有属性 只能在类内部进行修改，访问

     * protected 受保护的属性，只能在当前或子类中修改及访问

     */

    public name:string;

    public age:number

    private sex: string

    constructor(name:string,age:number,sex:string) {

      this.name = name;

      this.age = age;

      this.sex = sex;

    }

    // 外部通过函数间接访问

    // getSex() {

    //   return this.sex

    // }

    // 外部通过函数间接修改

    // setSex(val:string) {

    //   this.sex = val

    //   console.log(this.sex)

    // }

    /**

     * TS 中设置getter方法的方式

     * get + 方法名 不可与属性名重复' 访问

     * set + 方法名 不可与属性名重复' 修改

     */

    get _sex() {

      return this.sex

    }

    set _sex(val:string) {

      this.sex = val

      console.log(this.sex);

      

    }

  }

  let obj = new mini('ls',6, '男')

  console.log(obj)

  

  /**

   * 现在属性是在对象中设置的。可任意被修改

   * 导致数据不安全

   */

  obj.name = 'zs'

  obj.age = -2

  // obj.sex = 'nv' 无法修改

  // console.log(obj.getSex());

  console.log(obj._sex)

  obj._sex = 'wonidie'

  // console.log(obj.sex) 无法访问

  // obj.setSex('窝你爹')

  

  class a {

    protected num:number // 受保护的属性，只能在当前或子类中被访问和修改

    constructor(num:number) {

      this.num = num

    }

  }

  class b extends a {

      test(){

        console.log(this.num);

      }

  }

  let c = new b(11)

  c.test()

  // 语法糖

  class d {

    constructor(protected name:string, protected age: number) {}

  }

  let D = new d('ls',7)

  console.log(D);

  

四、TS 的 super 关键字

class mini {

  constructor(protected name:string,protected age:number){}

  say(aaa:number,bbb:number):number {

    console.log(aaa+bbb );

    return aaa+bbb 

  }

}

class success extends mini {

  /**

   * 子类中使用构造函数

   * super 指向的是当前父类的构造函数，参数和父类保持对应

   */

  constructor(name:string,age:number,protected sex:string){

    super(name,age)

    this.sex = sex

  }

  /**

   * 修改父类中的方法

   * super 关键字 + 方法调用，参数和父类保持对应

   * 要修改的操作

   */

  fn(a:number,b:number,c:string){

    let res: number

    res = super.say(a,b)

    console.log( res, c);

  }

}

let T = new success('老狗', 19, '男')

console.log(T);

T.fn(1,2,'小狗')

五、泛型

/**

 * TS 泛型

 * 定义类或函数时，如果遇见类型不明确时就可以使用泛型

 * 使用时先用尖括号定义，表未知类型，只有在表达式执行时才会有明确的类型

 * 不同于any，安全可靠，避免any带来的隐患

 */

function fn<T>(a: T): T {

  return a 

}

// 使用时直接调用函数或类即可

fn(10) // 不指定类型，Ts 自动检测