首页 > 其他分享 >TS系列（4）：常用类型之类、抽象类和接口

TS系列（4）：常用类型之类、抽象类和接口

时间：2024-09-27 23:20:49浏览次数：9  
标签：name age number 接口 TS Person 抽象类 public string

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

TS系列（1）：TS是什么？如何使用？

TS系列（2）：类型声明、类型推断和类型总览

TS系列（3）：常用类型（详细）

话接上回，今天分享下类、属性修饰符、抽象类和interface（接口）

10.复习类相关知识

本小结复习类相关知识，如果有相关基础可以跳过。

class Person {
    // 属性声明
    name: string
    age: number

    // 构造器
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }

    // 方法
    speak() {
        console.log(`我叫：${this.name},今年${this.age}岁`)
    }
}

// Person 实例
const p1 = new Person('张三', 20)

// Student 继承 Person
class Student extends Person {
    grade: string
    // 若 Student 类不要额外属性，Student的构造器可以省略
    constructor(name:string, age: number, grade: string) {
        super(name, age)
        this.grade = grade
    }
    // 重写父类继承的方法
    override speak() {
        console.log(`我是学生，我叫：${this.name},今年${this.age}岁，我在读${this.grade}年级`)
    }
    // 子类自己的方法
    study() {
        console.log(`${this.name}正在努力学习中...`)
    }
}

11.属性修饰符

修饰符

含义

具体规则

public

公开的

可以被：类内部、子类、类外部访问

protected

受保护的

可以被：类内部、子类访问

private

私有的

可以被：类内部访问

readonly

只读属性

属性无法修改

public修饰符

class Person {
    // name写了public修饰符，age没写修饰符，但默认是public修饰符
    public name: string
    age: number
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
    speak() {
        // 类的【内部】可以访问public修饰的name和age
        console.log(`我叫：${this.name},今年${this.age}岁`)
    }
}

const p1 = new Person('张三', 20)
// 类的【外部】可以访问public修饰的属性
console.log(p1.name)

class Student extends Person {
    constructor(name:string, age: number, grade: string) {
        super(name, age)
    }
    study() {
        // 子类可以访问父类中public修饰的：name/age
        console.log(`${this.age}岁的${this.name}正在努力学习中...`)
    }
}

属性的简写形式

简写前

class Person {
    public name: string
    public age: number
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
}

简写后

class Person {
  constructor(public name: string, public age: number) {}
}

protected

class Person {
  // name和age是受保护属性，不能在类外部访问，但在【类】和【子类】中访问
  constructor(
    protected name: string,
    protected age: nuber
  ) {}
  // getDetails是受保护方法，不能在类外部访问，但可以在【类】和【子类】中访问
  protected getDetails(): string {
    // 类中能访问受保护的name和age属性
    return `我叫：${this.name},今年${this.age}岁`
  }
  // introduce 是公开方法，类、子类和类外部都能访问
  introduce() {
    // 类中能访问受保护的 getDetails 方法
    console.log(this.getDetails())
  }
}

const p1 = new Person('张三', 20)
// 可以在类外部访问introduce
p1.introduce()

// 以下代码均报错
// p1.getDetails()
// p1.name
// p1.age

class Student extends Person {
  study() {
    console.log(this.getDetails())
    console.log(`${this.name}正在努力学习`)
  }
}

const s2 = new Student('小明', 8)
s1.study()

privated

class Person {
  constructor(
    public name: string,
    public age: number,
    private IDCard: string
  ) { }
  private getPrivateInfo() {
    return `身份证号码为：${this.IDCard}`
  }
  getInfo() {
    return `我叫：${this.name}, 今年刚满${this.age}岁`
  }
  getFullInfo() {
    return this.getInfo() + ', ' + this.getPrivateInfo()
  }
}

const p1 = new Person('小明', 18, '423516200012135569')
p1.name
p1.age
p1.IDCard // Property 'IDCard' is private and only accessible within class 'Person'
console.log(p1.getInfo())
console.log(p1.getFullInfo())
p1.getPrivateInfo() // Property 'getPrivateInfo' is private and only accessible within class 'Person'

readonly 修饰符

class Car {
  constructor(
    public readonly vin: string, // 车辆识别码，只读属性
    public readonly year: number, // 出厂年份，只读属性
    public color: string,
    public sound: string
  ) { }

  // 打印车辆信息
  displayInfo() {
    console.log(`
      识别码：${this.vin},
      出厂年份：${this.year},
      颜色：${this.color},
      音响：${this.sound}
    `)
  }
}

