咸鱼自救指南--typescript关于接口那些事

最新推荐文章于 2024-09-11 15:33:18 发布

是开心的栗子呀

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量158

点赞数 1

分类专栏： typescript vue3 文章标签： typescript javascript 开发语言 vue.js 前端

本文链接：https://blog.csdn.net/m0_62209297/article/details/125913581

版权

typescript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

一级标题

1、接口初识

    接口是什么？
    接口是对象的状态和行为的抽象。它是一种类型；是一种规范；是一种能力；也是一种约束
  对于不太了解tyoescript的同学，第一次想要了解接口，可能有点不太能够懂它的意思，没有关系。下面我们通过一个需求来慢慢揭开接口的神秘面纱

/* 
需求: 
	创建人的对象, 需要对人的属性进行一定的约束
    id是number类型, 必须有, 只读的
    name是string类型, 必须有
    age是number类型, 必须有
    sex是string类型, 可以没有
*/
//2、定义一个接口，该接口作为person对象的类型使用，此时可以限定或者约束该对象中的属性数据
interface IPerson{
  //此时代表id是只读的，是number类型的，readonly修饰符只能写在属性之前
   readonly id: number
  	name: string
  	age: number
  	//此时代表sex是可选属性：可以写也可以不写
  	？ sex: string
}
//1、定义一个对象，该对象的类型就是定义的接口IPerson 
const person1: IPerson = {//此时IPerson 会报错：“找不到名称：IPerson ”
  id: 1,
  name: 'tom',
  age: 20,
 ？ sex: '男'
}

以上就是一个最基础的关于接口的案例，现在你可能还会有所疑惑，没关系我们慢慢往下看，对于接口的一些知识，然后慢慢来梳理

接口的基本概念及定义

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型，可以便于对属性及方法的描述。
接口：它就是一种类型；是一种规范；是一种能力；也是一种约束，用于对象的状态(属性)和行为(方法)的抽象(描述)`。在上述案列中，我们用IPerson这个接口来对person1人的属性进行了一些约束，这就是接口

接口内的属性

a、必须属性：一旦添加在接口里就表示必须属性

//示例：
 	name: string
  	age: number

b、可选属性：接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在。用？修饰符

//使用语法：
？ sex: '男'

c、只读属性：一些对象属性只能在对象刚刚创建的时候修改其属性。用readonly修饰符

//使用语法：
readonly id: number
//补充内容：
/*
const VS readonly
做为变量使用的话用 const，若做为属性则使用 readonly
*/

接口的特点

1、多写或者少写属性是不允许的：类型检查器会查看对象内部的属性是否与IPerson接口描述一致, 如果不一致就会提示类型错误
2、只读属性：（一些对象属性只能在对象刚刚创建的时候修改其值）readonly修饰符需要添加在属性之前
3、可选属性：（接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在）？修饰符，需要添加在属性之前
4、必须属性：一旦添加在接口里就表示必须属性

2、接口描述函数类型

接口除了描述带有属性的普通对象外，接口也可以描述函数类型。

接口可以描述函数参数的类型与返回的类型

我们同样以一个案例来实现。
为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

/*
需求：定义一个函数mySearch，用以查找第一个参数中是否存在第二个参数，返回结果为一个布尔值。参数为字符串，返回结果为布尔值
*/
//1、定义一个接口，用来作为某个函数的类型使用
interface SearchFunc {
  //定义一个调用签名
  (source:string,substring:string):boolean//它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
}
//2、定义一个函数，需要满足定义的接口
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
  return source.search(sub) > -1//从source这个字符串中查找sub字符串
}

console.log(mySearch('abcd', 'bc'))

是不是发现接口描述函数非常简单的就实现了，它就是如此简单的可以实现。

3、接口描述类的类型

TypeScript 也能够用接口来明确的强制一个类去符合某种契约

类实现一个接口

语法：

用interface定义接口，用implements描述类的类型

实现案例：

//1、定义一个接口
interface IFly{
  //该方法没有任何的实现
  fly()
}
//2、定义一个类，这时这个类的类型就是上面的接口定义的(也可以理解为IFly接口约束了当前的Person类)
class Person implements IFly{
  //实现接口中的方法
  fly(){
    console.log("我相信我可以")
  }
}

//实现类：实例化对象
const person = new Person()
person.fly()

一个类实现多个接口

语法说明：

用interface定义接口，implements描述类的类型，多个接口用“，”隔开

案例实现：

//1、定义多个个接口
interface IFly{
  //该方法没有任何的实现
  fly()
}；
interface ISwim{
  //该方法没有任何的实现
  swim()
}

//2、定义一个类：这个类的类型就是IFly和ISwim（一个类同时被多个接口约束）
class Person implements IFly,ISwim{
  //实现接口中的方法，必须要真正实现才会不报错
  fly(){
    console.log("我相信我可以")
  }
   swim()(){
     console.log(“我是真的可以”)
   }
}
//3、实例化对象
const person = new Person()
person.fly()
person.swim()

接口继承接口

语法说明：

  使用extends关键字实现继承
  作用：优化一个类描述多个接口一直使用“，”的缺陷

案例实现：

/*
需求：
	在上述函数的基础上：由一个新接口来实现已经存在的IFly和ISwim接口，再由Person来实现对新接口的描述。
作用：优化一个类描述多个接口一直使用“，”的缺陷
*/
//接口可以继承其他的多个接口

//1、定义了一个ALL接口，继承了其他的接口
interface ALL extends IFly，ISwim{
  
}
//2、定义一个类，直接实现ALL接口
class Person implements ALL{
  //实现接口中的方法，必须要真正实现才会不报错
  fly(){
    console.log("我相信我可以")
  }
   swim()(){
     console.log(“我是真的可以”)
   }
}

//3、实例化对象
const person = new Person()
person.fly()
person.swim()