接口,属性的封装,泛型

接口

(function () {
  // 描述一个对象的类型
  type myType = {
    name: string;
    age: number;
    [propName: string]: any;
  };

  // type myType = {};报错

  /**
   * 接口用来定义一个类结构,用来定义一个类中应该包含哪些属性和方法
   *     同时接口也可以当成类型声明去使用
   *     接口可以重复声明,所有的接口加起来合成一个
   */
  interface myInterface {
    name: string;
    age: number;
  }

  interface myInterface {
    [propName: string]: any;
  }

  const obj: myType = {
    name: "XX",
    age: 18,
    gender: "man",
  };

  const obj2: myInterface = {
    name: "XX",
    age: 18,
    gender: "man",
  };

  /**
   * 接口可以在定义类的时候去限制类的结构
   *     接口中的所有的方法都不能有实际的值
   *     接口只定义对象的结构,而不考虑实际值
   *         在接口中的所有的方法都是抽象方法
   */
  interface myInter {
    name: string;
    sayHello(): void;
  }

  /**
   * 定义类时,可以使类去实现一个接口
   *     实现接口就是使类满足接口的要求
   */
  class MyClass implements myInter {
    name: string;

    constructor(name: string) {
      this.name = name;
    }

    sayHello() {
      console.log(this.name + "大噶好~~");
    }
  }

  const my = new MyClass("大柱");
  my.sayHello();
})();

8、属性的封装

(function () {
  class Person {
    /**
     * TS可以在属性前面添加属性的修饰符
     *     public 修饰的属性可以在任意位置访问(修改)默认值
     *     private 私有属性,只能在类的内部进行访问(修改),不可被子类访问(修改)
     *          -- 通过在类中添加方法使得私有属性可以被外部访问
     *     protect 受保护属性,只能在当前类和当前类的子类中访问(修改)
     */
    private _name: string;
    private _age: number;

    constructor(name: string, age: number) {
      this._name = name;
      if (age > 0) {
        this._age = age;
      } else {
        throw new Error("年龄不合法");
      }
    }

    /**
     * getter 方法用来读取属性
     * setter 方法用来设置属性
     *      - 他们被称为属性的存取器
     */

    // getter 定义方法,用来获取name属性
    getName() {
      return this._name;
    }

    // setter 定义方法,用来设置name属性
    setName(newName: string) {
      this._name = newName;
    }

    // TS中设置getter方法的方式
    get age() {
      return this._age;
    }

    set age(newAge: number) {
      if (newAge > 0) {
        this._age = newAge;
      }
    }
  }

  const person = new Person("XX", -18);
  console.log(person);

  /**
   * 现在属性是在对象中设置的,属性可以任意的修改
   *     属性可以任意被修改将会导致对象中的数据变得非常不安全
   */
  // person._name = 'YY'; // 报错
  // person._age = 20; // 报错
  // console.log(person);

  console.log(person);

  person.setName("YY");
  person.age = 88;

  console.log(person);
})();

语法糖
class A {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
等价于
class A {
  constructor(public name: string, public age: number) {}
}

9、泛型

/*
function fn(a: any): any {
  return a;
} */

/**
 * 在定义函数或类时,如果遇到类型不明确就可以使用泛型
 */
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;
}

function fn3<T extends Inter>(a: T): number {
  return a.length;
}

fn3("1234");

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

const my = new MyClass<string>("XX");

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值