一篇文章带你掌握TypeScript中的类和对象

发布时间:2023年12月23日

前言

TypeScript 由 Microsoft 开发,是一种开源的、面向对象的编程语言。当然,它是 JavaScript 的一个强大的语法超集,并改进了该语言的可选静态类型。其中最重要的一点就是TypeScript 支持面向对象的所有特性。

在JavaSript中,可以说一切皆为对象,当我们用面向对象的思想进行封装代码时,不论是用构造函数,对象,还是ES6新增的class时,其实本质上都是在使用JavaScript的Object对象,这就要求在进行一些比较复杂的对象封装时,需比较熟悉对象的原型链等原理,才能封装出简洁,易读,易扩展的对象。面向对象的三大特征为继承、封装、多态。JavaScript虽然可以模拟实现继承和封装,但无法良好的模拟实现多态。

ES5实现类代码示例:

// 定义一个Person类
function Person(name, age) {
    this.name = name; // 公有属性
    var privateAge = age; // 私有属性(通过闭包保存)
    
    // 获取年龄的公共方法
    this.getAge = function() {
        return privateAge;
    };
}
 
// 创建一个新的Person对象
var person1 = new Person("张三", 20);
console.log(person1.name); // 输出 "张三"
console.log(person1.age); // undefined (无法直接访问私有属性)
console.log(person1.getAge()); // 输出 20 (调用公共方法获取私有属性值)

ES6实现类代码示例:

class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    // 方法
    say(){
        console.log('我能说话')
    }
}
// 实例化
let zs = new Person('张三', 24)
// 实例化
let ls = new Person('李四', 24)
console.log(zs)
console.log(ls)

TS实现类代码示例:

class Person{
    public name:string;
    private age:number;

    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    public setAge(age:number){
        this.age = age;
    }
    public getAge():number{
        return this.age;
    }
}

let person = new Person("xiaoming",20);
console.log(person.name);
console.log(person.getAge());

ES6引入了类的概念,为 JavaScript 增加了面向对象编程的能力。ES6 中的类是一种语法糖,本质上仍然是基于原型的继承。使用类可以定义构造函数、实例方法和静态方法,并且支持继承和类之间的关系。TypeScript新增了类、接口、泛形等等这些特性。相比“灵活自由”的JavaScript式封装,运用这些特性将会使初学者写的代码更加规范,更易于阅读和扩展,降低了一些封装的门槛,同时也方便了一些熟悉面向对象编程的开发者进行开发,TypeScript相比ES6具有更强的类型系统和其他功能 ,并且而对于大型的项目开发,这种面向对象的开发方式能有助于团队合作,提高开发人员的工作效率。

?对于学过Java等面向对象的小伙伴来说,学习TypeScript是非常轻松的,接下来,我就从一下常见属性来讲解TypeScript面向对象特性。

1. TypeScript中的类和类的实例化

定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):?

字段?:?字段是类里面声明的变量。字段表示对象的有关数据。

构造函数?:类实例化时调用,可以为类的对象分配内存。

方法?:?方法为对象要执行的操作。

class {

? ? ? ? [修饰符] 字段名:[字段类型];

? ? ? ? constructor([参数1:类型,....]){

? ? ? ? ? ? ? ? // 执行一些初始化操作

????????},

? ? ? ?[修饰符] 方法名([参数1:类型,....):返回值类型{

? ? ? ? ? ? ? ? // 方法体....

????????}

}

例如:

class Person{
    public name:string;
    private age:number;

    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    public setAge(age:number){
        this.age = age;
    }
    public getAge():number{
        return this.age;
    }
}

let person = new Person("xiaoming",20);
console.log(person.name);
console.log(person.getAge());

2. 类的继承,以及类继承后super的使用

class User{
    private name:string;

    constructor(name:string){
        this.name = name;
    }
    public setName(name:string):void{
        this.name = name;
    }
    public getName():string{
        return this.name;
    }
}

class Admin extends User{
    private password:string;

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


