6.TypeScript面向对象

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('张三');

输出结果：