TypeScript 接口(interface)

78 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第11天,点击查看活动详情

前言

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在 TypeScript 里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

解析

在 TypeScript 中,有一个重要的内容,接口。提起来接口这个词,我的脑海中就会想起来和后端人员对接时使用的 api 接口,后端人员在接口文档上,写上请求的方式,请求的 api,请求的参数等等;但是此接口非彼接口,但是含义是相近的!

后端人员规定了我需要传递的字段名称,字段类型,一旦前台传递的参数类型不对应,后台代码就会告诉你,我想要的是一个数字,但是你却传递了一个字符串这种错误,相信我们都遇到过!

那么在 TypeScript 中的接口,其实也是起到了这样的一个作用!

示例

接口主要负责定义一个类的结构,接口可以去限制一个对象的接口,对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时,可以让一个类去实现接口,实现接口时类中要保护接口中的所有属性。

示例 1

// 这里有重名的2个接口,在ts中不报错,实际效果类似c#的partial类
interface myInterface {
    name: string;
    age: number;
}

interface myInterface {
    gender: string;
}

const obj: myInterface = {
    name: 'sss',
    age: 111,
    gender: '男'
};

示例 2

/*
* 接口可以在定义类的时候去限制类的结构,
*   接口中的所有的属性都不能有实际的值
*   接口只定义对象的结构,而不考虑实际值
*       在接口中所有的方法都是抽象方法
*
* */
interface myInter{
    name: string;

    sayHello():void;
}

/*
* 定义类时,可以使类去实现一个接口,
*   实现接口就是使类满足接口的要求
* */
class MyClass implements myInter{
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    sayHello(){
        console.log('大家好~~');
    }

}