前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >攀爬TS之路(七) 类与接口

攀爬TS之路(七) 类与接口

作者头像
赤蓝紫
发布2023-03-16 14:32:28
3630
发布2023-03-16 14:32:28
举报
文章被收录于专栏:clz

攀爬TS之路(七) 类与接口

这里不会赘述JS中的类的用法,而是单刀直入,直接来TS中的类的用法。

访问修饰符

先提一嘴,JS中的类有私有属性,在属性名之前使用#表示。私有属性只能在类的内部使用

代码语言:javascript
复制
class Person {
    #name = 'clz'

    get val() {
        return this.#name
    }
}

const person = new Person()
console.log(person.val)

有学过其它语言的可能就会用的有点不太习惯,因为很多语言(指本人课程教的,C++、Java)使用的访问修饰符是publicprivateprotected。而TS可以使用这三种访问修饰符。

  • public:修饰的属性和方法是公有的,可以在任何地方被访问。默认都是public
  • private:私有的,只能在声明该属性的类中访问,即也不能被子类访问
  • protected:受保护的,和private类似,不过,能被子类访问
public

修饰的属性和方法是公有的,可以在任何地方被访问。

实例:

代码语言:javascript
复制
class Person {
    public name;
    public constructor(name) {
        this.name = name
    }
}

class Student extends Person {
    public grade;

    public constructor(name, grade) {
        super(name)

        console.log(this.name)
        this.grade = grade
    }
}


const student = new Student('czh', 3)      // czh

const person = new Person('clz')
console.log(person.name)                    // clz
private

只能在声明该属性的类中访问,即也不能被子类访问。

实例:把上面的例子中,name的修饰符变成private即可。

protected

private类似,不过,能被子类访问

参数属性

访问修饰符和readonly修饰符能够直接使用在构造函数的参数中。相当于在类中定义该属性的同时赋值。只读属性的用法在对象那一节已经介绍过了。

原版本:

代码语言:javascript
复制
class Person {
    public name;
    public constructor(name) {
        this.name = name
    }
}

使用参数属性的简洁版:

代码语言:javascript
复制
class Person {
    public constructor(public name) { }
}

另外,如果需要同时使用访问修饰符和readonly修饰符的话,访问修饰符要在readonly修饰符之前,如public readonly name

抽象类

abstract用于定义抽象类和其中的抽象方法。对一个学过Java的人来说,就是面向对象这一块,TS和Java感觉上就是一样的。

抽象类主要是一些没有足够信息来描绘一个具体的对象的类。所以抽象类必须被继承获取足够信息,才能被使用抽象类不能被实例化对象,但是类的其他功能依然存在。

抽象类的使用:

代码语言:javascript
复制
abstract class Person {
    public constructor(public name) { }
}

class Student extends Person {
    public grade;
    public constructor(name, grade) {
        super(name)
        this.grade = grade
    }
}


const student = new Student('clz', 3)
console.log(student)    // Student {name: 'clz', grade: 3}

抽象类还可以有抽象方法,抽象方法只能出现在抽象类中,子类必须实现抽象方法

代码语言:javascript
复制
abstract class Person {
    public constructor(public name) { }

    public abstract listen()
}

class Student extends Person {
    public grade;
    public constructor(name, grade) {
        super(name)
        this.grade = grade
    }

    // public listen() {
    //     console.log('Kylee-大好きなのに')
    // }
}


const student = new Student('clz', 3)
student.listen()    // Kylee-大好きなのに

类限制变量、函数类型

代码语言:javascript
复制
class Person {
    public name: string;
    public constructor(name: string) {
        this.name = name
    }

    getName(): string {
        return this.name
    }
}


const person = new Person('clz')
console.log(person.getName())   // clz

类与接口

一般来说,一个类只能继承自另一个类。(C++可以多继承)

但是,有时候不同类之间有一些共有特性,可以将它们封装成接口。

类实现接口

就拿前面的Person类举例子,所有人都需要吃、睡,即可以封装一个Normal接口,包含必须的行为。然后通过implements关键字去实现接口。接口只是声明,需要类通过implements关键字实现

代码语言:javascript
复制
interface Normal {
    eat(): void
    sleep(): void
}

class Person implements Normal {
    public name: string;
    public constructor(name: string) {
        this.name = name
    }

    eat() {
        console.log('吃')
    }

    sleep() {
        console.log('睡')
    }
}


const person = new Person('clz')

person.eat()    // 吃

类实现多个接口

还可以把Normal接口分解成Eat接口和Sleep接口,然后同时实现两个接口。

代码语言:javascript
复制
interface Normal {
    eat(): void
    sleep(): void
}

class Person implements Normal {
    public name: string;
    public constructor(name: string) {
        this.name = name
    }

    eat() {
        console.log('吃')
    }

    sleep() {
        console.log('睡')
    }
}


const person = new Person('clz')

person.eat()    // 吃

上面的Person类中省略了代码,代码和Normal接口的案例一样。

接口继承接口

  • 类可以继承类,接口也可以继承接口。
  • 类只能继承一个类,但是接口可以继承多个接口
代码语言:javascript
复制
interface Eat {
    eat(): void
}

interface Drink {
    drink(): void
}

interface Sleep {
    sleep(): void
}

interface Normal extends Eat, Drink, Sleep { }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 攀爬TS之路(七) 类与接口
      • 访问修饰符
      • 参数属性
      • 抽象类
      • 类限制变量、函数类型
    • 类与接口
      • 类实现接口
      • 类实现多个接口
      • 接口继承接口
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档