const car = new Car('hdyejdukeikduejuhf', 2018, '黑色', 'Bose音响')
car.displayInfo()

// 修改vin和year都会报错
car.vin = 'hdyejudkisessedkuhi'
car.year = 2000

12.抽象类

  • 概述：抽象类是一种无法被实例化的类，专门用来定义类的结构和行为，类中可以写抽象方法，也可以写具体实现。抽象类主要用来为其派生类提供一个基础结构，要求其派生类必须实现其中的抽象方法。
  • 简记：抽象类不能实例化，其意义是可以被继承，抽象类里可以有普通方法，也可以有抽象方法。

通过以下场景，理解抽象类：

我们定义一个抽象类package，表示所有包裹的基本结构，任何包裹都具有重量属性weight，包裹都需要计算运费。但不同类型的包裹（如标准速度、特快专递）都有不同的运费计算方式，因此用于计算运费的calculate方法是一个抽象方法，必须由具体的子类来实现。

abstract class Package {
  // 构造方法
  constructor(public weight: number) {}
  // 抽象方法
  abstract calculate(): number
  // 具体方法
  printPackage() {
    console.log(`包裹重量为：${this.weight}kg，运费为：${this.calculate()}元`)
  }
}
class StandardPackage extends Package {
  constructor(
    weight: number,
    public unitPrice: number
  ) { super(weight) }
  calculate(): number {
    return this.weight * this.unitPrice
  }
}

StandardPackage类继承了Package，实现了calculate方法：

class ExpressPackage extends Package {
  constructor(
    weight: number,
    public unitPrice: number,
    public additional: number
  ) { super(weight) }
  calculate(): number {
    if (this.weight > 10) {
      return 10 * this.unitPrice + (this.weight - 10) * this.additional
    } else {
      return this.weight * this.unitPrice
    }
  }
}

const e1 = new ExpressPackage(13, 8, 2)
e1.printPackage()

总结：何时使用抽象类？

  1. 定义通用接口：为一组相关的类定义通用的行为（方法或属性）时。
  2. 提供基础实现：在抽象类中提供某些方法或为其提供基础实现，这样派生类就可以继承这些实现，
  3. 确保关键实现：强制派生类实现一些关键行为。
  4. 共享代码和逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。

13.interface(接口)

interface是一种定义结构的方式，主要作用是为：类、对象、函数等规定一种契约，这样可以确保代码的一致性和类型安全，但要注意interface只能定义格式，不能包含任何实现！

定义类结构

// PersonInterface接口，用于限制Person类的格式
interface PersonInterface {
    name: string
    age: number
    speak(n: number): void
}

// 定义一个类 Person，实现 PersonInterface 接口
class Person implements PersonInterface {
    constructor(
        public name: string,
        public age: number
    ) { }
    // 实现接口中的 speak 方法，注意实现speak时参数个数可以少于接口中的规定，但不能多。
    speak(n: number): void {
        for (let i = 0; i < n; i++) {
            // 打印出包含名字和年龄的问候语句
            console.log(`你好，我叫${this.name},我的年龄是${this.age}`)
        }
    }
}

// 创建一个 Person 类的实例 p1，传入名字 'tom' 和年龄 18
const p1 = new Person('tom', 18)
p1.speak(3)

定义对象结构

interface User {
  name: string
  readonly gender: string // 只读属性
  age?: number // 可选属性
  run: (n: number) => void
}

const user: User = {
  name: '张三',
  gender: '男',
  age: 18,
  run(n) {
    console.log(`奔跑了${n}米`)
  }
}

定义函数结构

interface CountInterface {
  (a: number, b: number): number
}

const count: CountInterface = (x, y) => {
  return x + y
}

接口之间的继承

一个interface继承另一个interface，从而实现代码的复用。

interface PersonInterface {
  name: string
  age: number
}

interface StudentInterface extends PersonInterface {
  grade: string
}

const stu: StudentInterface = {
  name: 'zhangsan',
  age: 25,
  grade: '高三'
}

接口可合并

interface PersonInterface {
  name: string
  age: number
}

interface PersonInterface {
  gender: string
}

const p: PersonInterface = {
  name: 'zhangsan',
  age: 18,
  gender: '男'
}

总结：何时使用接口？

  1. 定义对象的格式：描述数据模型、API响应格式、配置对象...，是开发中用的最多的场景。
  2. 类的契约：规定一个类需要实现哪些属性和方法。
  3. 自动合并：一般用于扩展第三方库的类型，这种特性在大型项目中可能会用到。

