TypeScript接口使用介紹

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

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

1 概述

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

接口使用interface關(guān)鍵字來進行定義。

2 接口類別

2.1 屬性接口

屬性接口對傳入的對象進行約束。

interface 接口名 {
屬性1: 類型;
屬性2: 類型;
}

示例代碼：

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"); // 報錯，參數(shù)類型與接口內(nèi)容不符合
people({ name: "橘貓吃不胖" }); // 報錯，參數(shù)缺少age
people({ name: "橘貓吃不胖", age: 2, sex: "女" }); // 報錯，參數(shù)增加了sex

2.2 可選接口

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

interface 接口名 {
屬性1?: 類型;
屬性2?: 類型;
}

示例代碼：

interface IPeople {
    name: string;
    age?: number; // 表示age是可選屬性，有無都可以
}
// 為函數(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: "女" }); // 報錯，屬性增加了sex

2.3 函數(shù)類型接口

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

interface 接口名 {
(參數(shù)1: 類型, 參數(shù)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 可索引接口

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

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

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

// 對數(shù)組的約束
interface Arr {
    // 字符串類型的數(shù)組，數(shù)組索引為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 = []; // 報錯，索引是數(shù)字類型

2.5 類類型接口

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

interface 接口名 {
屬性: 類型;
方法: 類型;
}

示例代碼：

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

如果不實現(xiàn)eat方法，代碼會報錯：

如果多增添一個sleep方法，代碼不會報錯：

3 接口繼承

接口繼承就是說接口可以通過其他接口來擴展自己。TypeScript 允許接口繼承多個接口。繼承使用關(guān)鍵字extends。

1 單接口繼承語法格式

interface 子接口 extends 父接口 {
// 具體實現(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 多接口繼承語法格式

interface 子接口 extends 父接口1, 父接口2... {
// 具體實現(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: