Typescript 中的接口的实现

最新推荐文章于 2025-04-14 16:54:19 发布

原创最新推荐文章于 2025-04-14 16:54:19 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #interface

Typescript 专栏收录该内容

44 篇文章

订阅专栏

本文深入讲解TypeScript中接口的使用方法，包括基本定义、可选属性、函数类型描述、数组及类类型的描述，并探讨接口如何在不同场景下发挥作用。

接口规范了参数的类型


// 打印标签的函数
function printLabel(labelObj:{label:string}) {
    console.log(labelObj.label);
}

let myObj = {label:'Hello'};
printLabel(myObj);

上述过程就相当于实现了一个接口，label 的类型是string，如果修改成别的，是不允许的

简单的接口创建举例

// 用interface关键字 声明一个接口
interface LabelVale {
    label:string;
}

// 函数的参数是接口类型
function printLabel(labelObj: LabelVale) {
    console.log(labelObj.label);
}

var myObj = {
    label:'Hello'
}

printLabel(myObj);

接口的可选属性

    // 声明一个接口
    interface USB {
        name:string;
        age:number;
        color?:string; // 此处加?表示可选参数，可以不传递
    }

    function printUSB(pu: USB) {
        console.log(pu.name);
        console.log(pu.age);
    }

    // 如果是使用某一类型的接口，那么必须将所有方法或属性都实现，可选的除外
    // 如果此处少了name或age中的一个，那么printUSB就是有问题的
    var my = {
        name: 'Joh',
        age: 90
    }

    printUSB(my);

接口用于描述函数类型


interface SearchFunc {
    (source:string, subString:string):boolean;
}

var mySearch:SearchFunc;
mySearch = function(src:string;sub:string) {
    var res = src.search(sub);
    return res != -1;
}

接口用于描述数组类型

interface StringArray {
    [index:number]:string; // 声明一个string类型的数组
}

var myArray:stringArray;

myArray = ['Joh', 'Lily'];
console.log(myArray[0]);

接口用于描述Class类型


interface ClockInterface {
    currentTime:Date;
    setTime(d:Date);
}

class Clock implements ClockInterface {
    currentTime : Date;
    constructor(hour:number, minutes:number, second:number) {
    }
    setTime(d:Date) {
        this.currentTime = d;
    }
}

接口的使用

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth:number;
}

// Square接口继承自Shape和PenStroke, 拥有了接口的所有属性和方法
interface Square extends Shape, PenStroke {
    sideLength:number;
}


var s = <Square>{}

s.color = 'blue';
s.sideLength = 10;
s.penWidth = 10;

接口的混合类型创建


// 接口的混合类型创建
interface Counter{
    interval:number; 
    reset():void; 
    (start:number):string;
}

// 使用
var co : Counter;
co(10);
co.reset();