TypeScript接口介绍

目录
  • 1.接口的定义
  • 2.属性
    • 2.1可选属性
    • 2.2只读属性
  • 3.类类型
    • 3.1继承接口
  • 4.函数类型

前言：

TS的核心原则之一就是对所具有的结构 进行类型检查。接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

最终被编译成JavaScript代码后不包含接口以及类型约束的代码。

1.接口的定义

接口的作用于type关键字类似，但是又不一样。type可以定义简单的数据类型，例如如下代码

type str = string

这种写法就不能应用在 接口 中，接口中只能写函数类型和类类型还有数组类型。

在TS中定义接口使用interface关键字。

示例代码如下所示：

// 定义一个简单的接口
interface Person {
  name: string
}
// 定义 get 方法
function getPersonName(person: Person): void {
  console.log(person.name)
}
// 定义 set 方法
function setPersonName(person: Person, name: string): void {
  person.name = name
}
// 定义一个 person 对象
let person = {
  name: '一碗粥',
}
setPersonName(person, '一碗周')
// 修改成功
getPersonName(person) // 一碗周

Person 接口就像是一个名字，它用来描述使用该接口中的要求，例如此接口中需要一个name属性，且类型为string类型。

值得注意的是，类型检查并不会检查属性的顺序，只需要对应你的属性存在，且类型相同即可。

2.属性

2.1可选属性

如果接口中的某个属性是可选的，或者说仅仅在某个条件下存在，可以在属性名旁边加一个?号。示例代码如下：

;(function () {
  // 定义一个简单的接口
  interface Person {
    name: string
    // 说明 age 是可选的
    age?: number
  }
  // 定义一个 person 对象
  let person = {
    name: '一碗周',
    age: 18,
    hobby: 'coding',
  }
  // 定义 get 方法
  function getPersonName(person: Person): void {
    // console.log(person.age, person.hobby) //  Property 'hobby' does not exist on type 'Person'.
  }
})()

此时的sex属性我们可写可不写，但是hobb 属性，由于没有在接口中定义，我们调用会抛出异常。

2.2只读属性

如果想让一个属性为一个只读属性，仅仅需要在属性前面添加readonly即可。

示例代码如下：

;(function () {
  interface Person {
    // 将 name 设置为只读
    readonly name: string
  }
  // 定义一个 person 对象
  let person = {
    name: '一碗周',
  }
  // 定义 set 方法
  function setPersonName(person: Person, name: string): void {
    person.name = name // Cannot assign to 'name' because it is a read-only property.
  }
  setPersonName(person, '一碗粥')
})()

3.类类型

3.1继承接口

和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

接口继承使用extends关键字，示例代码如下：

// 定义两个接口
interface PersonName {
  name: string
}
interface PersonAge {
  age: number
}

// 定义一个 Person 接口继承于以上两个接口 多个接口使用 , 逗号分割
interface Person extends PersonName, PersonAge {
  hobby: string
  // 定义一个方法，返回值为 string
  say(): string
}
let person = {
  name: '一碗周',
  age: 18,
  hobby: 'coding',
  // 示例方法
  say() {
    return '一碗周'
  },
}
// 定义 get 方法
function getPersonName(person: Person): void {
  console.log(person.name, person.age, person.hobby)
}
getPersonName(person) // 一碗周 18 coding

继承多个接口中间使用,逗号分割。

4.函数类型

在TS中接口还可以对函数类型的接口进行描述。

函数类型接口的定义就像是一个只有参数列表和返回值类型的函数定义，参数列表中每个参数都需要名字和类型 。

示例代码如下所示：

interface MyAdd {
    (x: number, y: number): number
}

定义完成之后我们可以像使用普通接口一样使用这个函数接口。

示例代码如下所示：

let myAdd: MyAdd = (x: number, y: number): number => {
    return x + y
}

上面的代码等同于如下函数定义的代码：

let myAdd: (x: number, y: number) => number = (
    x: number,
    y: number
): number => {
    return x + y
}

