【typescript】面向对象(下篇),包含接口,属性的封装,泛型

news2024/11/13 10:03:46

假期第八篇,对于基础的知识点,我感觉自己还是很薄弱的。
趁着假期,再去复习一遍

面向对象:程序中所有的操作都需要通过对象来完成

计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体。比如照片是对一个具体的人的抽象,汽车模型是对具体汽车的抽象等。

在程序中所有的对象被分成两个部分,数据和功能。以人为例,人的姓名,性别,年龄,身高,体重等属于数据,人可以走路,说话,吃饭,睡觉这些属于人的功能,数据在对象中被称为属性,而功能称之为方法

1、接口

接口与类型声明很相似,类型声明使用type关键字定义,接口(Interface)使用Interface关键字定义

类型声明可以描述一个对象的类型,对对象进行限制,可以用来定义基本类型、联合类型、交叉类型、元组类型等

type myType = {
    name: string,
    age:number
}

const obj: myType = {
    name: '莲花',
    age:38
}

类型声明,相同的名只能声明一次

在这里插入图片描述

接口同样可以描述一个对象的类型,对对象进行限制

接口也可以当作类型声明去使用,接口也是用来定义一个类结构,用来定义一个类中应包含哪些属性和方法,多了少了都会波浪线提示

interface myInterface {
    name: string,
    age:number
}

const obj: myInterface = {
    name: '莲花',
    age:38
}

但是接口可以重复声明
在这里插入图片描述
接口主要用于描述对象的结构和类型,因此更适用于被实现或继承的情况。
接口可以在定义类的时候去限制类的结构
接口中的所有属性都不能有实际的值
接口只定义对象的结构,而不考虑实际的值
在接口中所有方法都是抽象方法

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

接口支持一些类型声明不支持的特性,例如可选属性、只读属性、函数类型等。

interface Person {
  name: string;
  age?: number; // 可选属性
  readonly id: number; // 只读属性
  sayHello(): void; // 函数类型
}

类型声明不支持定义可选属性、只读属性等,但支持联合类型、交叉类型等高级类型的定义,比接口更加灵活。

type Person = {
  name: string;
  age: number;
} & {
  gender: 'male' | 'female'; // 交叉类型
} | {
  gender?: string; // 联合类型
};

类型声明主要用于定义类型别名和复杂类型

type Age = number;

type Person = {
  name: string;
  age: Age;
};

type Gender = 'male' | 'female';

type PersonInfo = {
  name: string;
  age: Age;
  gender: Gender;
};

2、属性的封装

为什么需要属性的封装?当通过class定义类,通过实例对象可以随意修改属性,对于一些特定的属性,比如钱,比如年龄,都不应该被随意的修改,属性如果可以任意被修改,将导致对象中的数据变得非常不安全


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

}

const person1 = new Person('莲花', 18)
person1.name = '楼楼'
person1.age = -38
console.log(person1, 'person1')

很显然年龄不应该是负数,但是因为对象属性可以任意修改,如果有需要用到年龄做计算的地方,一定是会出错的。
那如果不希望被随意修改,可以在属性前添加属性的修饰符
在这里插入图片描述
访问修饰符包括三种:

public:公共的,可以在类的内部和外部访问,默认值为 public。
private:私有的,只能在类的内部访问(修改)。
protected:受保护的,只能在类的内部和派生类中访问。

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

  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  public sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

class Student extends Person {
  public grade: number;

  constructor(name: string, age: number, gender: string, grade: number) {
    super(name, age, gender);
    this.grade = grade;
  }

  public study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const person = new Person('Alice', 18, 'female');
console.log(person.name); // 编译错误,name 是 private 属性,只能在类的内部访问
console.log(person.age); // 编译错误,age 是 protected 属性,只能在类的内部和派生类中访问
console.log(person.gender); // 可以访问,gender 是 public 属性
person.sayHello(); // 可以访问,sayHello 是 public 方法

const student = new Student('Bob', 16, 'male', 10);
console.log(student.name); // 编译错误,name 是 private 属性,只能在类的内部访问
console.log(student.age); // 编译错误,age 是 protected 属性,只能在类的内部和派生类中访问
console.log(student.gender); // 可以访问,gender 是 public 属性
student.sayHello(); // 可以访问,sayHello 是 public 方法
console.log(student.grade); // 可以访问,grade 是 public 属性
student.study(); // 可以访问,study 是 public 方法

如果想获取Person 中定义为私有属性的name,可以通过定义方法,向外暴露属性和修改属性,虽然同样可以修改,但是属性的访问权是内部定的,暴露出来才可以访问,不暴露就是私有属性

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

