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