TypeScript学习（4：基础知识）

1. 类的简介：

//使用class关键字来定义一个类
/**
 * 对象中主要包含两个部分：属性 + 方法
 * 
 */
class Person{

    /**
     * 直接定义的属性是实例属性，需要通过对象的实例去访问
     *   const per=new Person;
     *      per.name
     *  使用static开头的属性是静态属性（类属性）,可以直接通过类访问
     *  Person.age
     * 
     * readonly开头的属性表示一个只读的属性无法修改
     */

    //定义实例属性
    // readonly  name:String="孙苦苦";
    //在属性前使用static关键字可以定义类属性（静态属性）
    // static readonly age:number=19;
    name="孙空间";
    age=12;
    

    //定义方法
    //方法以static开头就是类方法，可以直接通过类去调用
    sayHello(){
        console.log("hello 大家好吗")
    }
}
const per=new Person();
// console.log(per)
// console.log(per.name,per.age)


// console.log(Person.age)

// console.log(per.name)
// per.name="猪八戒"
// console.log(per.name)
per.sayHello();
// Person.sayHello();

2. 构造函数：

class Dog{
    name: string;
    age: number;

    //constructor 被称为构造函数
    //构造函数会在对象创建时调用
    constructor(name:string, age:number){
        //在实例方法中，this就表示当前当前的实例
        //在构造函数中当前对象就是当前新建的对象、
        //可以通过this向新建对象中添加属性
        // console.log(this);
        this.name =name;
        this.age =age;
    }
    bark(){
        //在方法中可以通过this来表示当前调用方法的对象
        console.log(this);
    }
}

const dog=new Dog("嘿嘿",12);
const dog2=new Dog("花花",18);

console.log(dog)
console.log(dog2)
dog.bark();
dog2.bark();

3. 继承：

(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{
        run(){
            console.log(`${this.name}再爬`)
        }
    }

    //定义一个表示猫的类
    //是cat类继承animal类
    class Cat extends Animal{
        
    }
    const dog = new Dog("旺财",12);
    console.log(dog);
    dog.sayHello();
    dog.run();
    const cat=new Cat("苗苗",2);
    console.log(cat)
    cat.sayHello();


})();

4. super：

(function() {
    class Animal{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        sayHello() {
            console.log("动物在叫**");
        }
    }
    class Dog extends Animal{
        
        age:number;
        constructor(name:string,age:number){
            //如果在子类中写了构造函数，在子类的构造函数中必须对父类的构造函数进行调用
            super(name);//调用父类的构造哈数
            this.age=age;
        }

        sayHello() {
            //在类的方法中super就表示当前类的父类
            // super.sayHello();
            console.log("汪汪汪王？")
        }
    }
    const dog = new Dog("旺财",12);
    dog.sayHello();
})();

5. 抽象类：

(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();

    // let an=new Animal("猫咪")
})();

6. 接口：

(function() {

    //描述对象的一个类型
    type myType={
        name:string,
        age:number,
    };

    /**
     * 接口用来定义一个类结构,用来定义一个类中
     * 用来包含哪些属性和方法，同时接口可以当成类型声明去
     * 使用
     * 
     */
    interface myInterface{
        name:string;
        age:number;
    }
    interface myInterface{
        gender:string;
    }


    // const obj:myInterface={
    //     name:"sss",
    //     age:12,
    //     gender:"男"
    // }

    /**
     * 接口可以在定义类的时候去限制类的结构
     * 接口中的所有属性都不能又实际的值
     * 接口只定义对象的结构，而不考虑实际值
     * 在接口中所有的方法都是抽象方法
     * 
     */

    interface myInter{
        name:string;
        sayHello():void;
    }

    /**
     * 定义类时，可以使类实现一个接口
     * 实现接口就是使类满足接口的要求
     */
    class MyClass implements myInter{
        name: string;
        constructor(name:string){
            this.name=name;
        }
        sayHello(): void {
            throw new Error("Method not implemented.");
        }
        
    }
})()

7. 属性的封装：

(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(){
            console.log("get _name()执行了")
            return this.name
        }

        set _name(value:string){
            this.name=value;
        }
        get _age(){
            console.log("get _age()执行了")
            return this.age
        }

        set _age(value:number){
            this.age=value;
        }
    }

    const person1=new Person("猪八戒",13);
    // console.log(person1)


    /**
     * 现在属性是在对象中设置的，属性可以任意的被修改
     *  属性可以任意被修改将会导致对象中的数据变得非常不安全
     * 
     * 
     */
    // person1.name="孙悟空";
    // person1.age=18;
    // person1.setName("孙悟空")
    // person1.setAge(190)
    person1._name="孙悟空"
    person1._age=12
    console.log(person1)

    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);

    // class C {
    //     name:string;
    //     age:number;
    //     //可以直接将属性定于i在构造函数中
    //     constructor(name:string,age:number){
    //         this.name=name
    //         this.age=age
    //     }
    // }
    class C {
        //可以直接将属性定于i在构造函数中
        constructor(public name:string,public age:number){
            
        }
    }
    const c =new C('XXX',29)
    console.log(c)
})()

8. 泛型：

// function fn(a:number):number{
//     return a;
// }


/**
 * 在定义函数或是类时，如果遇到类型不确定就可以使用泛型
 * 
 * 
 */
function fn<T>(a:T):T {
    return a;
}

//可以直接调用具有泛型的函数
let result= fn(10);//不指定方向，TS可以自动对类型进行推断
let result1= fn<string>("hello");//指定泛型
console.log(result,result1)

//泛型可以同时指定多个
function fn2<T,K>(a:T,b:K):T{
    console.log(b)
    return a;
}
fn2(123,'hello')
interface Inter{
    length:number;
}

//<T extends Inter> 表示泛型T必须时Inter实现类（子类）
function fn3<T extends Inter>(a:T):number{
    return a.length;
}

class MyClass<T>{
    name:T;
    constructor(name:T){
        this.name=name;
    }
}
const mc=new MyClass<string>("啥的hi上帝")
fn3('123567')