TypeScript实战-05-TS接口之对象类型接口

一,前言

TS新增了一个重要概念:接口,分为对象类型接口和函数类型接口

二,接口示例

接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约

接口的定义方式:

使用interface关键字

以查询图书商品列表接口API为例:

// 接口声明:API协议约定返回格式
interface ResponseData {resCode: number;resData: ResultData[];message: string;
}// 数据接口声明
interface ResultData {productId: number;productName: string;
}

符合接口约定的对象:

let resultData = {resCode: 0,resData: [{ productId: 1, productName:"TypeScipt实战" },{ productId: 2, productName:"TypeScipt从入门到精通" },],message: "success"
}

输出函数对结果进行打印:

function render(res: ResponseData) {console.log(res.resCode, res.message)res.resData.forEach((obj) => {console.log(obj.productId, obj.productName)})
}render(resultData);

输出:

0 "success"
interface.ts?a8a5:13 1 "TypeScipt实战"
interface.ts?a8a5:13 2 "TypeScipt从入门到精通"

三,额外属性

在接口的实际调用中,后端也经常会传递约定之外的字段,比如:

let resultData = {resCode: 0,resData: [{ productId: 1, productName:"TypeScipt实战", remark:""}, // 接口约定以外的remark字段{ productId: 2, productName:"TypeScipt从入门到精通" },],message: "success"
}

此时,并没有报错,TS允许这种情况的发生

只要传入的对象满足接口的必要条件就可以被允许,即使传入多余的字段也可以通过类型检查

但也有例外,如果直接传入对象字面量,TS就会对额外的字段进行类型检查

绕过检查的方法有3种:

1,将对象字面量赋值给一个变量

以下方式会报错:

render({resCode: 0,resData: [{ productId: 1, productName:"TypeScipt实战", remark: "备注"},{ productId: 2, productName:"TypeScipt从入门到精通" },],message: "success"
})

将对象字面量赋值给一个变量后,在render不再报错:

let result = {resCode: 0,resData: [{ productId: 1, productName:"TypeScipt实战", remark: "备注"},{ productId: 2, productName:"TypeScipt从入门到精通" },],message: "success"
}
render(result)

2,使用类型断言

使用类型断言方式,明确告诉编译器类型是什么,编译器就会绕过类型检查

方法1:

object as targetInterface

render({resCode: 0,resData: [{ productId: 1, productName:"TypeScipt实战", remark:""},{ productId: 2, productName:"TypeScipt从入门到精通" },],message: "success"
} as ResponseData)

方法二:

<targetInterface>object

render(<ResponseData>{resCode: 0,resData: [{ productId: 1, productName:"TypeScipt实战", remark: "备注"},{ productId: 2, productName:"TypeScipt从入门到精通" },],message: "success"
})

3,使用字符串索引签名

添加字符串索引签名:

interface ResultData {productId: number;productName: string;[remark: string]: any;  // 字符串索引签名
}

表示用任意字符串去索引List,可得到任意结果,此时List可以实现支持多个属性

添加字符串索引签名后,以下代码不再报错:


render({resCode: 0,resData: [{ productId: 1, productName:"TypeScipt实战", remark: "备注"},{ productId: 2, productName:"TypeScipt从入门到精通" },],message: "success"
})

三,接口成员-可选属性

对于一个约定好的接口类型,其中有些字段并不是一定会存在的,是可选属性
而之前在接口中声明的字段,是必须要满足的字段,不可以缺少

这时可以使用可选属性,声明方式:

接口属性? 类型注解   表示这个属性可以有也可以没有

四,接口成员-只读属性

interface ResultData {readonly productId: number; // 只读属性productName: string;
}

修改只读属性:

function render(res: ResponseData) {console.log(res.resCode, res.message)res.resData.forEach((obj) => {console.log(obj.productId, obj.productName)obj.productId ++    // 测试只读属性})
}

报错信息:

Cannot assign to 'productId' because it is a read-only property.

五,可索引类型的接口

当不能确定接口中有多少个属性时,可以使用可索引类型接口
可索引类型接口可以用数字去索引,也可以用字符串去索引

1,数字索引接口:

声明一个数字索引类型的接口:

表示用任意数字去索引numberIndex都会得到一个string

interface numberIndex {[x: number]: string
}
// 相当于声明了一个字符串类型的数组
let chars: numberIndex = ['A', 'B']

2,字符串索引接口:

声明一个字符串索引类型的接口:

表示用任意的字符串去索引stringIndex得到的结果都是string

interface stringIndex {[x: string]: string
}

这样声明后,就不能声明number类型的成员了,会报错

interface stringIndex {[x: string]: stringy: number;// Property 'y' of type 'number' is not assignable to string index type 'string'.
}

3,两种索引签名混用:

在上边的字符串索引接口stringIndex中,添加数字索引签名

interface stringIndex {[x: string]: string[z: number]: string
}

这样做.接口既可以用数字索引Names也可以用字符串索引Names

但需要注意:数字索引的返回值,一定要是字符串返回类型的子类型

这是因为JS会进行类型转换,将number转换成string,这样就能保证类型的兼容性

比如:将数组索引的返回值改成number:

interface stringIndex {[x: string]: string[z: number]: number    // // Numeric index type 'number' is not assignable to string index type 'string'.
}

这样就和String类型不兼容了,要取一个能够兼容number的类型,比如any:

interface stringIndex {[x: string]: any[z: number]: number // Numeric index type 'number' is not assignable to string index type 'string'.
}

六,结尾

本篇介绍了TS接口中的对象类型的接口
使用接口,会强制思考变量类型和接口边界问题,有利于培养开发者类型思维

TypeScript实战-05-TS接口之对象类型接口相关推荐

TS对象类型 -- 接口(interface)
/*** 对象类型 -- 接口*/ //在面向对象的语言中,接口(interfaces)是对行为的抽象,而具体如何行动需要类(class)去实现 //在Ts中的接口是非常灵活的概念,除了对行为抽象之外 ...
java使用axis调用.net发布的webservice接口返回对象类型
本人在java中axis-1.4 调用 .net发布的webService接口有问题欢迎各路大神讨论 !!! 1.1 基本类型 1.2 对象类型 1.3复杂对象类型(对象类中嵌套对象类) 返回基本类 ...
学习TypeScrip3（接口和对象类型）
对象的类型在typescript中,我们定义对象的方式要用关键字interface(接口),我的理解是使用interface来定义一种约束,让数据的结构满足约束的格式.定义方式如下: //这样写是会 ...
TypeScript对象类型
对象类型在 JavaScript 中,我们分组和传递数据的基本方式是通过对象.在 TypeScript 中,我们通过对象类型来表示它们. 而TypeScript的核心原则之一是对值所具有的的结构进行 ...
TypeScript：函数类型接口
接口也可以用于描述函数的形状,也就是描述函数的参数列表,以及返回值类型: interface phoneCall{//定义一个打电话的函数类型接口,约定该函数需要有一个string类型的参数,然后返回 ...
typescript 接口 java_Typescript基础(4)——接口
前言今天继续typescript的学习,开始ts接口部分的学习. 接口接口的理解首先,我们谈论一下现实生活中的接口.比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的.插座接口规定 ...
typeScript面试必备之-通识七:typeScript中的可索引接口（数组，对象）+类类型接口...
可索引接口:数组.对象的约束 (不常用) ts定义数组的方式 var arr:number[]=[2342,235325]var arr1:Array<string>=['111','22 ...
ts定义数组类型_TS的对象类型、数组类型、函数类型
对象类型基础使用在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型. 简单例子: interface Person { name: string; age: num ...
5.TypeScript入门之TS高级类型（class类）
上一章节:4.TypeScript入门之TS常用类型(3) Ⅳ.TypeScript高级类型概述 TS中的高级类型有很多,重点学习以下高级类型: class类类型兼容性交叉类型泛型和 keyo ...