好了，分享结束，谢谢点赞，下期再见。

标签：name,age,number,接口,TS,Person,抽象类,public,string
From： https://blog.csdn.net/m0_37943716/article/details/142603944

相关文章

  • python requests模块学习
    1、模块介绍Pythonrequests是一个常用的HTTP请求库，可以方便地向网站发送HTTP请求，并获取响应结果。2、get请求示例#导入requests包importrequests#发送请求x=requests.get('https://www.run.com/')#返回http的状态码print(x.status_code)#获取响应......
  • Kubernetes 服务发现 监控Endpoints
    监控Pod之前的apiserver实际上就是一种特殊的Endpoints，现在我们同样来配置一个任务用来专门发现普通类型的Endpoint，其实就是Service关联的Pod列表，由于并不是所有的Endpoints都会提供metrics接口，所以需要我们主动告诉Prometheus去发现哪些Endpoints，当然告诉的方式有......
  • [ECharts] There is a chart instance already initialized on the dom.
    [ECharts]Thereisachartinstancealreadyinitializedonthedom.  报错解释：这个错误表示在同一个DOM元素上已经初始化了一个ECharts图表实例，而你又尝试去在同一个DOM上初始化另一个图表实例。ECharts不允许在同一个DOM上叠加多个实例。解决方法：   在尝试初始化新......
  • Echarts图表知识点汇总及请求django服务器后端跨域问题解决
    1.引入echartsvue3中通过npm引入：npminstallecharts--saveimport*asechartsfrom'echarts';//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//绘制图表myChart.setOption({title:{text:'ECha......
  • 鸿蒙(HarmonyOS)实战开发篇——基于Napi调用ArkTS/系统接口
    场景描述：app应用在native侧调用系统库/arkts模块的方法。应用经常会遇到如下的业务诉求：场景一：系统提供了ArkTS接口，但未提供对应的NDK接口，当伙伴使用C++代码实现业务逻辑时，部分系统能力需要依赖系统ArkTS接口；场景二:系统仅提供了ArkTS异步接口，未提供对应的NDK接口，当......
  • 《华为云DTSE》期刊免费下载：10个案例读懂云上架构升级策略
    本文分享自华为云社区《《华为云DTSE》期刊第四期赋能云专刊，赋能云场景下DTSE服务各类开发者的案例分享》，作者：HuaweiCloudDeveloper。 把公司的开发者平台统一在一起，是华为云所担负的任务，其最终目的是要汇聚开发者、做厚“黑土地”，支撑三大根生态的发展壮大。这也意味着，作为支......
  • 教你一招：解决微信小程序 echarts提示框tooltip圆点不显示问题
    最近在微信小程序中插入折线图时需要在提示框中添加单位，于是用了tooltip自定义提示框内容。发现设置了之后小圆点不见了，看了很多文章，有说要加params[i].marker的，有说直接写HTML的，可能是版本问题，我都没有成功。最后将解决办法记录如下：letoption={//...其他配置项......
  • AE2023下载，最新Adobe After Effects 2023 (AE2023) 一键安装无需破解
    AdobeAfterEffects，是Adobe公司开发的一款用来进行图形视频处理软件，主要适用于设计行业和视频特技行业，电视台、动画制作公司、个人后期制作工作室以及多媒体工作室也都会使用此款软件；AdobeAfterEffects可以帮助用户进行高效且精确地创建无数种引人注目的动态图形和震撼人心......
  • robots.txt写法大全和robots.txt语法的作用
    robots.txt 是一种用于与搜索引擎对话的协议文件，它告诉搜索引擎的爬虫（也称为蜘蛛或机器人）哪些页面或者文件是可以被抓取的，哪些是不可以被抓取的。这对于网站管理员来说非常重要，因为它可以帮助控制搜索引擎如何索引网站的内容。robots.txt 文件的基本语法：User-agent:定义规......
  • 电脑字体管理器 PrintMyFonts v24.8.31 免费便携版
    电脑上的字体越来越多，设计时总是找不到合适的字体？使用的软件又不能很好地展示这些字体？这时候，PrintMyFonts就能派上用场，帮助你快速找到理想的字体！PrintMyFonts是一款跨平台的字体管理工具，支持Windows、macOS和Linux系统。它能列出所有已安装的字体，甚至可以显示你自定义的句子或......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99