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

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

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

访问修饰符

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

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

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

实例:

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修饰符能够直接使用在构造函数的参数中。相当于在类中定义该属性的同时赋值。只读属性的用法在对象那一节已经介绍过了。

原版本:

class Person {
    public name;
    public constructor(name) {
        this.name = name
    }
}

使用参数属性的简洁版:

class Person {
    public constructor(public name) { }
}

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

抽象类

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

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

抽象类的使用:

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}

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

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-大好きなのに

类限制变量、函数类型

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关键字实现

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接口,然后同时实现两个接口。

interface Eat {
    eat(): void
}

interface Sleep {
    sleep(): void
}

class Person implements Eat, Sleep {}

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

接口继承接口

  • 类可以继承类,接口也可以继承接口。
  • 类只能继承一个类,但是接口可以继承多个接口
interface Eat {
    eat(): void
}

interface Drink {
    drink(): void
}

interface Sleep {
    sleep(): void
}

interface Normal extends Eat, Drink, Sleep { }
目录
相关文章
|
6月前
|
JavaScript
​​​​Typescript 接口 和继承 数组处理
ts的基础数据类型,可用来处理一般数据,但是碰到后台传入的复杂对象数组的时候,我们可以使用ts中的接口来定义处理
59 0
|
6月前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
41 0
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
38 1
|
21天前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
3月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
4月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
3月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
55 0
|
4月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
74 0
|
5月前
|
JavaScript 索引 前端开发
9.【TypeScript 教程】接口(Interface)
9.【TypeScript 教程】接口(Interface)
58 4