TypeScript学习笔记之TS的函数类型和class类型

110 阅读3分钟

一、函数的声明

1.1 函数类型的两种声明方式

函数的类型声明描述的是函数的参数类型和返回值类型,对于函数类型有以下不同的声明方式:

// 函数声明
function getUserName(id: number): string {
  return "";
}

// 函数表达式
const add = function (x: number, y: number): number {
  return x + y;
};

// 使用箭头函数进行函数表达式的类型声明
const add1: (x: number, y: number) => number = (x, y) => x + y;

直接使用函数箭头函数对函数表达式进行声明的时候,代码不易读,一般会结合类型别名进行使用。

type AddFnunction =  (x: number, y: number) => number;
const add2: AddFnunction =  (x, y) => x + y;

1.2 函数的剩余参数

function addAll(initialValue: number, ...rest: number[]) {
  return rest.reduce(
    (preValue: number, nextValue: number) => preValue + nextValue,
    initialValue
  );
}

二、class的声明

class用于声明一个类型结构,其实就是对其中的构造函数、成员属性、成员方法进行类型声明。成员属性和方法可以使用、public、protected、private关键之进行修饰,没有特殊声明的时候默认值是public。

  • public 当前类、子类、类的示例中都可以访问。
  • protected 当前类和子类中可以访问。
  • private 只在当前类中可以访问。
class Book {
  constructor(public name: string, public price: number) {

  }

  version: string = '1.3';

  author: string = 'jack';

  getName(): string {
    return this.name;
  }

  private setPrice(price: number) {
    this.price = price;
  }

  protected getVersion(): string {
    return this.version;
  }
}

2.1 静态属性

成员属性或成员方法是通过实例化之后的对象进行访问的,而静态方法则是通过类本身进行访问。

const myBook = new Book('javascript', 100);
myBook.getName(); //javascript
Book.publicationDate; //2024/04/14

2.2 继承

  • 通过extends关键字可以继承父类的构造函数、成员属性、成员方法,只有被public、procted修饰的属性才可以被子类继承.
  • 子类继承自父类时可以重写父类的成员属性和方法,但是被复写的成员属性和方法,其类型声明要和父类一致。 在新的ts版本中使用@Override装饰器进行子类方法的重写,当父类中没有要复写的方法时会给出报错提示。
  • 子类可以重写父类的构造函数,但是必须要使用super调用父类的构造函数。这是因为子类继承自父类必须要对父类的构造函数进行实现。
  • 子类中通过super关键字调用父类的构造函数、成员方法、成员属性。
class JavascriptBook extends Book {
  constructor(public name:string, public price: number) {
    super(name, price);
  }

  // 重写成员方法, 类型声明要和父类一致,即入参和返回值都要与父类的getName一致。
  getName(): string {
    return `get name by override function: ${this.name}`;
  }

  // 添加新的成员方法, 通过super访问父类成员属性
  getPrice(): number {
    return super.price;
  }
}

2.3 重载

除了可以重写继承自父类的成员方法, 类自身的方法也可以进行重载,即多个函数声明对应一个函数实现,调用的时候根据入参不同自动匹配对应的函数实现。在ts中,需要声明多个函数声明,但只能对应一个函数实现,函数内部通过条件语句空值函数的执行逻辑与入参相匹配。

class User {
  constructor(public name: string, public age: number) { }

  getProfile(name: boolean, age: boolean): string
  getProfile(name: boolean, age: boolean): number
  getProfile(name: boolean, age: boolean): { name: string, age: number }
  getProfile(name: boolean, age: boolean) {
    if (name && age) {
      return { name: this.name, age: this.age }
    } else if (name) {
      return this.name
    } else {
      return this.age;
    }
  }
}

const user = new User('jack', 21);
user.getProfile(true, true); // { name: 'jack', age: 21 }
user.getProfile(true, false); // jack
user.getProfile(false, true); // 21