TypeScript接口和类

news2025/1/20 1:56:34

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 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('Wo

of! 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.coloradmin.cn/o/1007609.html

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

相关文章

长尾关键词挖掘软件-免费的百度搜索关键词挖掘

嗨,大家好!今天,我想和大家聊一聊长尾关键词挖掘工具。作为一个在网络世界里摸爬滚打多年的人,我对这个话题有着一些个人的感悟和见解,希望能与大家分享。 首先,让我坦白一点,长尾关键词挖掘工具…

零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念

该篇适用于从零基础学习前端的小白 初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识 一、导言 HTML,CSS,JavaScript 都是单独的语言;他们构成前端技术基础; (1)HTM…

【操作系统】进程控制

进程控制:创建新进程,撤销已有进程,实现进程状态转换等。 原语:进程控制用的程序段。执行期间不允许中断,用"关中断"和"开中断"指令(特权指令)实…

图片如何变小kb?分享最新图片压缩技巧

有时候,我们在上传图片时可能会遇到“图片太大,请压缩后再上传”的提示,这时就需要将图片大小进行压缩。那么,有哪些方法可以解决图片变小kb的问题呢?下面将给大家介绍三种实用的方法,帮助您轻松解决这个问…

Leetcode刷题_堆相关_c++版

(1)215数组中的第k个最大元素–中等 给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素。 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O…

<C++>类和对象-中

目录 前言 一、类的6个默认成员函数 二、构造函数 2.1 概念 2.2 特性 三、析构函数 1. 概念 2. 特性 四、拷贝构造函数 1. 概念 2. 特征 五、赋值运算符重载 1. 运算符重载 2. 赋值运算符重载 六、实现一个完整的日期类 Date.h Date.cpp 总结 前言 上一节,我们…

【C语言】每日一题(半月斩)——day1

目录 😊前言 一.选择题 1.执行下面程序,正确的输出是(c) 2.以下不正确的定义语句是( ) 3.test.c 文件中包括如下语句,文件中定义的四个变量中,是指针类型的变量为【多选】&a…

Acwing 2816. 判断子序列

Acwing 2816. 判断子序列 题目描述代码展示 题目描述 代码展示 #include<iostream>using namespace std;const int N 1e5 10;int a[N], b[N];int main() {int n , m;cin >> n >> m;for (int i 0; i < n; i ) scanf("%d", &a[i]);for (…

使用IO操作文件

一、File类操作文件或目录 1.File操作文件或目录 java.io.File 类是文件和目录 路径名 的抽象表示&#xff0c;主要用于文件和目录的创建、查找和删除等操作。 Java虚拟机中的一个 File 实例表示一个路径&#xff0c;这个路径可能对应一个文件或一个目录。 File 类的实例所表…

论文阅读 - Outlier detection in social networks leveraging community structure

目录 摘要 1. Introduction 2. Related works 3. Preliminaries 3.1. 模块化度量 3.2. Classes of outliers 3.2.1. 点异常 3.2.2. Contextual anomalies 3.2.3. Collective anomalies 3.3. Problem definition 3.4. Outliers score 4. Methodology 4.1. Proposed appr…

ESP32编译出现Cannot establish a connection to the component registry.报错

前言 &#xff08;1&#xff09;在对ESP32开发使用的时候&#xff0c;很容易踩坑&#xff0c;但是总是找不到问题所在。很多时候只能去外网查资料&#xff0c;语言不通&#xff0c;而且有墙特别的难受。就算能够找到乐鑫的工作人员询问&#xff0c;也整个过程也感觉有些许麻烦。…

Vue2电商前台项目——完成Detail详情页模块业务

Vue2电商前台项目——完成Detail详情页模块业务 Vue基础知识点击此处——Vue.js 文章目录 Vue2电商前台项目——完成Detail详情页模块业务一、项目开发步骤二、配置路由规则滚动行为1、配置路由规则2、滚动行为 三、请求详情页数据并展示数据1、写接口2、写Vuex仓库3、派发acti…

ESP32S3的ESP_LOGx()控制台输出详细介绍

前言 &#xff08;1&#xff09;接触一款新的芯片&#xff0c;第一步要么是点灯&#xff0c;要么是进行串口的输出。现在我将介绍如何快速的利用ESP32S3进行控制台的日志输出。 &#xff08;2&#xff09;对于ESP32进行日志输出还是相对简单的&#xff0c;不像其他芯片需要配置…

三维模型3DTile格式轻量化压缩的遇到常见问题与处理方法分析

三维模型3DTile格式轻量化压缩的遇到常见问题与处理方法分析 三维模型的轻量化压缩是一项技术挑战&#xff0c;特别是在处理复杂的3DTile格式时。下面列举了一些处理过程中可能遇到的常见问题以及相应的处理方法&#xff1a; 模型精度损失&#xff1a;在进行压缩处理时&#x…

C语言入门Day_19 初识函数

目录 1.函数的定义 2.函数的调用 3.易错点 4.思维导图 前言&#xff1a; printf()我们已经很熟悉了&#xff0c;它有一个特定的功能&#xff0c;就是在屏幕上输出一行文字。之前的课程我们都称呼printf()为一个功能&#xff0c;实际上ta在编程中有个特定的名字——函数。 …

IO和进程day07(IPC、管道、信号)

今日任务 1.代码&#xff08;一次只能发一次消息&#xff0c;不然会存在一些小问题&#xff0c;在接受消息之后会立刻输出上次的第二次发送的消息&#xff09; read.c文件&#xff08;先读取消息&#xff09; #include <stdio.h> #include <string.h> #include &…

org.apache.ibatis.binding.BindingException: Invalid bound statement

在学习黑马头条遇到的关于使用mapper执行方法出现的错误 完整报错信息为&#xff1a;org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.heima.wemedia.mapper.WmNewsMaterialMapper.saveRelations 译为&#xff1a;无效的绑定语句&…

Ubuntu 23.10/24.04 LTS 放弃默认使用 snap 版 CUPS 打印堆栈

导读Canonical 的开发者、OpenPrinting 的项目负责人 Till Kamppeter 今年 5 月表示&#xff0c;计划在 Ubuntu 23.10&#xff08;Mantic Minotaur&#xff09;上默认使用 Snap 版本的 CUPS 打印堆栈。 不过经过数月的测试&#xff0c;官方放弃了这项决定。Ubuntu 23.10&#x…

MySQL面试题——隔离级别相关面试题

隔离级别相关面试题 MySQL事务隔离级别 未提交读——可以读到其他事务未提交的数据&#xff08;最新的版本&#xff09; 错误现象&#xff1a;脏读、不可重复读、幻读的现象 提交读&#xff08;RC&#xff09;——可以读到其他事务已提交的数据&#xff08;最新已提交的版本&…

TypeScript命名空间和模块

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 命名空间&#xff08;Namespace&#xff09; 命名空间&#xff08;Namespace&#xff09;使用场景 第三方库 兼容…