p7 TS -- 接口、类型别名

最新推荐文章于 2026-03-31 22:51:02 发布

原创最新推荐文章于 2026-03-31 22:51:02 发布 · 643 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

typescript

本文探讨了TS接口与类型别名的异同，包括适用范围、合并与扩展机制，以及在实际开发中的应用场景。重点讲解了接口如何声明对象行为规范和类型统一，与类型别名的对比和使用技巧。

TS 接口(interface)

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

ts的接口和类型别名很相似

接口与类型别名的区别

接口只适用与对象类型的定义，无论是单个对象还是函数参数为对象，数组元素为对象的定义
类型别名适用与任何变量，并且可以是基础类型
接口可以把重复的类型注解，合并成统一的接口。而类型别名不可以重复。

接口的简单应用

  //定义
	interface person {  
	  name:string,
	  age:number
     }
   //单个接口应用
   const pepole：person = {name:'冰墩墩'，age:18}
   //函数中的应用
   function fn1(student:person){
     return student.age
   }
   //数组元素中的应用
   const arr1: teacher: person[] = [ {name:'冰墩墩老师'，age:23}]

类型别名的应用

//定义
type person2 = {
  name:string,
  age:number
}
//单个别名应用
const pepole : person2 = {name:'雪容融'，age:18}
//简单的应用与接口一样
//类型别名定义基本类型
type str = string
const name :str = '老秦'
const company:str = '德云社'

接口同名、类型别名同名

//接口同名（合并）
 interface myWindow {
   count:number
  }
  interface  myWindow {
   title:string
  }
  const w :myWindow = {
   count:1,
   title:'iphon'
  }
  //类型别名不可以同名
  type myWindow2 = {
   count:number
  }
  type myWindow2 = {   //会警告报错
   title:'华为'  
  }

接口扩展（继承）、类型别名扩展

// 接口扩展
interface Animal {
 name:string
}
interface Tiger extends Animal{
 age:number
}
const tiger: Tiger = {
 name:'嘻嘻'，
 age:1
}

// 类型别名扩展
type Animal2 = {
 name: string
}
type Tiger2 = Animal2  & {
 age:number
}

标签

#前端 #javascript