    public setPassword(password:string){
        this.password = password;
    }
    public getPassword():string{
        return this.password;
    }
}

let user1 = new User("xujingliang");
console.log(user1.getName());

let admin = new Admin("xujingliang","123456")
console.log(admin.getName());
console.log(admin.getPassword());

3. 类继承后的方法重写

类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写。

重写是子类继承父类之后,方法名称,参数名称,返回值类型全部相同只能修改方法体中的相关操作。

重写的优点:在拥有父类方法特征的同时,自身也可以有一些特有的特征

class User{
    private name:string;
    constructor(name:string){
        this.name = name;
    }
    public setName(name:string):void{
        this.name = name;
    }
    public getName():string{
        return this.name;
    }
    public say():string{
        return "My name is "+this.name;
    }
}

class Admin extends User{
    private password:string;

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


    public setPassword(password:string){
        this.password = password;
    }
    public getPassword():string{
        return this.password;
    }
    public say():string{
        return "My name is "+super.getName()+" and my password is "+this.password;
    }
}

let user = new User("xujingliang");
console.log(user.say());

let admin = new Admin("xujingliang","123456")
console.log(admin.say());

上面的代码示例中,我们先定义了一个User用户类,又定义了一个Admin管理员类。Admin类继承User类,并对User类的say()方法进行重写。?

4. static关键字的使用

使用static生命的类字段或者方法不需要实例化对象,可以直接通过类名点字段名称或者类名点方法名称直接调用。

class Person{
    public name:string;
    private age:number;
    static mark:string = "普通用户"
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    public setAge(age:number){
        this.age = age;
    }
    public getAge():number{
        return this.age;
    }
}
console.log(Person.mark);

示例代码中,声明了一个static字段mark,直接使用Person.mark就可以访问。?

5. instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型,如果是返回 true,否则返回 false。

class User{
    private name:string;

    constructor(name:string){
        this.name = name;
    }
    public setName(name:string):void{
        this.name = name;
    }
    public getName():string{
        return this.name;
    }
}

class Admin extends User{
    private password:string;

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


    public setPassword(password:string){
        this.password = password;
    }
    public getPassword():string{
        return this.password;
    }
}

let user1 = new User("xujingliang");
let admin = new Admin("xujingliang","123456")


console.log(user1 instanceof User);
console.log(user1 instanceof Admin);
console.log(admin instanceof Admin);
console.log(admin instanceof User);

注意:示例代码中,Admin类继承User类,因此用Admin示例化的对象既属于User类有属于Admin类

6. 访问控制修饰符

类成员可访问性定义了类的成员允许在何处被访问。和Java一样TypeScript也为类成员提供了三种可访问性修饰符。

1. public:类的公有成员没有访问限制,可以在当前类的内部、外部以及派生类的内部访问。类的公有成员使用public修饰符标识。在默认情况下,类的所有成员都是公有成员。

2. protected:类的受保护成员允许在当前类的内部和派生类的内部访问,但是不允许在当前类的外部访问。类的受保护成员使用protected修饰符标识。

3. private:类的私有成员只允许在当前类的内部被访问,在当前类的外部以及派生类的内部都不允许访问。类的私有成员使用private修饰符标识。

7. 类和接口

类可以实现接口,使用关键字 implements,并将 interest 字段作为类的属性使用。

interface Person{
    name:string
}


class User implements Person{
    name:string;

    constructor(name:string){
        this.name = name;
    }
    public setName(name:string):void{
        this.name = name;
    }
    public getName():string{
        return this.name;
    }
}

class Admin extends User{
    private password:string;

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


    public setPassword(password:string){
        this.password = password;
    }
    public getPassword():string{
        return this.password;
    }
}

let user1 = new User("xujingliang");
let admin = new Admin("xujingliang","123456")

文章来源:https://blog.csdn.net/qq_41765777/article/details/135166367
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。