TS类,接口,泛型的简介

// 1.类的属性和方法
class Dog {
    name: string = "旺财";
    age: number = 2;

    shout() {
        console.log("汪汪汪")
    }
}

let dog = new Dog()

// 2.类的构造函数(用于给类中的属性设定初始值,在创建类的实例时会被触发)
class Cat {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;                   //this指的是此类的实例
        this.age = age;
    }

    shout() {
        console.log("喵喵喵")
    }
}

let cat = new Cat("咪咪", 3)

// 3.类的继承
// 开发时可能存在类之间有许多共用的属性和方法,这个时候就需要一个父类把这些方法提取出来用于子类的继承
class Animal {
    name: string;
    age: number;

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

    shout() {
        console.log("动物的叫声")
    }
}

class Bird extends Animal {
    skill: string;
    constructor(name: string, age: number, skill: string) {
        super(name, age)                    //super指的是该类的父类,当需要添加新的属性是,需要重写构造函数,这个时候就需要执行super,相当于把父类的构造函数执行一遍
        this.skill = skill
    }

    shout() {
        console.log("啾啾啾")       //重写父类中的shout函数
    }
}

let bird = new Bird("小红", 2, "飞翔");

// 4.抽象类(有时候我们不希望用于继承的父类能创建实例,只能用于继承,这个时候就需要抽象类)
abstract class Food {        //在该类前加上abstract,该类就会变成抽象类,不能创建实例
    name: string;
    colour: string;

    constructor(name: string, colour: string) {
        this.name = name;
        this.colour = colour;
    }
}

// 5.接口(用来定义一个类或者对象的结构)
interface myInterface {
    name: string;
    age: number
}

let obj: myInterface = {
    name: "琳琳",
    age: 15
}

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

class myClass implements myInter {
    name: string;

    constructor(name: string) {
        this.name = name
    }

    sayHello() {
        console.log("myInter接口的实现")
    }
}

// 6.属性封装
// 属性修饰符有三种 public,private,protected。不写修饰符的情况下默认为 public
// private 说明该属性为该所在类私有,只有在该类中才能被访问,无论是继承还是创建实例都不能被访问
// protected 修饰符设置的属性只能在当前类和继承当前类的子类中使用
// 属性为私有后外部就不能随便修改该属性,这个时候我们需要设置相应的getter和setter方法来获取和修改属性,这样可以将属性的修改控制在可控范围
class Person {
    // private name:string;
    // private age:number

    constructor(private _name: string, private _age: number) {   //ts语法糖,可以简化属性和构造函数
        // this.name = name
        // this.age = age
    }

    // 类的getter和setter方法

    // getName(){
    //     return this.name
    // }

    // setName(value:string){
    //     this.name = value
    // }

    // getAge(){
    //     return this.age
    // }

    // setAge(value:number){
    //     this.age = value
    // }

    // TS的getter和setter方法有简写

    get name() {
        return this._name
    }

    set name(value: string) {
        this._name = value
    }

    get age() {
        return this._age
    }

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

    sayHello() {
        console.log("你好")
        console.log(`我的名字是${this.name}`)
    }
}

let person = new Person("小明", 15)
// console.log(person.getName())   // 获取person对象的名字
// person.setName("小华")      // 修改对象的名字

console.log(person.name)    // 获取person对象的名字
person.name = "小华"        // 修改对象名称

// 7.泛型(有些情况下我们并不知道所有参数和返回的类型,这个时候就需要泛型)
// 定义函数泛型
function fn<T>(name: T): T {       // 这表示该函数定义了一个泛型为T,name的类型也是泛型T,返回值的类型也为泛型T
    return name
}

fn(10); // 不指定泛型,TS会自动推测出泛型为number

fn<string>("你好世界"); // 指定泛型为string

// 泛型可以指定多个
function fn2<T, K>(name: T, age: K): T {
    return name
}

fn2("小明", 12)
fn2<string, number>("小明", 12)

// 泛型不只是string,number之类的,也可以是接口的实现
interface Inter{
    length:number
}

function fn3<T extends Inter>(a:T):number{
    return a.length
}

fn3([1,23,4])

// 定义类的泛型
class myClass2<T>{
    constructor(private _name:T){}

    get name(){
        return this._name
    }

    set name(value:T){
        this._name = value
    }
}

 

posted @ 2024-05-23 22:45  布偶123  阅读(2)  评论(0编辑  收藏  举报