ts中的 接口

Posted 2022-02-11 Magi黄元

一、为什么需要接口？

let obj:object; // 定义了一个只能保存对象的变量
// obj = 1;
// obj = "123";
// obj = true;
obj = name:\'lnj\', age:33;
console.log(obj);

之前我们已经介绍了用这种方式定义一个ts的对象，但是这样定义内部的属性并没有被限制，意义是不大的。

为了进一步定义对象内的各种属性，就产生了接口。

二、什么是接口类型?

和number,string,boolean,enum这些数据类型一样,接口也是一种类型, 也是用来约束使用者的，他的作用是进一步定义对象内的各种属性。

三、基本用法

// 需求: 要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符

interface FullName
    firstName:string
    lastName:string


let obj = 
    firstName:\'Jonathan\',
    lastName:\'Lee\'
    // lastName:18 会报错
;

//firstName, lastName使用了解构赋值
function say(firstName, lastName:FullName):void 
    console.log(`我的姓名是:$firstName_$lastName`);

say(obj);

四、属性数量不确定时的定义方法

 

如果使用接口来限定了变量或者形参, 那么在给变量或者形参赋值的时候, 赋予的值就必须和接口限定的一模一样才可以, 多一个或者少一个都不行。

但是开发中我们往往可能会遇到少一个或者多一个的场景。

（1）少一个，用可选属性

可选属性意如其名，用法也简单，只需要在属性名字后面加一个？即可。

// 需求: 如果传递了middleName就输出完整名称, 如果没有传递middleName, 那么就输出firstName和lastName
interface FullName
    firstName:string
    lastName:string
    middleName?:string
    [propName:string]:any


function say(firstName, lastName, middleName:FullName):void 
    // console.log(`我的姓名是:$firstName_$lastName`);
    if(middleName)
        console.log(`我的姓名是:$firstName_$middleName_$lastName`);
    else
        console.log(`我的姓名是:$firstName_$lastName`);
    


say(firstName:\'Jonathan\', lastName:\'Lee\', middleName:"666");
say(firstName:\'Jonathan\', lastName:\'Lee\');

（2）多一个，用索引签名

用于描述那些“通过索引得到”的类型，比如arr[10]或obj["key"]。

意思有点抽象，可以大概理解为是在定义对象中key（propName）和value的数据结构，后续对象中的属性，只要key和value满足索引签名的限定即可, 无论有多少个都无所谓。

interface FullName 
    [propName:string]:string

let obj:FullName = 
    // 注意点: 只要key和value满足索引签名的限定即可, 无论有多少个都无所谓
    firstName:\'Jonathan\',
    lastName:\'Lee\',
    // middleName:false // 报错
    // 无论key是什么类型最终都会自动转换成字符串类型, 所以没有报错
    // false: \'666\' 




interface stringArray 
    [propName:number]:string


let arr:stringArray = 
    0:\'a\',
    1:\'b\',
    2:\'c\'
;

// let arr:stringArray = [\'a\', \'b\', \'c\'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

五、接口的继承

TS中的接口和JS中的类一样是可以继承的

interface LengthInterface 

  length:number



interface WidthInterface 

  width:number



interface HeightInterface 

  height:number



interface RectInterface extends LengthInterface,WidthInterface,HeightInterface 

  // length:number

  // width:number

  // height:number

  color:string



let rect:RectInterface = 

  length:10,

  width:20,

  height:30,

  color:\'red\'

六、函数接口

函数本质上是一个特殊的对象，我们也可以用接口来定义函数的参数和返回值。

interface SumInterface 
  (a:number, b:number):number


// 建议使用这种写法
let sum:SumInterface= function(x,y) 
  return x + y;


let res = sum(10, 20);

console.log(res);