快捷導(dǎo)航

TypeScript接口使用介紹

更新時(shí)間：2022年10月20日 09:28:07 作者：橘貓吃不胖～

接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類(lèi)去實(shí)現(xiàn)，然后第三方就可以通過(guò)這組抽象方法調(diào)用，讓具體的類(lèi)執(zhí)行具體的方法

1 概述

接口是一種規(guī)范的定義，它定義了行為和動(dòng)作的規(guī)范；在程序設(shè)計(jì)里面，接口起到一種限制和規(guī)范的作用。接口定義了某一批類(lèi)所需要遵守的規(guī)范，接口不關(guān)心這些類(lèi)的內(nèi)部狀態(tài)數(shù)據(jù)，也不關(guān)心這些類(lèi)里方法的實(shí)現(xiàn)細(xì)節(jié)，它只規(guī)定這批類(lèi)里必須提供某些方法，提供這些方法的類(lèi)就可以滿(mǎn)足實(shí)際需要。

接口使用interface關(guān)鍵字來(lái)進(jìn)行定義。

2 接口類(lèi)別

2.1 屬性接口

屬性接口對(duì)傳入的對(duì)象進(jìn)行約束。

interface 接口名 {
屬性1: 類(lèi)型;
屬性2: 類(lèi)型;
}

示例代碼：

interface IPeople {
    name: string;
    age: number;
}
// 為函數(shù)的參數(shù)使用接口
function people(person: IPeople) {
    console.log("姓名：", person.name);
    console.log("年齡：", person.age);
}
people({ name: "橘貓吃不胖", age: 2 }); // 姓名： 橘貓吃不胖  年齡： 2
people("123"); // 報(bào)錯(cuò)，參數(shù)類(lèi)型與接口內(nèi)容不符合
people({ name: "橘貓吃不胖" }); // 報(bào)錯(cuò)，參數(shù)缺少age
people({ name: "橘貓吃不胖", age: 2, sex: "女" }); // 報(bào)錯(cuò)，參數(shù)增加了sex

2.2 可選接口

在接口的屬性名后面加一個(gè)“?”，表示這個(gè)接口是可選的。

interface 接口名 {
屬性1?: 類(lèi)型;
屬性2?: 類(lèi)型;
}

示例代碼：

interface IPeople {
    name: string;
    age?: number; // 表示age是可選屬性，有無(wú)都可以
}
// 為函數(shù)的參數(shù)使用接口
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: "女" }); // 報(bào)錯(cuò)，屬性增加了sex

2.3 函數(shù)類(lèi)型接口

函數(shù)類(lèi)型接口可以對(duì)對(duì)方法傳入的參數(shù)以及返回值進(jìn)行約束。

interface 接口名 {
(參數(shù)1: 類(lèi)型, 參數(shù)2: 類(lèi)型): 類(lèi)型;
}

示例代碼：

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 可索引接口

可索引接口主要用于對(duì)數(shù)組和對(duì)象的約束（不常用）。

interface 接口名 {
[索引: 類(lèi)型]: 類(lèi)型;
}

示例代碼：對(duì)數(shù)組的約束

// 對(duì)數(shù)組的約束
interface Arr {
    // 字符串類(lèi)型的數(shù)組，數(shù)組索引為string類(lèi)型
    [index: number]: string;
}
var arr1: Arr = ["1", "2", "3"]; // 格式正確
var arr2: Arr = [1, 2, 3]; // 報(bào)錯(cuò)

示例代碼：對(duì)對(duì)象的約束

// 對(duì)對(duì)象的約束
interface Obj {
    // 索引是字符串型
    [index: string]: string;
}
var obj1: Obj = { "張三": "zhangsan", "李四": "lisi" }; // 格式正確
var obj2: Obj = { "張三": 12, "李四": 13 }; // 報(bào)錯(cuò)，值不是字符串型
var obj3: Obj = []; // 報(bào)錯(cuò)，索引是數(shù)字類(lèi)型

2.5 類(lèi)類(lèi)型接口

類(lèi)類(lèi)型接口用于對(duì)類(lèi)的屬性以及方法進(jìn)行約束，使用implements關(guān)鍵字對(duì)接口進(jìn)行使用。在類(lèi)中必須將接口中定義的屬性和方法進(jìn)行實(shí)現(xiàn)，否則會(huì)報(bào)錯(cuò)，并且類(lèi)可以添加接口定義的之外的方法。

interface 接口名 {
屬性: 類(lèi)型;
方法: 類(lèi)型;
}

示例代碼：

interface IAnimal {
    name: string; // 定義name屬性
    eat(): void; // 定義eat方法
}
class Dog implements IAnimal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(): void { // 實(shí)現(xiàn)eat方法
        console.log("吃骨頭");
    }
}

如果不實(shí)現(xiàn)eat方法，代碼會(huì)報(bào)錯(cuò)：

如果多增添一個(gè)sleep方法，代碼不會(huì)報(bào)錯(cuò)：

3 接口繼承

接口繼承就是說(shuō)接口可以通過(guò)其他接口來(lái)擴(kuò)展自己。TypeScript 允許接口繼承多個(gè)接口。繼承使用關(guān)鍵字extends。

1 單接口繼承語(yǔ)法格式

interface 子接口 extends 父接口 {
// 具體實(shí)現(xiàn)
}

示例代碼：

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 多接口繼承語(yǔ)法格式

interface 子接口 extends 父接口1, 父接口2... {
// 具體實(shí)現(xiàn)
}

示例代碼：

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 }

到此這篇關(guān)于TypeScript接口使用介紹的文章就介紹到這了,更多相關(guān)TypeScript接口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: