typeScript8 (接口)

本文介绍了TypeScript中接口的使用,包括其灵活性、对象形状的描述、可选和只读属性、鸭式辨型法的应用、绕开额外属性检查的方法,以及接口与类型别名的区别,强调了TypeScript对值结构的类型检查功能。

接口

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

TypeScript 中的接口是一个非常灵活的概念,除了可用于[对类的一部分行为进行抽象]以外,也常用于对「对象的形状(Shape)」进行描述。

注意:接口一般首字母大写;定义的变量比接口少了一些属性是不允许的 ;多一些属性也是不允许的(赋值的时候,变量的形状必须和接口的形状保持一致

可选 | 只读属性

interface Person {
  readonly name: string; //只读
  age?: number; //可选
}

任意属性

有时候我们希望一个接口中除了包含必选和可选属性之外,还允许有其他的任意属性,这时我们可以使用 索引签名 的形式来满足上述要求。

//一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集
interface Person {
    name: string;
    age?: number; 
    [propName: string]: string | number | undefined;(包含确定属性的类型)
}

鸭式辨型法

所谓的鸭式辨型法就是像鸭子一样走路并且嘎嘎叫的就叫鸭子,即具有鸭子特征的认为它就是鸭子,也就是通过制定规则来判定对象是否实现这个接口。

interface PersonVal {
  name: string;
}

function printLabel(personObj: PersonVal) {
  console.log(personObj.name);
}

//在参数里写对象就相当于是直接给personObj赋值,这个对象有严格的类型定义,所以不能多参或少参。
printLabel({ name: "小陈", age: 18 }); // Error


//用另一个变量myObj接收,myObj不会经过额外属性检查,会根据类型推论为let myObj: { age: number; name: string } = { name: "小陈", age: 18 };,

//参照鸭式辨型法,因为都具有name属性,所以被认定为两个相同,故而可以用此法来绕开多余的类型检查
let myObj = {name: "小陈", age: 18}
printLabel(myObj); // OK

绕开额外属性检查的方式

鸭式变型法、类型断言、索引签名

//索引签名
interface Props { 
  name: string; 
  age: number; 
  money?: number;
  [key: string]: any;
}

接口与类型别名的区别

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 而接口的作用就是为这些类型命名和为你的代码或第三方代码定义数据模型。

type(类型别名)会给一个类型起个新名字。 type 有时和 interface 很像,但是可以作用于原始值(基本类型),联合类型,元组以及其它任何你需要手写的类型。起别名不会新建一个类型 - 它创建了一个新 名字来引用那个类型。给基本类型起别名通常没什么用,尽管可以做为文档的一种形式使用。

(1)两者都可以用来描述对象或函数的类型,语法不同:接口interface;起别名type

(2)与接口不同,类型别名还可以用于其他类型,如基本类型(原始值)、联合类型、元组。

(3)与类型别名不同,接口可以定义多次,会被自动合并为单个接口。

(4)两者的扩展方式不同,但并不互斥。接口可以扩展类型别名,同理,类型别名也可以扩展接口。接口的扩展就是继承,通过 extends 来实现。类型别名的扩展就是交叉类型,通过 & 来实现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值