TypeScript学习(五)——变量类型约束（接口，函数，泛型，类）

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读
前往上一篇==>变量类型约束（&，|，别名，数组，类型断言，枚举，元祖）

接口

/* 
  接口就是定义了一个类的结构，类可以创建对象，接口也可以创建对象,可以把接口理解成一个类
  接口中的所有属性都不能有实际的值
  接口中所有的方法都是抽象方法，没有具体的实现
  定义同名的接口，可以进行叠加
  类实现接口
  接口其实可以看成一个固定接口的类，也可以像类一样，互相继承
*/
interface MyT {
  name:string;
  sayHello():void;
}

// 重复声明，接口会叠加
// 可选属性与只读属性
interface MyT {
  readonly age: number;
  kexuan?:string;
}

interface BT {
  ccc?:string;
}

// AT接口继承了接口MyT,BT，此时AT需要综合MyT，BT两个接口的约束
interface AT extends MyT , BT {

}

const a: AT = {
  name:"zhangsan",
  age: 20,
  sayHello(){
    console.log('nihao');
  }
}

const b: MyT = {
  name: "liujie",
  age: 18,
  sayHello(){
    console.log('nihao');
  }
}

console.log(b.age);
b.sayHello();

// 类实现接口
class ClassA implements MyT {
  name: string;
  age: number;
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
  sayHello(){
    console.log(this.name+'说nihao');
  }
}

const c = new ClassA('zhangsan',18);
c.sayHello();

// 接口继承类
class ClassB {
  cname: string;
  cage: number;
} 

interface TB extends ClassB {

}

const d: TB = {
  cname: "lisi",
  cage: 20,
}

console.log(d.cage);

函数

函数声明方式

// 命名函数
function fName() {}

// 匿名函数
let anonymousName = function() {};

// 箭头函数
let fn = () => {}

函数返回值和参数类型

function add(a:number,b:number) :number {
  return a * b
}

console.log(add(2,3)); // 6

可选参数和默认值

// 可选参数，可选参数必须在必选参数后面
function addOption(a: number, b: number[], c?: string): number {
  if (c === "a") {
    return a + b[0];
  } else {
    return a;
  }
}

console.log(addOption(1, [2]));//1
console.log(addOption(1, [2], "a"));//3
// 默认参数，默认参数可以不放在最后，但是如果不放在最后的话，在我们不想给他们赋值的话，必须要传递一个undefined,来获得默认值，所以推荐放在最后
function addDefault(a: number = 1, b: number) {
  return a + b;
}
console.log(addDefault(3,2));//5
console.log(addDefault(undefined,2));//3

函数完整书写形式和类型推断

// ts函数书写完整类型
let myAdd: (a: number,b: number) => number = function(a:number,b:number):number{return a*b}

// 类型推断，只写左边，右边不写，ts会进行类型推断
let MyAdd: (a:number,b:number) => number = function(a,b){
  return a * b  
}

console.log(MyAdd(2,3));

函数的重载

function addOverloading(a: number, b: number): void
function addOverloading(a: string, b: string): string
function addOverloading(a: any, b: any): any {
  if (typeof (a) === "number") {
    return a + b
  } else if (typeof (a) === "string") {
    return `${a}+${b}`
  }
}

console.log(addOverloading(1, 2)); // 3
console.log(addOverloading("1", "2")); // 1+2

泛型

// 当函数的参数类型确定的时候
function generic(a: number): number {
  return a;
}


// 当函数的参数不确定的时候,可以使用any，但是不能保证参数a的类型和函数的返回值类型一致
function generic2(a: any): any {
  return a;
}


// 使用泛型
function generic3<T>(a: T): T {
  return a;
}

// 泛型推断，当我们传入10时，ts编译器会帮我们进行推断类型为number
console.log(generic3(10)); // 10

// 指定泛型类型
console.log(generic3<string>("hahaha")); // hahaha

// 使用多个泛型
function generic4<T, K>(a: T, b: K): T {
  console.log(b); // 1
  return a;
}

console.log(generic4<string, number>("b", 1)); // b

// 泛型继承类
// 前面说过，接口也是类
interface IPerson {
  name: string
}

function generic5<T extends IPerson>(obj: T): T {
  obj.name = "张三";
  return obj;
}

console.log(generic5({ name: "翠花" })); // { name: '张三' }

类

public,private,protected

/* 
  typescript中，类中的成员的默认值都是public,静态的，可以被访问的
  当成员被标记成 private时，它就不能在声明它的类的外部访问
  protected修饰符与private修饰符的行为很相似，但有一点不同， protected成员在派生类（继承）中仍然可以访问
*/

// public
class Animal2 {
  public name: string;
  public constructor(theName: string) {
    this.name = theName;
  }
  public move(distanceInMeters: number) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}


// private
class Animal3 {
  private name: string;
  constructor(theName: string) {
    this.name = theName;
  }
}

// new Animal3("Cat").name; // 错误: 'name' 是私有的.


// protected
class Person {
  protected name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Employee extends Person {
  private department: string;

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

  public getElevatorPitch() {
    // name属性在父类Person是protected，但是改类Employee继承了Person，因此可以正常访问
    return `Hello, my name is ${this.name} and I work in ${this.department}.`;
  }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
// console.log(howard.name); // 错误

super

class Father {
  money:number = 99999;
}

class Son extends Father {
  name: string;
  age: number;
  constructor(name,age){
    // 在构造函数中，必须要使用一次super()[表示要调用一次父类的constructor构造函数],且必须在最上面调用,免得子类的构造函数覆盖父类的构造函数
    super();
    this.name = name;
    this.age = age;
  }
  useMoney(){
    console.log(this.money);
  }
}

const superA = new Son("liujie",18);
superA.useMoney()

抽象类和抽象方法

/* 
  抽象类和抽象方法，不需要具体的实现细节
  定义的抽象方法需要具体实现，但继承的子类必须去实现
*/
abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log("Fast running");
  }
}

class Cat extends Animal {
  name: string;
  constructor(name: string) {
    super();
    this.name = name;
  }
  makeSound(): void {
    console.log("喵喵喵");
  }
}

const xiaohua = new Cat("小花");
console.log(xiaohua.name); // 小花
xiaohua.makeSound(); // 喵喵喵
xiaohua.move(); // Fast running

结束啦！