首页技术栈归档照片墙音乐日记随想收藏夹友链留言关于

TS高级类型

写作时间:2026-07-08

TS高级类型

Typescript接口

(function () {

    //定义一个接口
    interface myInterface{
        name:string,
        age:number
    }

    const obj:myInterface={
        name:"张三",
        age:12
    }
    /**
     * 接口可以在定义类的时候去限制类的结构
     * 接口中的所有的属性都不能有实际的值
     * 接口只定义对象的结构,而不考虑实际值
     * 在接口中所有的方法都是抽象方法
     */
     interface myIter{
         name:string;

         sayHi():void;
    }

    /**
     * 定义类时,可以使类去实现一个接口,
     * 实现接口就是使类满足接口的要求
     */
    class myClass implements myIter{
        name: string;

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

        sayHi(): void {
            console.log("大家好")
        }

    }
})()

Typescript属性的封装

(function () {
    class Person{
        /**
         * private(私有的)
         * public(公共的)默认值
         * protected(当前类和子类访问)
         */
       private _name:string;
       private _age:number;

        constructor(name:string,age:number) {
            this._name=name
            this._age=age
        }
        //只读方法
        get getName(): string {
            return this._name;
        }
        //只写方法
        set setName(value: string) {
            this._name = value;
        }

        get getAge(): number {
            return this._age;
        }

        set setAge(value: number) {
            if (value>0){
                this._age = value;
            }
        }
    }
    const  person=new Person("张三",14)

    /**
     * 现在属性是在对象中设置的,属性可以任意的被修改,
     * 属性可以任意被修改将会导致对象中的数据变得非常不安全
     */
    person.setName="李四"
    person.setAge=-1000

    console.log(person)
})()

Typescript泛型

/**
 * 在定义函数或是类时,如果遇到类型不明确就可以使用泛型
 */

function fu<T>(a:T):T {
    return a;
}

let result=fu(11);//不指定类型,TS会自动推断类型

let result2=fu<string>("hello")//指定泛型的类型

/**
 * 指定多个类型
 */
function fn2<T,K>(a:T,b:K):T {
    console.log(b)
    return  a;
}
fn2<number,string>(123,"hello")

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

fn3("张三");
//对象类型的泛型
class  MyClass<T> {
    name:T;
    constructor(name:T) {
        this.name=name;
    }
}
const mc=new MyClass("张三");
avatar

yuanyourdomain

写代码,做研究,记录生活。

RECOMMENDED

MyBatis 动态 SQL

2026-07-08

Nginx 基础入门

2026-07-08

Maven 多模块与私服

2026-07-08