    constructor(name: string, age: number, gender: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    public sayHello() {
        console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
    }
    //定义方法,用来获取name属性
    getName() {
        return this.name
    }
    //定义方法,用来设置name属性,从外面传入value
    setName(value:string) { 
     this.name = value
    }
}

const person = new Person('Alice', 18, 'female');
person.getName(); // 可以访问,间接的拿到name属性
person.setName('张丫丫')

上面提到的年龄不可以设置负数,也就可以通过方法进行限制
getter方法用来读取属性,setter方法用来设置属性,它们被称为属性的存取器

      getAge() { 
        return this.age
       }
    setAge(value: number) {
        //先判断年龄是否合法
        if (value >= 0) { 
          return this.age = value
        }
    }

3、泛型

泛型是一种在编译时还不确定具体类型的变量或函数。使用泛型可以增加代码的灵活性和可重用性,使代码更加通用化

假如我们知道参数的类型,方法的返回值类型,可以这样写:

function fn(a: number): number { 
    return a 
}
fn(1)

假如有些情况下,不知道参数和返回的具体类型是什么,类型可以写成any,确实可以,但是any实际上会关闭掉ts中的类型检查
参数是any,返回值是any,就有可能参数是字符串,返回值是数值

function fn(a: any): any{ 
    return a 
}
fn(1)

所以在定义函数或类的时候,类型不明确就可以使用泛型
在方法名后面用尖括号,大写的T或者任意大写字母都可以
在这里插入图片描述
在这里插入图片描述
泛型T只有在函数执行的时候才知道具体是什么类型
两种方法调用:

function fn<T>(a: T): T { 

    return a 
}

// 方法一:直接调用,不知道泛型,TS也可以自动对类型进行推断
fn(1)
// 方法二:手动指定泛型,如果有很复杂的情况,类型推断无法推断的时候
fn<string>('1')

泛型可以指定多个

function fn2<T,K>(a: T,b:K): T { 
console.log(b);

    return a 
}

fn2(10,'嘻嘻嘻')
或
fn2 <number,string>(10,'嘻嘻嘻')

如果想限制泛型的范围,定义一个接口,希望泛型是实现Inter接口的类

//T extends Inter 表示泛型必须是Inter的实现类(子类)

传参的时候要有length属性,传数字没有会提示类型’number’的参数不能赋值给类型’Inter’的参数,因为数字里没有length
在这里插入图片描述
传字符串或有length属性的对象就可以
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1061562.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大恒IFrameData IImageData转bmp HObject Mat

大恒工业相机采集的帧数据转为其他8bit图像格式 C#转为bmp格式转为Halcon的HObject格式转为OpenCVSharp的Mat格式 回调采集图像的数据类型为IFrameData&#xff0c;单帧采集的数据类型为IImageData&#xff0c;两者的区别为IImageData类多了一个**Destroy()**方法 C# 转为bm…

floyd算法细节

这个不是一篇学习性文章 主要是针对这几天思考的问题进行一些回答 floyD在计网和数据结构和图模型中有广泛的应用算法 很简单但是其中蕴含的原理值得细究。 弗洛伊德算法(Floyd)主要针对多源最短路径,且可以解决路径中有负权的情况(不包含负权回路),但是迪杰斯特拉算法只…

mycat实现mysql读写分离

架构图&#xff1a; 视频地址

逐步解决Could not find artifact com:ojdbc8:jar:12

Could not find artifact com:ojdbc8:jar:12 in central (https://repo.maven.apache.org/maven2) 原因&#xff1a; ojdbc8:jar:12 属于Oracle 数据库链接的一个程序集&#xff0c;缺失的话很有可能会影响数据库链接&#xff0c;蝴蝶效应产生不可预测的BUG&#xff01;但是版…

typescript开发环境搭建

typescript是基于javascript的强类型标记性语言&#xff0c;使用typescript语言可开发出不同规模的、易于扩展的web前端页面应用&#xff0c;本文主要描述typescript的开发环境搭建。 npm install -g typescript 如上所示&#xff0c;在本地开发环境中&#xff0c;使用nodejs…

arduino嵌入式1,LED闪烁案例

CVE系列在等等吧&#xff0c;环境我有点懒得搭建了 文章目录 前言一、anduino是什么玩意儿&#xff1f;二、使用步骤1.找蓝图/画蓝图2.写入数据成果 总结 前言 最近在学习嵌入式开发&#xff0c;我的单片机到了&#xff0c;然后我就沉迷于嵌入式开发的环境中 提示&#xff1a;…

1300*B. Sort the Array(排序构造)

题意&#xff1a; 一个无重复数字的序列&#xff0c;能否反转一个区间使其成为单增序列。 解析&#xff1a; 记录每个点的值和初始下标&#xff0c;然后排序。 对于排好序的序列进行遍历&#xff0c;找出第一段和原序列下标不同的区间并且标记&#xff08;此区间即为翻转的区…

SpringCloud Alibaba - Seata 四种分布式事务解决方案(XA、AT)+ 实践部署(上)

目录 一、Seata 分布式事务解决方案 1.1、XA 模式 1.1.1、XA模式理论 第一阶段&#xff1a; 第二阶段&#xff1a; 1.1.2、Seata 框架中的 XA 模式 第一阶段&#xff1a; 第二阶段&#xff1a; 1.1.3、XA 模式的优缺点 1.2.4、实现Seata 的 XA 模式 a&#xff09;修改…

建筑施工行业招投标资源众包分包系统站点开发

一款针对建筑、施工行业开发的程序系统平台&#xff0c;运营方可以招募企业发布招投标信息以及招聘信息。 核心功能&#xff1a;一、项目招投标众包发布和投标 企业可以根据自身资源或者实际需求发布参与招投标信息&#xff0c;程序后台可以管理、审核用户发布的信息。参与招…

【C++】AVL树 红黑树

AVL树 AVL树也是二叉搜索树的一种。因为对于普通的二叉搜索树&#xff0c;当插入的数据在有序或接近有序的情况下&#xff0c;二叉搜索树很可能退化成单支树&#xff0c;导致查找效率低下。而AVL树就很好的解决了这个问题。 首先&#xff0c;AVL树是一棵二叉搜索树。同时对于A…

appscan的两种手动探索扫描方式

文章目录 一、使用火狐FoxyProxy浏览器代理探索二、使用appscan内置浏览器探索 一、使用火狐FoxyProxy浏览器代理探索 首先火狐浏览器需安装FoxyProxy 先在扩展和主题里搜FoxyProxy 选FoxyProxy Standard,然后添加到浏览器就行 添加后浏览器右上角会有这个插件 打开apps…

JVM篇---第三篇

系列文章目录 文章目录 系列文章目录一、什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”?二、Java内存结构三、说说对象分配规则一、什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程。Java源文…

Maven 中引用其他项目jar包出现BOOT-INF问题

问题 在B项目中引入A项目的类&#xff0c;但是发现怎么也引入不进来 A项目打包之后&#xff0c;想在B项目中引用jar 在B项目中发现类文件无法引用 参考网上进行清缓存等一系列操作都没有解决。 最后发现引用的jar包中包含BOOT-INF&#xff0c; 然后去A项目中查找&#xff…

云原生边缘计算KubeEdge安装配置

1. K8S集群部署&#xff0c;可以参考如下博客 请安装k8s集群&#xff0c;centos安装k8s集群 请安装k8s集群&#xff0c;ubuntu安装k8s集群 2.安装kubEedge 2.1 编辑kube-proxy使用ipvs代理 kubectl edit configmaps kube-proxy -n kube-system #修改kube-proxy#大约在40多行…

【动手学深度学习-Pytorch版】Transformer代码总结

本文是纯纯的撸代码讲解&#xff0c;没有任何Transformer的基础内容~ 是从0榨干Transformer代码系列&#xff0c;借用的是李沐老师上课时讲解的代码。 本文是根据每个模块的实现过程来进行讲解的。如果您想获取关于Transformer具体的实现细节&#xff08;不含代码&#xff09;可…

多个浮点数精确求和math.fsum()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 多个浮点数精确求和 math.fsum() 选择题 执行结果输出为1.0的函数是? import math a[0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1] print("【执行】print(sum(a))") print(sum(a)) p…

【应用层协议】HTTPS的加密流程

文章目录 1. 认识HTTPS2. 密文3. HTTPS加密流程3.1 对称加密3.2 非对称加密3.3 证书 1. 认识HTTPS HTTPS&#xff08;超文本传输协议安全&#xff09;也是一个应用层协议&#xff0c;它是在HTTP协议的基础上引入了一个加密层。 也就是HTTP协议传输文本的方式是明文&#xff0c;…

7-16 城市间紧急救援 (综合最短路练习)

本题链接&#xff1a;PTA | 程序设计类实验辅助教学平台 题目&#xff1a; 样例&#xff1a; 输入 4 5 0 3 20 30 40 10 0 1 1 1 3 2 0 3 3 0 2 2 2 3 2 输出 2 60 0 1 3 思路&#xff1a; 这道题是经典的综合最短路问题&#xff0c; 综合了 三种最短路方法&#xff0c;1.求…

Flutter AI五子棋

前言 在上一篇文章中&#xff0c;讲解了如何实现双人在本地对战的五子棋&#xff0c;但是只有一个人的时候就不太好玩&#xff0c;同时博主也没有把五子棋相关的文章写过瘾。那么这篇文章&#xff0c;我们来实现一个功能更加丰富的五子棋吧&#xff01;在设计五子棋的算法方面&…

MongoDB数据库网站网页实例-编程语言Python+Django

程序示例精选 PythonDjangoMongoDB数据库网站网页实例 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjangoMongoDB数据库网站网页实例》编写代码&#xff0c;代码整洁&#xff0c;…