一、函数的声明
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