面向对象简介二---接口+ 属性的封装+泛型

一、接口

1-1 方便理解：类似于“描述一个对象的类型”

1. 回忆：描述一个对象的类型，对一个类型进行限制

  type myType = {
    name: string;
    age: number;
    [propname: string]: any;
  };

  const obj: myType = {
    name: "sss",
    age: 111,
  };
  const obj2: myInterface = {
    name: "sss",
    age: 111,
    gender: "男",
  };

1-2 接口

1. • 接口用来定义一个类结构,用来定义一个类中应该包含那些属性和方法
   • 同时接口也可以当成类型声明去使用
2. • 接口可以在定义类的时候去限制类的结构
   • 接口中的所有的属性都不能有实际的值
   • 接口只定义对象的结构，而不考虑实际的值
   • 接口中所有的方法都是抽象方法

   interface myInter {
  name: string;
  sayHello(): void;
}

// 定义类时，可以使类去实现一个接口
// 实现接口就是使类满足接口的要求
class MyClass implements myInter {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHello() {
    console.log("大家好~~");
  }
}

二、 属性的封装

2-1

1. 现在属性是在对象中设置的，属性可以任意被修改

   • 属性可以任意被修改会导致对象中的数据变得非常不安全

   (function(){
       // 定义一个表示人的类
       class Person{
           public name:string;
           public age: number;
           constructor(name: string, age: number) {
               this.name = name;
               this.age = age;
           }
       }
       const per = new Person('孙悟空',18);
       
       per.name = '猪八戒';
       per.age = -38;
   })()
   

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

   • public：修改的属性可以在任意位置访问（修改）
     • 子类也可以访问
   • private: 私有属性，私有属性只能在类内部进行访问（修改）
     • 通过在类中添加方法使得私有属性可以被外部访问
     • getter方法用来读取属性，setter方法用来设置属性，被称为属性的存取器
     • 当前类中访问，实例和子类中均不能使用
   • protected: 只能在当前类和当前类的子类的子类中访问

(function () {
  // 定义一个表示人的类
  class Person {
    private _name: string;
    private _age: number;
    constructor(name: string, age: number) {
      this._name = name;
      this._age = age;
    }

    // 定义方法，用来获取name属性
    // getName() {
    //   return this._name;
    // }
    // // 定义方法，用来设置name属性
    // setName(value: string) {
    //   this._name = value;
    // }

    // getAge(){
    //   return this._age;
    // }
    // setAge(value: number) {
    //   // 判断年龄是否合法
    //   if(value >= 0) {
    //     this._age = value;
    //   }
    // }

    // TS中设置getter方法的方式
    get name() {
      console.log("get name执行了！");
      return this._name;
    }
    set name(value) {
      this._name = value;
    }
  }

  const per = new Person("猪八戒", 12);
  // per.name = '猪八戒';
  // per.age = -38;
  // per.setName('猪八戒');
  // per.setAge(-33);
  // per.name = "猪八戒";
  console.log(per);
  console.log(per.name);
})();

三、 泛型

// 在定义函数或类时，如果遇到类型不明确则可以使用泛型
// TS类型的自动推断
function fn<T>(a: T): T {
  return a;
}

// 可以直接调用具有泛型的函数
let result = fn(10); // 不指定泛型，TS可以自动对类型进行推断
let result2 = fn<string>("hello"); // 指定泛型

// 泛型可以同时指定多个
function fn2<T, K>(a: T, b: K): T {
  console.log(b);
  return a;
}

fn2<number, string>(123, "hello");
interface Inter {
  length: number;
}

// T extends Inter 表示泛型T必须Inter实现类（子类）
function fn3<T extends Inter>(a: T): number {
  return a.length;
}

class MyClass<T> {
  name: T;
  constructor(name: T) {
    this.name = name;
  }
}

const mc = new MyClass<String>("孙悟空");