认识TypeScript 中的接口和类

   

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

目录

接口


江城开朗的豌豆

在 TypeScript 中,接口(Interfaces)和类(Classes)是实现面向对象编程(Object-Oriented Programming,OOP)的基础工具。这些工具提供了一种方式来定义和组织复杂的数据结构和行为。

TypeScript 是一种静态类型的编程语言,它在 JavaScript 的基础上添加了类型系统和一些其他特性。在 TypeScript 中,接口(Interface)和类(Class)是非常重要且常用的概念。

接口(Interface): 接口是用来描述对象的形状和结构的,它定义了对象应具有的属性和方法。使用接口可以使代码更加清晰、可读性更高,并确保对象具备所需的属性和方法。

示例:

interface Person { 
name: string; 
age: number; greet(): void; 
} 
class Student implements Person { 
name: string; age: number; 
constructor(name: string, age: number) { 
this.name = name; this.age = age; 
} 
greet() { 
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } const student = new Student("John", 20); 
student.greet(); // 输出:Hello, my name is John and I'm 20 years old.

在上面的示例中,定义了一个 Person 接口,它规定了对象应具有 nameage 属性,以及 greet 方法。然后创建了一个 Student 类实现了 Person 接口,构造函数接收 nameage 参数并赋值给类的属性。并且 Student 类必须实现 Person 接口中定义的 greet 方法。

类(Class): 类是一种面向对象编程的基本概念,它是对象的蓝图,定义了对象的属性和方法。在 TypeScript 中,类可以包含构造函数、属性、方法、访问修饰符等。

示例:

 
class Animal { 
protected name: string; 
constructor(name: string) { 
this.name = name; } 
move(distance: number = 0) { 
console.log(`${this.name} moved ${distance} meters.`); } } 
class Dog extends Animal { bark() { 
console.log(`${this.name} is barking.`); 
} } const dog = new Dog("Max"); 
dog.move(10); 
// 输出:Max moved 10 meters. dog.bark(); // 输出:Max is barking.

在上面的示例中,定义了一个 Animal 类,它有一个 name 属性和一个 move 方法。另外创建了一个 Dog 类继承自 Animal 类,并添加了一个 bark 方法。注意在 Animal 类中,name 属性使用了 protected 访问修饰符,表示该属性可以在继承类中访问,但在类外部不可访问。

接口

接口在 TypeScript 中扮演着关键的角色,用于强类型系统的支持。接口可以描述对象的形状,使我们可以编写出预期的行为。接口可用于描述对象、函数或者类的公共部分。

interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

在这个例子中,LabelledValue接口就像一个名片,告诉其他代码,只要一个对象有label属性,并且类型为string,那么就可以认为它是LabelledValue

接口也可以描述函数类型:

interface SearchFunc {(source: string, subString: string): boolean;
}let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {let result = src.search(sub);return result > -1;
}

此外,接口还能用于描述数组和索引类型:

interface StringArray {[index: number]: string;
}let myArray: StringArray;
myArray = ["Bob", "Fred"];interface Dictionary {[index: string]: string;
}let myDict: Dictionary;
myDict = { "key": "value" };

与传统的 JavaScript 一样,TypeScript 也使用类(Classes)来定义对象的行为。然而,TypeScript 的类具有一些额外的特性,如访问修饰符(Access Modifiers)、静态属性(Static Properties)、抽象类(Abstract Classes)等。

class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return "Hello, " + this.greeting;}
}let greeter = new Greeter("world");

TypeScript 还引入了访问修饰符 publicprivate 和 protected。如果没有指定访问修饰符,则默认为 public

class Animal {private name: string;constructor(theName: string) { this.name = theName; }
}

TypeScript 类还支持继承,通过extends关键字可以创建一个子类。子类可以访问和改变父类的属性和方法:

