首页 前端知识 TypeScript中Class Interface Type的定义和区别

TypeScript中Class Interface Type的定义和区别

2024-06-05 13:06:02 前端知识 前端哥 859 839 我要收藏

TypeScript中的ClassInterfaceType是用来定义数据类型的工具。它们的使用情境和作用有些不同。

目录

Class(类)

Interface(接口)

Type(类型)

总结


Class(类)

类可以用于创建对象,它可以定义对象的属性和方法。 类可以单继承父类(每个类只能继承一个父类),并且可以通过创建实例来使用类定义的属性和方法。 类可以封装和组织数据和逻辑。

下面是一个Class的代码示例:

// 定义类  人
class Person {
  // 定义"人"这个类包含的属性
  name: string;
  age: number;

  // 实例化对象时,需传入的属性值
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 实例化对象可调用此方法
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// 实例化一个"人"的对象
const person = new Person("John", 25);
// 调用此类中包含的方法
person.sayHello();

Interface(接口)

接口是用于定义对象的结构和行为的规范。 接口定义了对象应具备的属性和方法,但不提供实现。 接口可以用来描述类的公共部分,并且类可以实现一个或多个接口。 接口可以继承其他接口。

以下是一个Interface的代码示例:

// 定义接口
interface Shape {
  // 定义抽象方法  
  calculateArea(): number;
}

// 通过implements实现以上的接口
class Circle implements Shape {
  radius: number;
  // 构造器
  constructor(radius: number) {
    this.radius = radius;
  }
  // 实现Shape接口方法
  calculateArea() {
    return Math.PI * this.radius ** 2;
  }
}

// 实例化Circle
const circle = new Circle(5);
// 调用计算面积方法
console.log(circle.calculateArea());

Type(类型)

Type是用于定义数据的形状或结构。 Type可以定义基本类型(如number、string、boolean等)或自定义Type(如对象、数组、元组等)。 不支持继承其他Type, 但Type可以使用联合类型、交叉类型等进行复杂定义。 Type可以使用泛型来增加通用性和灵活性。

以下是一个Type的代码示例:

// 描述了一个拥有x和y属性的对象
type Point = {
  x: number;
  y: number;
};

// 描述了一个拥有id和name属性的对象
type Student = {
  id: number;
  name: string;
};

// 描述了一个拥有success和data属性的对象,并且data属性可以是string或number类型
type Result = {
  success: boolean;
  data: string | number;
};

// 定义函数别名,可多处复用(T是一个泛型,此type描述了一个接受泛型参数并返回void的函数类型)
type Callback<T> = (result: T) => void;


// KeyValues类型接收了一个类型参数 T,并使用 extends object 来限制 T 必须是一个对象类型
type KeyValues<T extends object> = {
  [K in keyof T]: T[K];
};

const obj: KeyValues<{ name: string, age: number }> = {
  name: "John Doe",
  age: 25
};

总结

Class是用于定义对象的结构和行为,它是数据和行为的封装。 Interface是用于描述对象的结构和行为的规范,它是对类的抽象。 Type是用于定义数据的形状和结构,它是对数据的抽象。

它们之间的区别在于使用方式和目的不同。Class用于创建对象,Interface用于定义规范,而Type用于定义数据类型。在实际应用中,根据具体需求选择合适的工具。

(如有帮助,请记得点赞三连哦~您的点赞是我持续更新的动力~)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10873.html
标签
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!