1.类的基本使用
// 使用class关键字来定义一个类
/*
对象中主要包含了两个部分:
属性
方法
*/
class Person {
/*
直接定义的属性是实例属性,需要通过对象的实例去访问:
const per=new Person();
per.name
使用static开头的属性是静态属性(类属性),可以直接通过类去访问
Person.age
readonly开头的属性,表示一个只读的属性,无法修改
*/
// 定义实例属性
readonly name: string = '张三';
// 在属性前使用static关键字可以定义类属性(静态属性)
static age: number = 18;
// 定义方法
/*
如果方法以static开头,则方法就是类方法,可以直接通过类去调用
*/
sayHello() {
console.log('Hello 大家好!');
}
}
const per = new Person();
console.log(per);
console.log(Person.age);
per.sayHello();
输出结果:
2.构造函数
class Dog {
name: string;
age: number;
// constructor被称为构造函数
// 构造函数会在对象创建时调用
constructor(name: string, age: number) {
// 在实例方法中,this就表示当前的实例
// 在构造函数中,当前对象就是当前新建的那个对象
// 可以难过this向新建的对象中添加属性
this.name = name;
this.age = age;
}
bark() {
// alert('汪汪汪!');
// 在方法中可以通过this来表示当前调用方法的对象
console.log(this.name);
}
}
const dog = new Dog('小黑', 4);
const dog2 = new Dog('小白', 2);
console.log(dog);
console.log(dog2);
dog2.bark()
输出结果:
3.继承与super关键字
(function () {
// 定义一个Animal类
class Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello() {
console.log('动物在叫~');
}
}
/*
Dog extends Animal
此时,Animal被称为父类,Dog被称为子类
使用继承后,子类将会拥有父类所有的方法和属性
通过继承,可以将多个类中共有的代码写在一个父类中,这样只需写一次即可让所有的子类都同时拥有父类中的属性和方法
如果希望在子类中添加一些父类中没有的属性或方法,直接加就行
如果在子类中添加了和父类相同的方法,则子类会覆盖掉父类的方法
这种子类覆盖掉父类方法的形式,我们称之为方法重写
*/
// 定义一个表示狗的类,使Dog类继承Animal类
class Dog extends Animal {
color: string;
constructor(name: string, age: number, color: string) {
// 如果在子类中写了构造函数,在子类构造函数中必须对父类的构造函数进行调用
super(name, age); //调用父类的构造函数
this.color = color;
}
run() {
console.log(`${this.name}在跑~`);
}
sayHello() {
// 在类的方法中,super表示当前类的父类
// super.sayHello();
console.log('汪汪汪~');
}
}
// 定义一个表示猫的类,使Cat类继承Animal类
class Cat extends Animal {
sayHello() {
console.log('喵喵喵~');
}
}
const dog = new Dog('旺财', 5, 'white')
const cat = new Cat('咪咪', 3)
console.log(dog);
console.log(cat);
dog.sayHello();
cat.sayHello();
dog.run();
})();
输出结果:
4.抽象类
(function () {
/*
以abstract开头的类是抽象类
抽象类和其他类区别不大,只是不能用来创建对象
抽象类就是专门用来被继承的类
抽象类中可以添加抽象方法
*/
abstract class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
// 定义一个抽象方法
// 抽象方法使用abstract开头,没有方法体
// 抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写
abstract sayHello(): void;
}
class Dog extends Animal {
sayHello() {
console.log('汪汪汪~');
}
}
class Cat extends Animal {
sayHello() {
console.log('喵喵喵~');
}
}
const dog = new Dog('旺财');
dog.sayHello();
})();
输出结果:
5.接口
(function () {
// 描述一个对象的类型
type myType = {
name: string;
age: number;
};
/*
接口用来定义一个类结构,用来定义一个类中应该包含哪些属性和方法
同时接口也可以当成类型声明去使用
*/
interface myInterface {
name: string;
age: number;
}
interface myInterface {
gender: string;
}
// const obj: myInterface = {
// name: '张三',
// age: 18,
// gender: '男',
// }
/*
接口可以在定义类的时候去限制类的结构
接口中的所有属性都不能有实际的值
接口只定义对象的结构,而不考虑实际值
在接口中所有的方法都是抽象方法
*/
interface myInter {
name: string;
sayHello(): void;
}
/*
定义类时,可以使类去实现一个接口
实现接口就是使类满足接口的要求
*/
class MyClass implements myInter {
name: string;
constructor(name: string) {
this.name = name;
}
sayHello() {
console.log('大家好~');
}
}
})();
6.属性的封装
(function () {
class Person {
// TS可以在属性前添加属性的修饰符
/*
public 默认值,修饰的属性可以在任意位置访问(修改)
private 私有属性,只能在类的内部进行访问(修改)
可以通过在类中添加方法使得私有属性可以被外部访问
protected 受保护的属性,只能在当前类和当前类的子类中访问(修改)
*/
private _name: string;
private _age: number;
constructor(name: string, age: number) {
this._name = name;
this._age = age;
}
/*
getter方法用来读取属性
setter方法用来设置属性
它们被称为属性的存取器
*/
// 定义方法,用来获取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() {
return this._name;
}
// TS中设置setter方法的方式
set name(value: string) {
this._name = value;
}
get age() {
return this.age;
}
set age(value: number) {
if (value >= 0)
this._age = value;
}
}
const per = new Person('张三', 18);
/*
现在属性是在对象中设置的,属性可以任意地被修改
属性可以任意修改将会导致对象中的数据变得非常不安全
*/
// per.setName('李四');
// per.setAge(-18);
per.name = '李四';
per.age = 88;
console.log(per);
// protected
class A {
protected num: number;
constructor(num: number) {
this.num = num;
}
}
class B extends A {
test() {
console.log(this.num);
}
}
const b = new B(123);
// B.num = 456;
// 语法糖
// class C {
// public name: string;
// public age: number;
// constructor(name: string, age: number) {
// this.name = name;
// this.age = age;
// }
// }
// 可简写为:
class C {
// 可直接将属性定义在构造函数中
constructor(public name: string, public age: number) { }
}
})()
输出结果:
7.泛型
// 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;
}
// T extends Inter表示泛型必须是Inter实现类(子类)
function fn3<T extends Inter>(a: T) {
return a.length;
}
class MyClass<T>{
name: T;
constructor(name: T) {
this.name = name;
}
}
const mc = new MyClass('张三');
输出结果: