【TS】Typescript中接口(Interfaces)与类(class)的用法详解

最新推荐文章于 2025-05-09 03:12:21 发布
最新推荐文章于 2025-05-09 03:12:21 发布
阅读量1.8k 收藏 16
点赞数 25
分类专栏： javascript typescript 文章标签： typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42960907/article/details/141181726
版权

文章目录

Typed JavaScript at Any Scale.
添加了类型系统的 JavaScript，适用于任何规模的项目。-------以上描述是官网对于 TypeScript 的定义。

TypeScript 是一门静态类型、弱类型的语言。
TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。

一、 接口 （interface）

1. 什么是接口

在 TypeScript 中接口（Interface）主要有两个作用：

  1. 使用接口（Interface）来定义对象的类型。
  2. 使用接口（Interface）对行为进行抽象，而具体如何行动需要由类（class）去实现（implements）。
// 使用接口（Interface）来定义对象的类型
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};
赋值的时候，变量的形状必须和接口的形状保持一致

// 使用接口（Interface）对行为进行抽象
interface Alarm {
    alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

2. 可选属性

有时我们希望不要完全匹配一个接口的形状，那么可以用可选属性（可选属性的含义是该属性可以不存在）：

interface Person {
    name: string;
    age?: number; // 可选属性
}

let tom: Person = {
    name: 'Tom'
};

此时仍然不允许添加未定义的属性。

3. 任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
    name: string;
    age?: number; // 可选属性
    [propName: string]: any; // 任意属性
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集，并且
一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

4. 只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

二、类（class）

传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。

这里先对类相关的概念做一个简单的介绍：

  • 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法

  • 对象（Object）：类的实例，通过 new 生成

  • 面向对象（OOP）的三大特性：封装、继承、多态

    • 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
    • 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
    • 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat

  • 存取器（getter & setter）：用以改变属性的读取和赋值行为

  • 修饰符（Modifier）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法

  • 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现

  • 接口（Interface）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

1. 什么是类

类（Class）：定义了一件事物的抽象特点，包含它的属性和方法。

2. ES6 中类的用法

2.1 属性和方法

使用 class 定义类，使用 constructor 定义构造函数。

通过 new 生成新实例的时候，会自动调用构造函数。

class Animal {
    name;
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}

let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

2.2 类的继承

使用 extends 关键字实现继承，子类中使用 super关键字来调用父类的构造函数和方法。

class Cat extends Animal {
  constructor(name) {
    super(name); // 调用父类的 constructor(name)
    console.log(this.name);
  }
  sayHi() {
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
  }
}

let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom

2.3 存取器

使用 getter 和 setter 可以改变属性的赋值和读取行为:

class Animal {
  constructor(name) {
    this.name = name;
  }
  get name() {
    return 'Jack';
  }
  set name(value) {
    console.log('setter: ' + value);
  }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

2.4 静态方法

使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用：

class Animal {
  static isAnimal(a) {
    return a instanceof Animal;
  }
}

let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

3. ES7 中类的用法

ES7 中有一些关于类的提案，TypeScript 也实现了它们，这里做一个简单的介绍。

3.1 实例属性

class Animal {
  name = 'Jack';

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack

3.1 静态属性

ES7 提案中，可以使用 static 定义一个静态属性：

class Animal {
  static num = 42;

  constructor() {
    // ...
  }
}

console.log(Animal.num); // 42

4. TypeScript 中类的用法

4.1 public、private 和 protected

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private和 protected。

  • public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的。
  • private 修饰的属性或方法是私有的，不能在声明它的类的外部访问。
  • protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的。

下面举一些例子：

class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

上面的例子中，name 被设置为了 public，所以直接访问实例的 name 属性是允许的。

注意：

  • 当构造函数修饰为 private 时，该类不允许被继承或者实例化
  • 当构造函数修饰为 protected 时，该类只允许被继承

很多时候，我们希望有的属性是无法直接存取的，这时候就可以用 private 了：

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name);
a.name = 'Tom';

// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

使用 private 修饰的属性或方法，在子类中也是不允许访问的：

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

// index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

而如果是用 protected 修饰，则允许在子类中访问：

class Animal {
  protected name;
  public constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

4.2 参数属性

修饰符和readonly还可以使用在构造函数参数中，等同于类中定义该属性同时给该属性赋值，使代码更简洁。

class Animal {
  // public name: string;
  public constructor(public name) {
    // this.name = name;
  }
}

4.3 readonly

只读属性关键字，只允许出现在属性声明或索引签名或构造函数中。

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';

// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

注意如果 readonly 和其他访问修饰符同时存在的话，需要写在其后面。

class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}

4.4 抽象类

abstract 用于定义抽象类和其中的抽象方法。

