了解接口 — interface
1. 使用在变量前声明'interface'2. 简单案例:声明一个interface,接口一般首字母大写:interface Person { name: string; age: number;}然后就可以使用这个interface来限制一个对象的类型:let tom: Person = { name: 'Tom', age: 12}3. 注意:不允许添加接口未定义的属性
- 定义最基本的信息名字和性别,实现时必须按照这个规范来创建
interface Baseinfo { name:string, sex:string}function pesonInfo(parmasinfo: Baseinfo) { console.log(`姓名:${parmasinfo.name }性别:${parmasinfo.sex}`)}let paramsinfo = {name:'Tom',age:12, sex:'男'} pesonInfo(paramsinfo) // 姓名:Tom性别:男
可选类型 — 用’?’号修饰
有时我们希望不要完全匹配一个接口,那么可以用可选属性,'TS' 提供了一种'?' 来修饰,被问号修饰的参数就是可以选传,不是必须参数
interface Baseinfo { name:string, sex?:string}function printPesonInfo(parmasinfo: Baseinfo) { console.log(`姓名:${parmasinfo.name }`)}let paramsinfo = {name:'Tom'} printPesonInfo(paramsinfo) // 姓名:Tom
索引签名 — 任意属性
1.刚才的'可选类型 '?'号修饰'让我们可以选填一些参数,那么如果需要增加一些不确定参数就 需要使用 '索引签名'(任意属性)2.需要注意的是:一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集
interface Baseinfo { name:string, sex?:string, [other:string]:any}function printPesonInfo(parmasinfo: Baseinfo) { console.log(`姓名:${parmasinfo.name }`)}// 接口中的索引签名other 就会收到ageprintPesonInfo( {name:'Tom',age:13})
// 错误示范interface Person { name: string; age?: number; [propName: string]: string;}let tom: Person = { name: 'Tom', age: 25, gender: 'male'};// 任意属性的值允许是 string类型,但是可选属性 age 的值却是 number,// number 不是 string 的子属性,所以报错了
限制接口中的参数是只读 — readonly
readonly 和 const 都是只读,但两者如何用区别在哪里,首先'readonly '是'TS' 在接口提出,只针对接口中的参数赋值后就禁止更改,而const 是es6 提出的针对变量,不让变量进行更改
interface Person{ readonly x: number; readonly y: number;}// tom 是接口Person类型let tom: Point = { x: 10, y: 20 };tom.x = 5; // error! 已经设置了readonly 属性所以禁止更改
接口 数组 和只读
我们还可以利用接口定义数组位置的类型,和元组不同,元组不仅限制了类型也限制了最开始赋值时候的长度,所以元组可以利用在一些简单点的数组,对于一些复杂的数组可以用接口定义相对灵活一些
interface IArguments { [index: number]: any; length: number; callee: Function;}let args: IArguments = [{ index: 1, length: 5, callee: function (){}}]
// 定义了一个数组接口,数组第一位必须数字并且只读,第二位是字符串interface IArguments { readonly 0:number, 1:string}let arr: IArguments = [1,"w"]arr[0] = 5 // erro 只读类型禁止改变
接口定义函数
接口不止能定义变量值也可以定义函数
// 定义了一个信息接口,里面有姓名,年龄和一个吃的方法返回的类型是string类型interface BaseInfo{ name:string, age:number, eat(food: string):string}const personInfo:BaseInfo = { name:'wang', age:99, eat(parmas){ return parmas }}
对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配函数的参数会逐个进行检查,要求对应位置上的参数类型是相同的
interface SearchFunc { (source: string, subString: string): boolean;}let mySearch: SearchFunc;mySearch = function(src: string, sub: string): boolean { let result = src.search(sub); return result > -1;}
