1. 接口有什么用
通过 interface 定义接口。
检测对象的属性,不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。
javascript
interface IPerson {
name: string;
age: number;
}
function say(person: IPerson): void {
console.log(`my name is ${person.name}, and age is ${person.age}`);
}
let me = {
name: "funlee",
age: 18,
};
say(me); // my name is funlee, and age is 18
2. 可选属性
属性后面加一个 ? 符号,表示该属性可选。
javascript
interface IPerson {
name: string;
age: number;
// love 可选
love?: string;
}
3. 只读属性
属性名前加 readonly,表示该属性只读。
javascript
interface IPerson {
// name 只读
readonly name: string;
age: number;
love?: string;
}
let me: IPerson = {
name: "funlee",
age: 18,
};
// name 不允许被赋值
me.name = "new name"; // error!
4. 函数接口
接口可以描述函数类型,它定义了函数的参数列表和返回值类型,参数列表里的每个参数都需要名字和类型,函数的参数名不需要与接口里定义的名字相匹配,只需要类型兼容就可以了。
javascript
interface GetArea {
(width: number, height: number): number;
}
let getArea: GetArea = function (w: number, h: number) {
return w * h;
};
getArea(5, 6); // 30
5. 继承接口
一个接口可以继承多个接口,创建出多个接口的合成接口,如:
javascript
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength;
}
const square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
6. 混合类型
让对象同时作为函数和对象使用,并带有额外的属性,如:
javascript
interface MixedDemo {
(str: string): void;
defaultStr: string;
}
function foo(): MixedDemo {
let x = <MixedDemo>function (str: string) {
console.log(str);
};
x.defaultStr = "Hello, world";
return x;
}
let c = foo();
c("This is a function"); // 'This is a function'
c.defaultStr; // 'Hello, world'