到此这篇关于TypeScript接口介绍的文章就介绍到这了,更多相关TypeScript接口 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • TypeScript入门-接口

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

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

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

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

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

  • 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 这种写法就不能应用在 接口 中,接口中只能写函数类型和类

  • PHP中预定义的6种接口介绍

    PHP预定义了6个接口介绍如下: 1.Traversable遍历接口 呵呵!其实它不是一个在PHP中可以使用的接口,内部类才可使用,它有一个用途就是检测一个类是否可以遍历. if($class instanceof Traversable) { //foreach } 2.Iterator迭代器接口 接口摘要: Iterator extends Traversable { //返回当前索引游标指向的元素 abstract public mixed current(void) //返回当前索引游标

  • Java中抽象类和接口介绍

    Java中抽象类和接口介绍

    目录 1.抽象类 1.1 什么是抽象类? 1.2 抽象类属于什么类型? 1.3 抽象类怎么定义? 1.4 抽象方法 2.接口 2.1 关于接口 2.2 接口怎么定义? 2.3 接口基础语法 总结 1.抽象类 1.1 什么是抽象类? 1.1.1 对抽象类的理解 1.1.2 关于抽象类 类与类之间具有共同特征,将这些共同特征提取出来,形成的就是抽象类: 类本身是不存在的,属于抽象类无法创建对象[无法实例化]: 抽象类是用来被子类继承的: finial关键字和abstract关键字不能同时出现: 抽象

  • ASP.NET Core选项接口介绍

    首先要了解 ASP.NET Core 中的配置,请点击这里了解:https://www.jb51.net/article/238451.htm 1,选项接口 ASP.NET Core 中的选项接口,一共有三个,分别是: IOptions<TOptions> IOptionsSnapshot<TOptions> IOptionsMonitor<TOptions> 这三种方式都可以获取到配置,区别在于生命周期和文件监控等. 2,注入配置与IOptions 首先我们创建一个

  • C#中IEnumerable接口介绍并实现自定义集合

    简介 IEnumerable接口是非常的简单,只包含一个抽象的方法GetEnumerator(),它返回一个可用于循环访问集合的IEnumerator对象.对于所有数组的遍历,都来自IEnumerable接口.IEnumerator对象有什么呢?它是一个真正的集合访问器,没有它,就不能使用foreach语句遍历集合或数组,因为只有IEnumerator对象才能访问集合中的项,假如连集合中的项都访问不了,那么进行集合的循环遍历是不可能的事情了. 一.foreach在IEnumerable中案例 p

  • Java程序连接数据库的常用的类和接口介绍

    编写访问数据库的Java程序还需要几个重要的类和接口. DriverManager类 DriverManager类处理驱动程序的加载和建立新数据库连接.DriverManager是java.sql包中用于管理数据库驱动程序的类.通常,应用程序只使用类DriverManager的getConnection()静态方法,用来建立与数据库的连接,返回Connection对象: static Connection getConnection(String url,String username,Stri

  • JAVA 继承基本类、抽象类、接口介绍

    封装:就是把一些属性和方法封装到一个类里. 继承:就如子类继承父类的一些属性和方法. 多态:就如一个父类有多个不同特色的子类. 这里我就不多讲解,下面我主要说明一个继承.继承是OOP(面向对象)的一个特色,java只支持单继承(如果继承两个有同样方法的父类,那么就不知道继承到那个父类的,所以java只支持单继承).继承是java的一个特色,我们用的所以类都继承Objict类,所以就要Object类的方法,如toString().getClass().wait()--所以我们建立的类都有父类. J

  • javascript设计模式 接口介绍

    这本书中第一个重要的内容就是接口. 大家对接口应该都不陌生,简单的说接口就是一个契约或者规范.在强类型的面相对象语言中,接口可以很容易的实现.但是在javascript中并没有原生的创建或者实现接口的方式,或者判定一个类型是否实现了某个接口,我们只能利用js的灵活性的特点,模拟接口. 在javascript中实现接口有三种方式:注释描述.属性验证.鸭子模型. note:因为我看的是英文书,翻译水平有限,不知道有些词汇如何翻译,大家只能领会精神了. 1. 注释描述 (Describing Inte

  • 各种效果的jquery ui(接口)介绍

    基本的鼠标互动:拖拽(drag and dropping).排序(sorting).选择(selecting).缩放(resizing) 各种互动效果:手风琴式的折叠菜单(accordions).日历(date pickers).对话框(dialogs).滑动条(sliders).表格排序(table sorters).页签(tabs).放大镜效果(magnifier).阴影效果(shadow) 第一部分:鼠标交互1.1 Draggables:拖拽所需文件:ui.mouse.jsui.dragg

  •  typeScript入门基础介绍

     typeScript入门基础介绍

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

随机推荐