TS類，介面，泛型的簡介

布偶123發表於2024-05-23
泛型
// 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
    }
}

相關文章