class Animal {name: string;constructor(theName: string) { this.name = theName; }move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`);}
}class Dog extends Animal {constructor(name: string) { super(name); }bark() {console.log('Woof! Woof!');}
}const dog = new Dog('Tom');
dog.bark();
dog.move(10);
dog.bark();

为了实现多态,TypeScript 提供了抽象类的概念。抽象类是不能被实例化的类,只能作为其他类的基类。抽象类中可以定义抽象方法,抽象方法必须在派生类中实现:

abstract class Animal {abstract makeSound(): void;move(): void {console.log('roaming the earth...');}
}class Dog extends Animal {makeSound() {console.log('Woof! Woof!');}
}const myDog = new Dog();
myDog.makeSound();
myDog.move();

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下多核CPU指定程序运行的核

设置程序在指定CPU核心运行 一、如何查看程序运行的CPU信息 1.1 查看当前系统CPU有几个核心 查看CPU核心数量:lscpu 1.2 查看程序的PID ps aux|grep cpu_test1.3 查看程序可运行的CPU taskset -c -p pid1.4 设置程序在指定核心上运行 1.4.1 通过运行时的参数设…

课后延时服务选课报名管理系统功能清单

课后延时服务选课报名管理系统分为学校端,培训机构端,家长端。 学校端提供学生管理,课程管理,班级管理,班级排课,班级课表,可直接安排学生入班上课,查看学生考勤情况,查…

Microsoft Visio 摄像机图标

Microsoft Visio 摄像机图标 1. 更多形状 -> 搜索形状2. 摄像机References 1. 更多形状 -> 搜索形状 2. 摄像机 ​​​ References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

[Bug解决] Invalid bound statement (not found)出现原因和解决方法

1、问题描述 在写了一个很普通的查询语句之后,出现了下面的报错信息 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.xxx.oauth.mapper.WxVisitorQrBeanMapper.selectByComIdAndEmpId at org.apache.ibatis.binding.Mappe…

市场复盘总结 20240220

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整,采用龙空龙模式 一支股票 10%的时候可以操作, 90%的时间适合空仓等待 二进三: 进级率中 19% 最常用…

vue3+ant design 4.x版本遇见message不显示问题。

自己打断点到success,但是就是没有全局显示。 第一看自己的全局引入是否有问题: import { createApp } from vue; import ./style.css; import App from ./App.vue; import Antd from ant-design-vue; import ant-design-vue/dist/reset.css; import ro…

基于Springboot+Vue的超市管理系统源码

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍: 随着社会经济的发展和…

【大厂AI课学习笔记】【2.2机器学习开发任务实例】(8)模型训练

好吧,搞了半天,都是围绕数据在干活,这也就验证了,我们说的,数据准备等工作,要占到机器学习项目一半以上的工作量和时间。而且数据决定了模型的天花板,算法只是去达到上限。 我们今天来学习模型…

MySQL安装教程(详细版)

今天分享的是Win10系统下MySQL的安装教程,打开MySQL官网,按步骤走呀~ 宝们安装MySQL后,需要简单回顾一下关系型数据库的介绍与历史(History of DataBase) 和 常见关系型数据库产品介绍 呀,后面就会进入正式…

PMP含金量在国内怎么样?

其一、PMP(项目管理师)证书含金量高吗? PMP认证是由美国项目管理学会(PMI)在全球范围内推出的针对项目经理的资格认证体系,其证书含金量可以说是非常高。 统计表明,全球年销售收入在5亿美元以上的企业中有86%聘用了具有项目管理资质的项目经…

文献速递:GAN医学影像合成--双向映射生成对抗网络用于脑部 MR 到 PET 合成

文献速递:GAN医学影像合成–双向映射生成对抗网络用于脑部 MR 到 PET 合成 01 文献速递介绍 作为精准医学的基石,多模态医学图像已成为必备要素。稿件收到日期:2021年6月26日;修改日期:2021年8月6日;接受…

【设计模式】23种设计模式笔记

设计模式分类 模板方法模式 核心就是设计一个部分抽象类。 这个类具有少量具体的方法,和大量抽象的方法,具体的方法是为外界提供服务的点,具体方法中定义了抽象方法的执行序列 装饰器模式 现在有一个对象A,希望A的a方法被修饰 …