《五》TypeScript 中的接口

本文详细介绍了 TypeScript 中接口(interface)的使用方法,包括接口的基本定义、实现方式、继承特性及与类型别名的区别等,帮助读者更好地理解并运用接口。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

接口以 interface 开头,一般用于两种情况,一是对对象的形状进行描述,二是对类的一部分行为进行抽象。

  1. 声明对象:对对象的形状进行描述。

    和类型声明类似,其中的只读属性、可选属性、任意属性等的写法完全一样。

    interface PersonInterface {
    	name: string,
    	age: number
    }
    
    let p: PersonInterface = {
      name: 'Lee',
      age: 18,
    }
    
  2. 被类实现:对类的一部分行为进行抽象。定义类时,可以使用 implements 去实现一个接口,也就是说,接口中定义的所有属性和方法,类中都必须实现。一个类可以实现多个接口,多个接口之间以逗号分隔。
    interface PersonInterface {
      name: string,
      age: number,
      eating: () => void,
    }
    
    // Person 类必须实现 customInterface 接口,也就是说,customInterface 接口中定义的所有属性和方法,Person 类中都必须实现
    class Person implements PersonInterface{
      name: string
      age: number
    
      eating() {}
    }
    

接口支持继承:

接口支持使用 extends 实现继承。

interface PersonInterface {
	name: string,
	age: number
}

interface StudentInterface extends PersonInterface {
	height: number
}

// 正确
let student: StudentInterface = {
  name: 'Lee',
  age: 18,
  height: 1.88,
}

// 错误
let student1: StudentInterface = {
  name: 'Mary',
  age: 18,
}

接口和类型别名的区别:

接口和类型别名非常类似,因此,在定义对象类型的时候,大部分情况下可以任意选择使用。

实际开发过程中,定义非对象类型,更常使用 Type;定义对象类型,更常使用 interface,因为 interface 功能更多、可扩展性更强。

它们的区别是:

  1. Type 使用范围更广;interface 只能用来声明对象。

    interface peopleInterface {
    	name: string,
    	age: number
    }
    
    type peopleType = {
    	name: string,
    	age: number
    }
    type IDType = number | string
    
  2. Type 不允许两个相同名称的别名存在;interface 可以多次声明同一个接口名称,并且接口最终的定义是加起来的总和。

    也就是说,如果多次声明了同一个接口名称,在定义对象类型的时候,对象必须每个接口都符合。

    // 正确
    interface peopleInterface {
    	name: string,
    	age: number
    }
    interface peopleInterface {
    	height: number
    }
    
    // 报错
    type peopleType = {
    	name: string,
    	age: number
    }
    type peopleType = {
    	height: number
    }
    
  3. Type 不支持继承,interface 支持继承。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值