TypeScript中的interface、type、class——并非是泰联元名重复

先看效果

type 和 interface 有什么异同?

1.interface侧重于描述数据结构,type侧重于描述类型

interface A{
  name:string;
}
type B = 'bb'|'cc'

2.都可以描述一个对象或者函数

interface user {
  name: string;
  age: number
}
interface setUser {
  (name: string, age: number): void
}

type hoster = {
  name: string;
  age: number;
}
type setHoster = (name: string, age: number) => void

3.都可以使用extends,两两组合,四种情况

interface extends type
interface extends interface
type extends interface
type extends type

4.type专属功能-联合类型

// type专属 联合类型
interface Dog {
  wang()
}
interface Cat {
  miao()
}
type Pet = Dog | Cat
type PetList = [Dog,Cat]

5、interface 能够声明合并

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string
}
*/

为什么说如果不清楚什么时候用interface/type,能用 interface 实现,就用 interface , 如果不能就用 type

总之,大多数时候,定义用interface,修改,联合等用 type。

Typescript 中 interface 和 class 的区别?

interface: 接口只负责声明成员变量类型,不作具体实现。

class:类既声明成员变量类型并实现。

interface是什么?

在OOP语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动须要由类(classes)去实现(implement)。

TypeScript 中的接口是一个很是灵活的概念,除了可用于对类的一部分行为进行抽象之外,也经常使用于对「对象的形状(Shape)」进行描述。

interface Person {
 name: string;
 age: number;
}

上述例子就是一个最简单的接口,分别有两个属性分别叫作name和age,对应的值是一个字符串和一个数字。利用接口约束了传入变量的内容,当你不遵照这个约定时,typescript就会抛出一个错误。

Class是什么?

传统方法中,JavaScript 经过构造函数实现类的概念,经过原型链实现继承。而在 ES6 中,咱们终于迎来了 class。TypeScript 除了实现了全部 ES6 中的类的功能之外,还添加了一些新的用法。(今天只讲述类与interface却别,具体类的其余特性可参考官方

//类Person
class Person {
 name: string;
 age: number;
 constructor(name: string, age: number) {
  this.name = name;
	this.age = age;
 }
};

//类充当接口使用,接口中只包含其中的实例属性和实例方法(constructor和static不在其中)
const person: Person = {
 name: '张三',
 age: 18
};

//接口继承类
interface Person1 extends Person{
 sex: string,
 printName() : void
};

const person1: Person1 = {
 name: '张三',
 age: 18,
 sex: '男',
 printName() {
    console.log(this.name) 
 }
};

//类实现接口
class Person2 implements Person1 {
  name: string;
  age: number;
  sex: string;
  email: string;
  printName() {
    console.log(this.name)
  };
}

总结

Typescript中声明class,实际上,除了会建立一个类以外,同时也会建立一个同名的interface(同名的interface只包含其中的实例属性和实例方法)。因此class既能够看成类来使用,也能够看成interface来使用

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值