typeScript 接口interface

网友投稿 168 2024-02-02


typeScript 接口interface

在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象。接口也叫 interface 。

在 js 中没有接口这个概念，它是新增的。该如何定义呢？下面来一起学习吧

1、接口定义

接口的作用：

在面向对象编程中，接口是一种规范的定义，它定义了行为和动作规范； 在程序设计内，接口起到一种限制和规范的作用；

接口一般使用 interface 关键字来定义，名字首字母需要大写。在项目中定义接口的时候，一般在名字前加一个大写 I 字母，能够快速识别该类型是接口。如：

interface IPerson{  name: string  age: number  sex: string }

接口的主要作用就是用来进行约束对象的规范，如：

interface IPerson{  name: string  age: number  sex: string } let webPerson: IPerson = {  name:"倩倩",  age:18,  sex:girl }

使用上述 IPerson 定义对象的时候，上述三个属性都是必加的，如果漏掉一个就会有错误提示。那如果某些属性有些对象有，有些对象没有呢？比如职业。

接口成员也可以是缺省的，定义的时候使用 "?" ，如：

interface IPerson{  name: string  age: number  sex: string  work?: string }

但是在特殊情况下，有些人有饮食忌讳，大多数没有，有些人有特殊爱好，大多数也没有，此时这个属性不能具体，此时就可以添加任意属性，使用 propName 来定义，如：

interface IPerson{  name: string  age: number  sex: string  work?: string  [propName:string]: any } let webPerson: IPerson = {  name:"倩倩",  age:18,  sex: girl,  hobby: "跳舞",  refuse:"不吃羊肉" }

添加任意属性之后，可以添加任意多个特殊属性。

2、接口继承

接口和类一样，接口也可以相互继承。能够从一个接口里复制成员到另一个接口里，可以灵活地将接口分割到可重用的模块里面。继承的时候使用 extends 关键字。如：

interface IPerson{  name: string  age: number  sex: string  work?: string  [propName:string]:any } interface IAdult extends IPerson{  isHaveChildren: boolean  isBoss: boolean } let Tom: IAdult = {  isBoss: false,  isHaveChildren: false,  name: 倩倩,  age: 20,  sex: "girl" }

一个接口可以继承一个或多个接口，多个接口之间使用逗号 "," 分割。如：

interface IPerson{  name: string  age: number  sex: string } interface IAdult extends IPerson{  isBoss: boolean } interface elderly extends IPerson, IAdult{  isRetire:boolean  }

接口的继承也就是接口的扩展，接口扩展就是多添加了一些约束，一个接口可以扩展多个接口。

3、类实现接口

在 typeScript 中，接口可以继承类，这样接口就具有了类的所有成员，同时这个接口只能引用这个类或者它的字类的实例。如：

class Person{  name:string;  age: number  constructor(name: string, age: number) {   this.name = name   this.age = age  } } interface IAdult extends Person{  married:boolean } let Tom: IAdult = {  name: "Tom",  age: 20,  married: true } console.log(Tom);

接口继承一个类类型时，它会继承类的成员但不包括其实现。

关于typeScript 核心基础

JS 编程技术

本文分享一个基于JQuery实现的电梯导航效果，效果如下：以下是代码实现：<!DOCTYPE html><html lang="en"> <head>    <met ...


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：接口 实现接口 基础 引用 代码
上一篇:Go语言6-接口、反射
下一篇:Flask利用自定义接口实现mock应用详解
相关文章

 发表评论

暂时没有评论，来抢沙发吧~