  • 抽象类是不允许被实例化的类。
abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

let a = new Animal('Jack');

// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

上面的例子中，我们定义了一个抽象类 Animal，并且定义了一个抽象方法 sayHi。在实例化抽象类的时候报错了。

  • 其次，抽象类中的抽象方法必须被子类实现：
abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

class Cat extends Animal {
  public eat() {
    console.log(`${this.name} is eating.`);
  }
}

let cat = new Cat('Tom');

// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.

上面的例子中，我们定义了一个类 Cat 继承了抽象类 Animal，但是没有实现抽象方法 sayHi，所以编译报错了。

下面是一个正确使用抽象类的例子：

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

class Cat extends Animal {
  public sayHi() {
    console.log(`Meow, My name is ${this.name}`);
  }
}

let cat = new Cat('Tom');

4.5 类的类型

给类加上 TypeScript 的类型很简单，与接口类似：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

三、类与接口

接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。

这里主要介绍接口的另一个用途，接口对类的一部分行为进行抽象。

1. 类实现接口

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interface），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

interface Alarm {
    alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

一个类可以实现多个接口：

interface Alarm {
    alert(): void;
}

interface Light {
    lightOn(): void;
    lightOff(): void;
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

上例中，Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。

2. 接口继承接口

接口与接口之间可以是继承关系：

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

这很好理解，LightableAlarm 继承了 Alarm，除了拥有 alert 方法之外，还拥有两个新方法 lightOn 和 lightOff。

3. 接口继承类(比较特殊)

常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

实际上，当我们在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）。

所以我们既可以将 Point 当做一个类来用（使用 new Point 创建它的实例）：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

const p = new Point(1, 2);

也可以将 Point 当做一个类型来用（使用 : Point 表示参数的类型）：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

function printPoint(p: Point) {
    console.log(p.x, p.y);
}

printPoint(new Point(1, 2));

当我们声明 interface Point3d extends Point 时，Point3d 继承的实际上是类 Point 的实例的类型。

换句话说，可以理解为定义了一个接口 Point3d 继承另一个接口 PointInstanceType。

所以「接口继承类」和「接口继承接口」没有什么本质的区别。
在接口继承类的时候，也只会继承它的实例属性和实例方法。

TypeScript: Interface vs Class vs Modules vs Program vs Function
bmzyDream_007的专栏
03-19 1832
I would like to explain the Interface,Class,Module, Program and Fucntion in TypeScript per comparing C# and hopefully the answers are useful to people coming to TypeScript from similar languages too.
TypeScript教程入门指南详解案例教程
06-01
7. **继承（Inheritance）**：类可以继承其他类的属性和方法，使用`extends`关键字，如`class Admin extends User {}`。 8. **多态（Polymorphism）**：子类可以覆盖父类的方法，实现多态性，如子类可以有自己特定...
typescript基础之interface、class
hhbbeijing的专栏
08-18 2661
TypeScript中的class是一种用来创建对象的模板或构造函数，它可以定义对象的属性和方法，并且可以实现封装、继承和多态等面向对象的特性。这表示该接口包含了所有父接口的属性和方法，并且可以添加自己的属性和方法。• interface是一种用来描述对象的形状（shape）或契约（contract）的语法，它可以指定对象必须具有哪些属性和方法，以及它们的类型。• interface的使用方法很简单，只需要用interface关键字来声明一个接口，然后用冒号（:）来分隔属性名和属性类型，用分号（;
【TypeScript】Class 和 Interface
最新发布
Bl_a_ck的博客
05-09 993
Class 和 Interface 在 TypeScript 中各有其独特的作用和适用场景。Class 是运行时实体，支持实例化、成员实现、访问控制和继承，适合用于创建具有具体实现和状态的对象模板。Interface 则是纯类型声明，用于定义对象的结构和契约，支持声明合并、函数类型定义和索引签名，适合用于描述对象的形状和跨组件的通信契约。在实际开发中，通常结合使用两者，Class 用于实现具体业务逻辑和状态管理，而 Interface 用于定义类型契约和跨组件的接口。
四、typescript的interface和class
A_bad_boy_hahaha的博客
06-04 857
1、接口(interface) 接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。 定义接口的形式如下： interface inter_face_name{ } ...
TypeScript 之 interface和class
鹤九日的博客
08-15 888
typeScript 之 interface 和 class
TypeScript---Ts接口和类总结
maidu_xbd的博客
03-25 3912
一、接口 1、【接口】是对象的状态（属性）和行为（方法）的抽象（描述）。接口是一种类型，是一种规划、约束 2、【属性】readonly：只读属性、？：可选属性 interface IPerson { readonly id: number //只读属性 name: string age: number sex?: string //可选属性 } const person1: IPerson = { id:1, name: 'tom', age: 20, // s
TypeScript学习笔记（四） - 类和接口
weixin_30593443的博客
08-17 249
本篇将介绍TypeScript里的类和接口。 与其他强类型语言类似，TypeScript遵循ECMAScript 2015标准，支持class类型，同时也增加支持interface类型。 一、类（class） 下面是一个类的基本定义方式： 1 class User { 2 name: string; 3 constructor(_name: strin...
TypeScript编程任务6详解
2. **接口(Interfaces)**: 接口是TypeScript中定义对象形状的一种方式，用来确保对象具有特定的属性和方法。 ```typescript interface LabelledValue { label: string; } function printLabel(labelledObj: ...
TypeScript通俗易懂
04-08
### TypeScript高级特性详解 #### 一、概述 TypeScript 是一种开源、静态类型的编程语言，构建于 JavaScript 之上，增加了可选的静态类型系统。它旨在改进开发者的生产力，并为大型应用提供更好的支持。TypeScript...
TypeScript语法详解：从基础到高级
`.d.ts` 文件是用来提供类型定义的，它们让 JavaScript 库在 TypeScript 项目中使用时具有类型检查。 **Iterators 和 Generators** 迭代器和生成器是 ES6 中的特性，TypeScript 提供了对其的支持，用于处理可迭代...
Weex中TypeScript应用：代码质量与效率的双重提升
随后，文章详细阐述了TypeScript在Weex项目中的高效使用方法，包括模块化策略和代码复用技巧。进一步，我们探讨了TypeScript如何提升Weex项目代码质量，特别是在类型安全、错误检测、接口文档生成、单元测试和持续...
在 TypeScript 中，interface 和 class 的区别
xuukai的博客
03-19 636
interface是一种抽象的类型定义，用于描述对象的结构，不能实例化，主要用于类型检查。class是一种代码模板，用于定义对象的结构和行为，可以通过new关键字实例化，适用于定义具体的行为和状态。在实际开发中，可以根据需求选择合适的工具。如果只需要描述对象的结构，使用接口；如果需要定义对象的行为并创建实例，使用类。
typescript interface 和 class 的区别
hsany330的专栏
09-30 2486
interface: 接口只负责声明成员变量类型，不做具体实现。 class：类既声明成员变量类型并实现。 interface是什么? 在OOP语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。 TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。 例如： interface Person { name:...
TS 接口、类和泛型
通俗易懂
04-30 1024
文章目录接口作用定义接口类 interface类基本语法抽象类和接口的区别泛型官方介绍核心思想基本语法 接口 作用 接口的作用就是为这些类型命名和为你的代码或者第三方代码定义契约 简单来说接口就是用于封装一系列的需求限制条件 定义接口 通过 interface关键字定义接口 interface person{ name: string; iphone?: number; // 可选（iphone可以不存在） readonly sex: string; // 只读（做为变量使用的
typescript中的class与interface和type的区别
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
02-19 4338
在 TypeScript 中，type、interface 和 class 分别具有自己的用途和特点。type适用于定义类型别名、联合类型、交叉类型等，并且不需要运行时信息。interface主要用于定义对象的类型和形状，支持继承和实现。class既包含类型信息，也包含实际的属性和方法实现。在实际开发中，我们应根据需求选择合适的类型声明方式。虽然 type 和 interface 在很多场景下可以互换使用，但它们在某些特定场景下有着各自的优势。
TypeScript的类与接口（Interfaces）
05-18 568
通过本文的介绍，我们深入了解了TypeScript中的类和接口。类是创建对象的模板，而接口定义了对象应该具有的结构。这两个概念在面向对象编程中非常重要，它们帮助我们创建结构化和模块化的代码。在后续的文章中，我们将继续探索TypeScript的其他特性，如泛型、装饰器等，并提供实际的代码示例和最佳实践。
TS类和接口
KEEP CODING
12-01 906
不自己动手实现一两个设计模式怎么算得上是讨论面向对象编程呢？”
ts 的class和interface的区别
weixin_44494811的博客
12-23 2092
参考文章https://www.cnblogs.com/minigrasshopper/p/7693478.html 总结文章内容： ts是类型语言，当用class做为类型的时候，应用的时候变量只能是对应class的实例。当接口作为类型，应用的时候变量可以是实现了不同接口的class的实例 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卸载引擎

如果对您有帮助，请赏个饭吃

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值