Classes & Interfaces

已于 2022-10-20 12:14:40 修改
阅读量189 收藏
点赞数
文章标签： javascript typescript 前端
于 2022-10-20 12:14:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61388464/article/details/127424622
版权

Classes & Interfaces

Create first Class

如何在 TypeScript 里创造类

class Department {
  name: string;

  constructor(n: string) {
    this.name = n;
  }
}

const accounting = new Department("Accounting");

console.log(accounting);

在这里我们指明了 name 的类型为 string，但是实际编译到 es6 的 JavaScript 里，是不会有这一行限制的。

class Department {
  constructor(n) {
    this.name = n;
  }
}

Constructor Functions & The this Keyword

来看一下 this 关键词

class Department {
  name: string;

  constructor(n: string) {
    this.name = n;
  }

  describe() {
    console.log("Department: " + this.name);
  }
}

const accounting = new Department("Accounting");

const accountingCopy = { describe: accounting.describe };

accountingCopy.describe();

如果运行这段代码，得到的结果会是什么？
Department: undefined
为什么是 undefined？ 因为我们只是把 accounting 的这个方法的引用 copy 了过去，在实际运行的 accountingCopy 的 Object 里，并没有 name 这个属性。this 指向的，是运行这个函数的对象。

class Department {
  name: string;

  constructor(n: string) {
    this.name = n;
  }

  describe(this: Department) {
    console.log("Department: " + this.name);
  }
}

const accounting = new Department("Accounting");

const accountingCopy = {
  name: "DUMMY",
  describe: accounting.describe,
};

accountingCopy.describe();

我们在这里给 describe 加上了一个参数，this，还给它限定了类型，为 Department。TypeScript 会分析这段代码，知道这个方法，应该什么样的 object 下才能被调用。
如果这里吧 accountingCopy 的 name 去掉，会出现错误，因为 TypeScript 知道它和 Department 类的应该有的属性不一样。

private and public Access Modifiers

TypeScript 提供了 public 和 private，这在 JavaScript 中没有。

class Department {
  public name: string;
  private employees: string[] = [];

  constructor(n: string) {
    this.name = n;
  }

  describe(this: Department) {
    console.log("Department: " + this.name);
  }
  addEmployee(employee: string) {
    this.employees.push(employee);
  }
}

const accounting = new Department("Accounting");
// accounting.employees=[];

默认情况下，声明的变量都为 public，设置了 private 的变量，无法从外部直接访问 。

Shorthand Initialization

快速的初始化，从而摆脱重复的赋值

class Department {
  private name: string;
  private id: string;

  constructor(id: string, name: string) {
    this.name = name;
    this.id = id;
  }
}

如果我们初始化的值很多，这样不断地反复赋值会很幸苦，TypeScript 提供了更快捷的办法。

class Department {
  //   private name: string;
  //   private id: string;

  constructor(private id: string, public name: string) {
    // this.name = name;
    // this.id = id;
  }
}

直接在构造函数里一次性声明清楚 private 还是 public，会创建同名值并赋值。

Readonly

只读属性，当你确保一个属性不会再更改且不希望更改，使用 readonly

class Department {
  constructor(private readonly id: string, public name: string) {}
}

Inheritance

class Department {
  private employees: string[] = [];

  constructor(private readonly id: string, public name: string) {}

  describe(this: Department) {
    console.log(`Department (${this.id}): ${this.name}`);
  }

  addEmployee(employee: string) {
    this.employees.push(employee);
  }

  printEmployeeInformation() {
    console.log(this.employees.length);
    console.log(this.employees);
  }
}

class ITDepartment extends Department {
  admins: string[];
  constructor(id: string, admins: string[]) {
    super(id, "IT"); // Call the constructor function of the base Class at first
    this.admins = admins;
  }
}

TypeScript 的继承和 JavaScript 基本一样，使用 extends 关键字，同时调用 super 方法。
super()会在构建这个类之前先运行父类的 constructor。
同样也可以自己在新类中添加方法。

Overriding Properties & The protected Modifier

在继承类中可以重写父类的方法。
父类的属性设置为 protected 而不是 private，即可在子类做修改。

class Department {
  protected employees: string[] = [];

  constructor(private readonly id: string, public name: string) {}
  addEmployee(employee: string) {
    // validation etc
    // this.id = 'd2';
    this.employees.push(employee);
  }
}

