[TS基础]对象,类,属性

对象, 类与属性

• 一. 类 (class)
• • 1. 属性与方法
  • 2. 构造器
  • 3. 继承
  • 4.super 关键字
• 二. 抽象类与抽象方法
• 三. 接口
• 四. 属性的封装
• 五. 泛型
• 笔记说明

一. 类 (class)

• 类可以理解为对象的模型, 通过类来创建对象

1. 属性与方法

• 一个类主要包含两个部分, 属性与方法

class Person {
    
    static id: number = 9527;
    
    name: string = "iFinder";
    age: number = 24;
    
    readonly country:string = "china";

    
    
    sayGood() {
        console.log("Good !");
    }
}

const per = new Person();
per.sayGood();
console.log(per.name);
console.log(per.age);

console.log(Person.id);

2. 构造器

• 创建多个对象的时候, 我们希望在创建对象时就赋予它不同的属性, 这时就可以通过构造器来实现这样的需求

class Dog {
    name: string
    age: number
    
    constructor(name: string, age: number) {
        
        this.name = name
        this.age = age
    }
    bark() {
        alert('汪 !')
    }
}

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

    }
}

const dog1 = new Dog('dog1', 4)
const dog2 = new Dog('dog2', 5)
const dog3 = new Dog('dog3', 6)
console.log(dog1)
console.log(dog2)
console.log(dog3)

3. 继承

• 可以通过继承, 将多个类共有的属性与方法抽象出来, 作为公共的父类. 这样可以大大提高代码的利用率
• 子类直接继承父类, 可以直接拥有父类的属性与方法

(function(){
    
    
    class Animal {
        name: string 
        age: number
        constructor(name: string, age: number){
            this.name = name
            this.age = age
        }
        sayHello() {
            console.log(`${this.name} 在 叫 !`)
        }
    }

    
    
    class Dog extends Animal {
        
        run() {
            console.log(`${this.name} 在 跑!`)
        }
        
        
        sayHello() {
            console.log(`${this.name} 在 汪汪汪 !`)
        }
    }
    class Cat extends Animal {
        sayHello() {
            console.log(`${this.name} 在 喵喵喵 !`)
        }
    }
    const dog = new Dog('小黑狗', 4)
    const cat = new Cat('小花猫', 6)
    dog.sayHello()
    cat.sayHello()
})()

4.super 关键字

• 子类继承父类之后, 如果想调用父类中的属性或者方法, 可以通过 super 关键字
• 子类如果重新实现了构造器, 那么需要在自己的构造器中通过 super 调用父类的构造器

(()=>{
    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.sayHello()
        }
    }

    const dog = new Dog('小黑', 8)
    dog.sayHello()
})()

二. 抽象类与抽象方法

• 当你定义了一个公共父类, 并且只想被继承, 不想拥有具体实例的时候就可以通过 abstract 修饰, 使之成为抽象类
• 抽象类中你想定义子类必须实现的某些方法, 可以定义抽象方法

(()=>{
    
    abstract class Animal {
        name: string
        constructor(name:string) {
            this.name = name
        }

        
        
        abstract sayHello(): void
    }

    class Dog extends Animal {
        
        sayHello(): void {
            console.log(`${this.name} 在 汪汪汪 !`)
        }
    }
    const dog = new Dog('小黑')
    dog.sayHello()
})()

三. 接口

(()=>{
    
    type myType = {
        name: string,
        age: number
    }

    
    interface myInterFace {
        name: string
        age: number
    }

    
    interface myInterFace {
        gender: string
    }

    
    interface inter{
        name: string
        sayHello(): void
    }

    
    class MyClass implements inter {
        name: string = "iFinder"
        sayHello(): void {
            
        }
    }
})()

四. 属性的封装

• TS 的类中的属性, 如果不加以修饰的话就是任何人都能访问与修改的, 这样就造成的属性数据的不安全
• 通过封装, 可以将属性一定程度上的保护起来
• 封装后只提供给调用方相应的方法, 这样设置与获取数据的方法就是开发者可控的, 提高了数据的安全性

(()=>{
    
    class Person {
        
        private _name:string
        private _age:number

        constructor(name:string, age:number) {
            this._name = name
            this._age = age
        }

        
        getName():string {
            return this._name;
        }
        
        setName(name:string) {
            this._name = name;
        }
        
        setAge(age:number) {
            if(age >= 1) {
                this._age = age;
            }
        }

        
        get age():number {
            return this._age >= 1 ? this._age : 1;
        }
        set age(age:number) {
            if(age >= 1) {
                this._age = age;
            }
        }
    }

    
    const p = new Person("iFinder", 25);
    console.log(p.age);  
    p.age = -1;  
    console.log(p.age);  
})()

五. 泛型

• 定义函数或者声明一个类的时候如果暂时不能确定具体的类型, 但是又想保持某种类型的统一, 不想通过 any 破环 TS 的类型检查机制, 就可以通过指定泛型的方式来达到这个要求

(()=>{
    
    function fnV>(a: V): V {
        return a;
    }

    
    let a:number = fn(10)
    
    let s:string = fnstring>('iFinder')

    
    function fn1K, T>(a: T, b: K): T {
        return a;
    }

    
    interface Inter{
        length:number
        getLength(): number
    }
    abstract class Animal {
        info:string;
        constructor(private _name:string, private _age:number) {
            this.info = `name: ${_name}, age: ${_age}`
        }
        get name(){
            return this._name
        }
        set age(age:number) {
            this._age = age
        }
    }

    function fn2T extends Inter, K extends Animal>(a: T, b: K): K {
        return b
    }

    
    class MyClassT>{
        constructor(public name:T) {}
    }
    
    let my = new MyClassstring>("iFinder")
})()

笔记说明

笔记 markdown 文件 + 项目源码
B 站对应视频