TypeScript接口使用介绍

更新时间：2022年10月20日 09:28:07 作者：橘猫吃不胖～

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

1 概述

接口是一种规范的定义，它定义了行为和动作的规范；在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。

接口使用interface关键字来进行定义。

2 接口类别

2.1 属性接口

属性接口对传入的对象进行约束。

interface 接口名 {
属性1: 类型;
属性2: 类型;
}

示例代码：

interface IPeople {
    name: string;
    age: number;
}
// 为函数的参数使用接口
function people(person: IPeople) {
    console.log("姓名：", person.name);
    console.log("年龄：", person.age);
}
people({ name: "橘猫吃不胖", age: 2 }); // 姓名： 橘猫吃不胖  年龄： 2
people("123"); // 报错，参数类型与接口内容不符合
people({ name: "橘猫吃不胖" }); // 报错，参数缺少age
people({ name: "橘猫吃不胖", age: 2, sex: "女" }); // 报错，参数增加了sex

2.2 可选接口

在接口的属性名后面加一个“?”，表示这个接口是可选的。

interface 接口名 {
属性1?: 类型;
属性2?: 类型;
}

示例代码：

interface IPeople {
    name: string;
    age?: number; // 表示age是可选属性，有无都可以
}
// 为函数的参数使用接口
function people(person: IPeople) {
    console.log("姓名：", person.name);
    console.log("年龄：", person.age);
}
people({ name: "橘猫吃不胖", age: 2 }); // 姓名： 橘猫吃不胖  年龄： 2
people({ name: "橘猫吃不胖" }); // 姓名： 橘猫吃不胖  年龄： undefined
people({ name: "橘猫吃不胖", age: 2, sex: "女" }); // 报错，属性增加了sex

2.3 函数类型接口

函数类型接口可以对对方法传入的参数以及返回值进行约束。

interface 接口名 {
(参数1: 类型, 参数2: 类型): 类型;
}

示例代码：

interface Obj { // 定义接口Obj
    (key: string, value: number): string;
}
var myFun: Obj = function (key: string, value: number): string {
    return key + "：" + value;
}
console.log(myFun("橘猫吃不胖", 2)); // 橘猫吃不胖：2

2.4 可索引接口

可索引接口主要用于对数组和对象的约束（不常用）。

interface 接口名 {
[索引: 类型]: 类型;
}

示例代码：对数组的约束

// 对数组的约束
interface Arr {
    // 字符串类型的数组，数组索引为string类型
    [index: number]: string;
}
var arr1: Arr = ["1", "2", "3"]; // 格式正确
var arr2: Arr = [1, 2, 3]; // 报错

示例代码：对对象的约束

// 对对象的约束
interface Obj {
    // 索引是字符串型
    [index: string]: string;
}
var obj1: Obj = { "张三": "zhangsan", "李四": "lisi" }; // 格式正确
var obj2: Obj = { "张三": 12, "李四": 13 }; // 报错，值不是字符串型
var obj3: Obj = []; // 报错，索引是数字类型

2.5 类类型接口

类类型接口用于对类的属性以及方法进行约束，使用implements关键字对接口进行使用。在类中必须将接口中定义的属性和方法进行实现，否则会报错，并且类可以添加接口定义的之外的方法。

interface 接口名 {
属性: 类型;
方法: 类型;
}

示例代码：

interface IAnimal {
    name: string; // 定义name属性
    eat(): void; // 定义eat方法
}
class Dog implements IAnimal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(): void { // 实现eat方法
        console.log("吃骨头");
    }
}

如果不实现eat方法，代码会报错：

如果多增添一个sleep方法，代码不会报错：

3 接口继承

接口继承就是说接口可以通过其他接口来扩展自己。TypeScript 允许接口继承多个接口。继承使用关键字extends。

1 单接口继承语法格式

interface 子接口 extends 父接口 {
// 具体实现
}

示例代码：

interface Shape {
    color: string;
}
interface Square extends Shape {
    sideLength: number;
}
var s = <Square>{}; // 使用接口
s.color = "red";
s.sideLength = 30;
console.log(s); // { color: 'red', sideLength: 30 }

2 多接口继承语法格式

interface 子接口 extends 父接口1, 父接口2... {
// 具体实现
}

示例代码：

interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
let s1 = <Square>{};
s1.color = "red";
s1.penWidth = 20;
s1.sideLength = 2;
console.log(s1); // { color: 'red', penWidth: 20, sideLength: 2 }

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

您可能感兴趣的文章:

js清空form表单中的内容示例
这篇文章主要介绍了js如何清空form表单中的内容，下面有个不错的示例，大家可以参考下
2014-05-05
JavaScript学习笔记--常用的互动方法
本文对JavaScript中常用的互动方法进行实例分析介绍，图文并茂，有需要的朋友可以看下
2016-12-12
JavaScript函数的4种调用方法实例分析
这篇文章主要介绍了JavaScript函数的4种调用方法,结合实例形式总结分析了javascript函数调用常见操作技巧与注意事项,需要的朋友可以参考下
2019-03-03
使用JavaScript实现检测网页是否为空闲状态
最近开发项目时,常碰到“用户在一定时间内无任何操作时,跳转到某个页面”的需求,所以本文就来使用JavaScript实现这一要求,需要的可以参考下
2024-03-03
JavaScript实现颜色查看器
这篇文章主要为大家详细介绍了JavaScript实现颜色查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
BootStrapTable 单选及取值的实现方法
学习bootstrapTable 一直没有找到单选框的选定的和取值的教程,接下来通过本文给大家分享BootStrapTable 单选及取值的实现方法，非常不错，需要的朋友参考下
2017-01-01
微信小程序登录态和检验注册过没的app.js写法
这篇文章主要介绍了小程序登录态和检验注册过没的app.js写法, 本文通过实例代码给大家介绍的非常详细，具有一定的借鉴价值，需要的朋友可以参考下
2019-05-05
JS实现简单表格排序操作示例
这篇文章主要介绍了JS实现简单表格排序操作,结合具体实例形式分析了JavaScript事件响应及table表格动态操作相关技巧,需要的朋友可以参考下
2017-10-10
JavaScript 正则命名分组【推荐】
以往我们只是习惯于通过数组下标来访问正则匹配到的分组，但分组达到4、5个时，标识起来就会非常麻烦。V8早已实现了正则命名分组提案，只是我们很少使用，本文将介绍JS的正则命名分组
2018-06-06
超详细的JS弹出窗口代码大全
这篇文章主要为大家分享超详细的JS弹出窗口代码大全，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09