typeScript 核心基础之接口interface

目录
  • 1、接口定义
  • 2、接口继承
  • 3、类实现接口

前言：

在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象。接口也叫 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 核心基础之接口interface的文章就介绍到这了,更多相关typeScript 接口interface内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • TypeScript 中接口详解

    在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel

  • TypeScript接口介绍

    目录 1.接口的定义 2.属性 2.1可选属性 2.2只读属性 3.类类型 3.1继承接口 4.函数类型 前言: TS的核心原则之一就是对所具有的结构 进行类型检查.接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 最终被编译成JavaScript代码后不包含接口以及类型约束的代码. 1.接口的定义 接口的作用于type关键字类似,但是又不一样.type可以定义简单的数据类型,例如如下代码 type str = string 这种写法就不能应用在 接口 中,接口中只能写函数类型和类

  • TypeScript入门-接口

    大致介绍 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 接口 例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } let myObj = { size: 10, label: "Size 10 Object" }; printLabel(myObj); printLabel函数有一个参数,要求这个参数是个对象,并

  • 基于Typescript与Axios的接口请求管理详解

    目录 思路 请求拦截 响应拦截 使用httpClient.ts定义请求 在组件中请求接口 总结 本文主要介绍基于TS和AXIOS的接口请求封装 思路 请求拦截 在请求头添加一些参数,例如token,uid等 判断用户登录状态,如果没有登录,直接跳转登录 处理请求数据转换发送请求的数据格式,json→urlencoded (可选的) 响应拦截 判断后端响应的业务状态码,进行不同的处理 例如用户登录状态过期,直接跳转登录 统一的报错提示 先把套路化的代码写出来: import axios, { Ax

  • typeScript 泛型使用和泛型接口结合

    typeScript 泛型使用和泛型接口结合

    目录 1.泛型是啥? 2.泛型类型 3.泛型接口 4.泛型类 5.泛型约束 6.泛型参数默认类型 7.泛型条件类型 typeScript 中新增的泛型概念.泛型使用.泛型与接口结合: 在实际应用中可能会遇到求最小值的问题,比如求数组中的最小值. 在 ts 中的就需要写两种方式,一种针对 number,另外一种针对字符串. 这样写不利于代码重用,项目较大时,性能较差,同时工作效率也低,所以在 ts 中引入了泛型概念. function getMin1(arr:number[]):number {

  • TypeScript定义接口(interface)案例教程

    接口的作用: 接口,英文:interface,其作用可以简单的理解为:为我们的代码提供一种约定. 在Typescript中是这么描述的: TypeScript的核心原则之一是对值所具有的结构进行类型检查.它有时被称做"鸭式辨型法"或"结构性子类型化". 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 举个例子: // 定义接口 Person interface Person { name: string; age: numb

  • typeScript 核心基础之接口interface

    目录 1.接口定义 2.接口继承 3.类实现接口 前言: 在面向对象语言中,接口是一个很重要的概念,它是对行为的抽象.接口也叫 interface . 在 js 中没有接口这个概念,它是新增的.该如何定义呢?下面来一起学习吧 1.接口定义 接口的作用: 在面向对象编程中,接口是一种规范的定义,它定义了行为和动作规范: 在程序设计内,接口起到一种限制和规范的作用: 接口一般使用 interface 关键字来定义,名字首字母需要大写.在项目中定义接口的时候,一般在名字前加一个大写 I 字母,能够快速

  •  typeScript入门基础介绍

     typeScript入门基础介绍

    目录 一.安装 TS 二.Vscode 自动编译 ts 三.入门 TS 基础数据类型 接口 类 TS 的特点: 始于 javaScript 归于 javaScript . 强大的类型系统. 先进的 javaScript . 适合开发大型项目,编译成纯 js 代码,js 可以运行在任何浏览器上. typeScript 是区分大小写的一门语言,本篇文章主要带你了解 ts 的安装,环境配置,以及简单的入门. 一.安装 TS 使用之前需要安装: npm install -g typescript 安装完

  • PHP学习记录之面向对象（Object-oriented programming，OOP）基础【接口、抽象类、静态方法等】

    本文实例讲述了PHP面向对象(Object-oriented programming,OOP)基础.分享给大家供大家参考,具体如下: 我们可以使用接口(interface),指定某个类必须实现哪些方法,但不需要定义这些方法的具体内容,我们可以通过 interface 关键字来定义,就像定义一个标准的类一样,但其中定义所有的方法都是空的,但是其中定义的所有方法都必须是公有,这是接口的特性. 但是我们如果要实现一个接口,就得使用 implements 操作符,并且类中必须实现接口中定义的所有方法,否

  • Go语言基础go接口用法示例详解

    Go语言基础go接口用法示例详解

    目录 概述 语法 定义接口 实现接口 空接口 接口的组合 总结 概述 Go 语言中的接口就是方法签名的集合,接口只有声明,没有实现,不包含变量. 语法 定义接口 type [接口名] interface { 方法名1(参数列表) 返回值列表 方法名2(参数列表) 返回值列表 ... } 例子 type Isay interface{ sayHi() } 实现接口 例子 //定义接口的实现类 type Chinese struct{} //实现接口 func (_ *Chinese) sayHi(

  • java基础之接口组成更新的实现

    目录 1.1 接口组成更新概述 1.2 接口中默认方法(JDK8) 1.3 接口中静态方法(JDK8) 1.4 接口中私有方法(JDK9) 1.1 接口组成更新概述 接口的组成 常量:public static final 抽象方法:public abstract 默认方法(Java 8) 静态方法(Java 8) 私有方法(Java 9) 1.2 接口中默认方法(JDK8) 我们都知道,一个类实现一个接口,就要重写这个接口中的所有抽象方法.但现在接口中新增了一个方法,实现这个接口的类不想重写这

  • 深入Golang的接口interface

    深入Golang的接口interface

    目录 前言 接口转换的原理 实现多态 前言 go不要求类型显示地声明实现了哪个接口,只要实现了相关的方法即可,编译器就能检测到 空接口类型可以接收任意类型的数据: type eface struct { // _type 指向接口的动态类型元数据 // 描述了实体类型.包括内存对齐方式.大小等 _type *_type // data 指向接口的动态值 data unsafe.Pointer } 空接口在赋值时,_type 和 data 都是nil.赋值后,_type 会指向赋值的数据元类型,d

  • 浅谈Go语言中的结构体struct & 接口Interface & 反射

    结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套: go中的struct类型理解为类,可以定义方法,和函数定义有些许区别: struct类型是值类型. struct定义 type User struct { Name string Age int32 mess string } var user User var user1 *User = &User{} var user2 *User = new(User) struct使用 下面示例中user1和

  • Javascript基础知识（一）核心基础语法与事件模型

    一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途? 1.可以控制网页中所有元素,增加.删除.修改元素的属性. 2.可以在html中放入动态文本. 3.响应用户在使用网页时产生的事件. 4.校验用户输入的数据. 5

  • Hibernate核心思想与接口简介

    hibernate是一个采用ORM机制持久层的开源框架,接下来我们聊聊它的核心思想和接口. 核心思想:ORM是将表与表之间的操作,映射成对象和对象之间的操作,这样简化了持久层的代码,减轻了程序员的负担 ORM是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使用描述对象和数据库之间映射的元数据,将java程序中的对象自动持久化到关系数据库中.本质上就是将数据从一种形式转换到另外一种形式. 所有的Hibernate应用中都会访问Hibernate的5个核心接口.

随机推荐