class ITDepartment extends Department {
  constructor(id: string) {
    super(id, "IT");
  }
  addEmployee(employee: string) {
    this.employees.push(employee);
  }
}

Getter & Setter

Getter 用于获取类中的特定属性，设定一个 getter 可以在获取时候内部做处理后再返回。
Setter 可以设置类中的属性。使用的时候就和直接设置属性值一样。也可以在内部处理。

class Department {
  protected employees: string[] = [];

  get reverseEmployees() {
    return this.employees.reverse();
  }

  set setReverseEmployees(a: string[]) {
    this.employees = a.reverse();
  }

  constructor(private readonly id: string, public name: string) {}
  addEmployee(employee: string) {
    // validation etc
    // this.id = 'd2';
    this.employees.push(employee);
  }
}
const d = new Department("1", "ad");
console.log(d.reverseEmployees);
d.setReverseEmployees = ["1", "2"];

Static

类中有静态方法，他可以不用创造实例，直接调用，就像 Math 类的 PI，可以直接获取，或者 pow 方法，直接调用。

class Department {
  static fiscialYear = 2020;
  protected employees: string[] = [];

  constructor(private readonly id: string, public name: string) {
    // console.log(this.fiscialYear); Not available in a instance
    console.log(Department.fiscialYear);
  }
  addEmployee(employee: string) {
    this.employees.push(employee);
  }

  static createEmployee(name: string) {
    return { name };
  }
}

const pi = Math.PI;
const p = Math.pow(1, 2);

const employee = Department.createEmployee("Max");
console.log(Department.fiscialYear);

注意，在构造函数可以看到，如果要输出 fiscialYear 变量，不可以使用 this，因为 static 属性不属于任何一个实例。所以直接从 Department 调用就好。

Abstract Classes

当你想确保某种方法可用，而且对于每一个具体的，基于这个类继承的所有子类的这个方法的具体实现都不一样，也就是我们不能提供一个通用的方法的时候，但你想强制这个方法存在且要求子类实现，使用 abstract。

当你想强制所有基于其他类的类，分享一些常用的方法或属性，同时你不想提供具体的值或者实现，使用 abstract。

abstract class Department {
  constructor(protected readonly id: string, public name: string) {}
  abstract describe(this: Department): void;
}

在 class 关键字前添加 abstract，同时再要 abstract 的方法或者属性前也添加 abstract，不需要提供具体实现，只需要写清楚返回类型和参数类型即可。

注意：被 abstract 的类不可以再实例化，也就是无法创建一个新的基于 Department 的 Object。

class ITDepartment extends Department {
  constructor(id: string, admins: string[]) {
    super(id, "IT");
  }

  describe() {
    console.log("IT Department - ID: " + this.id);
  }
}

本例中，其扩展类必须补充完整 describe 方法，不然会报错。

Singletons & Private Constructor

当需要一个类只有一个具体的实例化对象时候，使用单例模式 Singletons

class Department {
  static instance: Department;

  private constructor(private readonly id: string, public name: string) {}

  static getInstance() {
    if (Department.instance) return this.instance;
    this.instance = new Department("1", "n");
    return this.instance;
  }
}

const theOnlyInstance = Department.getInstance();

首先设置 constructor 为 private，使其无法从外直接调用。
随后建立一个 static 变量，instance。用于储存唯一的，实例化的对象。
最后添加静态方法，实例存在就返回它，不存在就新建一个再返回。

A First Interface

使用 Interface 去定义一个 Object 的结构，他应该拥有什么属性，每个属性又该有什么特点，同时也可以使用它来做类型检查。

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

let user1: Person;
user1 = {
  name: "Jack",
  age: 28,
  greet(phrase: string) {
    console.log(phrase);
  },
};

Using Interface with Classes

我们已经有 type 了，为什么还需要 Interface？

type Person = {
  name: string;
  age: number;
  greet(phrase: string): void;
};

有时候可以互换，但是 Interface 之可以用于描述对象的结构。当定义某些东西为接口的时候，Interface 会更加清晰的定义对象的结构。

interface Greetable {
  name: string;
  greet(phrase: string): void;
}

class Person implements Greetable {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet(phrase: string) {
    console.log(phrase);
  }
}

let user: Greetable;
user = new Person("Jack");

我们定义了 Interface 后在 Class 使用，因为我们希望这个 Class 有这个结构，使用 implements 关键字。可以同时应用多个 Interface，逗号相连即可。

