Typescript中的接口

Posted 2022-08-31 公众号_前端每日技巧

接口

js中接口是指方法的api

ts这里的接口是指一种数据结构，接口是用来描述这种数据结构的

通过interface来定义，

接口只用来定义（数据）结构，不要去实现，

当遇到一种复杂的数据的时候，我们可以通过接口来描述它的结构

我们将介绍三种接口：函数接口，对象接口，类接口

函数接口

函数有三种方式：定义式，表达式，构造函数式

在函数的表达式中，会用一个变量来引用这个函数，在程序运行前，为了开辟空间，我们要定义接口，来描述它的结构

interface 函数名称

(arg:type, arg2?:type2):type

在函数中，函数的参数以及函数的返回值会出现数据，因此我们要定义它们的类型结构，我们要定义参数以及返回值的类型，不要定义函数体，因为函数体是函数的实现。

如果参数可有可无，后面添加?

如果函数有返回值，定义返回值类型

如果函数没有返回值，就是void。

对象接口

对象也是一个复杂的数据，为了说明它的接口，我们要定义对象接口

在对象中，它的属性名称，方法名称属于结构

在对象中，它的属性值，方法体属于实现

我们在对象接口中，只定义接口：只定义属性名称和方法\\ interface 接口名称

属性名称

方法的参数和返回值

如果属性名称或者方法可有可无，后面添加？

类接口

有时候，为了说明类的结构，我们也要定义类的接口，定义类的接口跟定义对象接口一样

只定义属性和方法的结构，属性或者方法可有可无，后面添加?

interface 接口名称

属性名称

方法参数和返回值

类接口通常首字母大写，并且使用类接口的时候，要让类使用implements关键字，来实现这个接口。

此时实例化的时候，变量的类型可以类的类型，也可以是接口的类型

如果使用的是接口的类型，属性和方法会受到接口的限制（不存在的方法不能使用）

举例：

// // 函数接口
interface add 
    // 第二个参数可有可无，我们参数后面添加?
    (num1:number, num2?:number):number

// 定义函数表达式变量的类型
let addTow:add = function(num1:number, num2:number):number 
    return num1 + num2;

console.log(addTow(10, 20))
// 只接收一个参数
let addOne:add = function(num1:number):number 
    return num1 + 10

console.log(addOne(2))
// 对象接口
interface Star 
    name:string;
    getName():string;
    // 可有可无的
    getGirlFriend?():string;

// 定义名称
let zss:Star = 
    name: 尼古拉斯赵四,
    getName():string 
        return this.name
    ,
    // 可有可无的方法，可以定义
    getGirlFriend():string 
        return 赵丽颖
    

console.log(zss)
console.log(zss.getName())
console.log(zss.getGirlFriend())
// 定义类的接口
interface Star 
    name:string;
    getName():string;
    getGirlFriend?():string;

// 使用类接口
class MoveStar implements Star 
    name:string;
    constructor(name:string) 
    this.name = name;
    
    // 获取名称的方法
    getName():string 
        return this.name;
    
    getGirlFriend():string 
        return 杨幂
    
    // 获取年龄的方法
    getAge():number 
        return 50;
    

// 实例化
var zss:MoveStar = new MoveStar(周帅帅)
// var zss:Star = new MoveStar(周帅帅);
console.log(zss)
console.log(zss.getAge())