可以看到，user 的类型设置为 Greetable，但可以新机按一个 Person 实例，因为 Person 就是按照 Greetable 建的。

Interface 和 Abstract Class 有区别。Interface 内不能提供任何具体实现，Abstract Class 除了抽象部分方法外，内部可以写完整的函数功能。

Readonly Interface Properties

在 Interface 里设置一个属性为 readonly，在建 Class 时如果应用，那么这个属性会自动只读

interface Greetable {
  readonly name: string;
}

class Person implements Greetable {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let user: Greetable;
user = new Person("Jack");
user.name = "Fan"; // !!ERROR!!

Extending Interface

interface Named {
  readonly name: string;
}

interface Greetable extends Named {
  greet(phrase: string): void;
}

如果我们确定一个新的 Interface 一定会拥有一部分和另一个 Interface 一样的内容，那可以做扩展。可以同时扩展多个，使用逗号隔开。

Interface as Function Type

也可以使用 Interface 作为函数类型。

// type AddFn = (a: number, b: number) => number;
interface AddFn {
  (a: number, b: number): number;
}

let add: AddFn;
add = (a: number, b: number) => a + b;

注意和 type 的区别，最后用的是’:‘而不是’=>'。

Optional Parameters & Properties

通过’?'操作符来让一个属性变得可选，不一定要具备。其可以是函数，也可以是参数，也可以是属性变量。

interface Named {
  readonly name?: string;
  outputName?: string;
}

interface Greetable extends Named {
  greet?(phrase: string): void;
}

class Person implements Greetable {
  name?: string;
  constructor(n?: string) {
    if (n) this.name = n;
  }
}

Compiling Interfaces to JavaScript

如果编译 TypeScript 文件，找到对应的 JavaScript 文件其实会发现 Interface 部分什么内容都没有被编译。JavaScript 并没有这个概念，这只是 TypeScript 给我们提供的工具而已。

独狼阿蒙内特
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Interface classes
cxcbupt
04-10 523
An interface class is a class that has no members variables, and where all of the functions are pure virtual! （接口类是一个没有任何成员变量并且所有的函数都是纯虚函数的类。）  In other words, the class is purely a definition, and
面向对象在JavaScript中的接口实现
Wang的专栏
04-19 4487
接口是面向对象编程的基础，它是一组包含了函数型方法的数据结构，与类一样，都是编程语言中比较抽象的概念。比如生活中的接口，机顶盒，人们利用它来实现收看不同频道和信号的节目，它犹如对不同类型的信息进行集合和封装的设备，最后把各种不同类型的信息转换为电视能够识别的信息。在编程语言中的接口，实际上是不同类的封装并提供统一的外部联系通道，这样其他对象就可以利用接口来调用不同类的成员了。 ——整理自《jQu...
interface里的变量必须初始化，而且是static final
weixin_30542079的博客
07-27 614
public class leijun { 　　public static void main(String[] args) { 　　　　System.out.println(xiaomi.i); 　　} } interface xiaomi{ 　　int i = 1; } 运行结果为1 public class leijun { public s...
typescript基础之interface、class
最新发布
hhbbeijing的专栏
08-18 2129
TypeScript中的class是一种用来创建对象的模板或构造函数，它可以定义对象的属性和方法，并且可以实现封装、继承和多态等面向对象的特性。这表示该接口包含了所有父接口的属性和方法，并且可以添加自己的属性和方法。• interface是一种用来描述对象的形状（shape）或契约（contract）的语法，它可以指定对象必须具有哪些属性和方法，以及它们的类型。• interface的使用方法很简单，只需要用interface关键字来声明一个接口，然后用冒号（:）来分隔属性名和属性类型，用分号（;
interface和class的区别
c_z_w的博客
01-11 7772
1、接口类似于类，但接口的成员都没有执行方式，它只是方法、属性、事件和索引的组合而已，并且也只能包含这四种成员；类除了这四种成员之外还可以有别的成员(如字段)。 2、不能实例化一个接口，接口只包括成员的签名；而类可以实例化(abstract类除外)。 3、接口没有构造函数，类有构造函数。 4、接口不能进行运算符的重载，类可以进行运算符重载。 5、接口的成员没有任何修饰符，其成员总是公共的，而类的成
Part 3：GridWorld Classes and Interfaces - 2015年软件工程实训 - SoYa Wik
08-03
在Part 3：GridWorld Classes and Interfaces中，我们将深入探讨这些关键组件。 首先，`Actor`类是所有GridWorld中演员对象的基类。用户通常会创建继承自`Actor`的自定义类来表示他们想要的行为和外观。每个`Actor`...
ull-esit-inf-dsi-20-21-prct05-objects-classes-interfaces-EduardoSY:GitHub Classroom创建的ull-esit-inf-dsi-20-21-prct05-objects-classes-interfaces-EduardoSY
03-22
[DSI] Practica 05-Objetos，包含界面 拉古纳大学 Grado enIngenieríaInformática 先证者：信息通报 Curso 2020年/ 2021年 车手：爱德华多·达席尔瓦·亚涅斯（Eduardo Da Silva Yanes）-alu0101104911 ...
java-master-class-innter-abstract-classes-interfaces:适用于软件开发人员的Java编程大师课程（CHAPITRE 9
04-17
**接口（Interfaces）** 接口在Java中是一种完全抽象的类型，它只包含常量定义和抽象方法声明，不包含任何实现。接口用`interface`关键字定义，如`public interface MyInterface { void myMethod(); }`。接口是多...
Java_Classes_and_Interfaces
03-10
在Java编程语言中，类（Classes）和接口（Interfaces）是核心概念，它们构成了面向对象设计的基础。本文将深入探讨这两个关键元素，并结合实际示例解释它们在Java中的使用。 一、Java类 1. 类定义：类是创建对象的...
接口方法较少时，优雅写法
congcong7267的博客
11-14 196
接口方法较少时，优雅写法
js的接口(Interface)定义和示例
ch_majia的博客
01-02 2万+
定义接口（Interface）的实现。 然后定义一个接口ResultSet有两个函数['getDate','getResults']，并且这个接口名字是Interface的第一个参数。 最后示例是实现一个对象resultObject，遵循接口ResultSet，这个对象resultObject必须实现接口定义的两个函数['getDate','getResults']，且通过resultFo...
01.Javascript中的接口----Interface
Alien的专栏
11-05 2983
前言 Javascript中的接口 接口的定义 接口的实现 接口实例的创建与使用 从ensureImplements方法到implements方法的升级（2010-09-22更新）
TypeScript (TS
m0_61044901的博客
06-14 904
TypeScript（TS）
JavaScript设计模式之一Interface接口
weixin_30477797的博客
02-21 1639
什么是接口？ 接口提供了一种用以说明一个对象应该具有哪些方法和手段。 在面向对象的javascript中，接口有些什么作用呢？既定的一批接口具有自我描述性，并能促进代码重用。接口可以告诉程序员一个类实现了哪些方法，从而帮助其使用这个类。 在C#还是JAVA中都应该面向接口设计我们的程序，在C#和Java中都Interface这样的关键字，但是JavaScript中没有相应的机制，但是Java...
@JavascriptInterface 标注的方法
一站到底s的博客
11-20 2362
@JavascriptInterface 标注的方法里面是子线程，而不是主线程 /** * 签到 */ @JavascriptInterface public void sign() { AppLog.i(TAG, "1步" + ThreadUtil.isMainThread()); } 打印结果： AppLog.i(TAG, "1步false");
js中Object类型三种初始化方式
lieyanhaipo的专栏
06-12 1万+
1.构造函数var student = new Object(); student.name="lilei"; student.age=18;2.对象字面量var student = { "name":"lilei", "age":18 }3.var student = {}; studnet.name="lilei"; student.age=18;
跨平台实现基础（二）JavascriptInterface原理和Js和Java交互实践
热门推荐
Tamic （大白）
01-19 2万+
上一篇<JsCore 原理和实践> 本篇介绍android和js通讯的基础核心类 JavascriptInterface。 JavascriptInterface是android系统提供webKit内核的接口，和webView
Write two interfaces, one called FriendFinder and one called MediaPoster. You must thenwrite a Java class that implements both of these interfaces, called MySocial. Classes adheringto the FriendFinder interface must implement a void notifyFriendRequest () methodThose classes adhering to the MediaPoster interface must implement a numMediaTypes ()method, which returns the maximum number of media types that people can post. By default inthe MediaPoster interface, the numMediaTypes method returns the integer value 1.
06-12
// MySocial class implements both interfaces class MySocial implements FriendFinder, MediaPoster { @Override public void notifyFriendRequest() { // implementation of notifyFriendRequest } @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值