接口
先看一个接口的例子
interface person {
name: string;
}
function work(personObj:person) {
console.log(personObj.name);
}
let person1 = {name: 'Alan', age: 21};
work(person1);
let person2 = {age: 21};
work(person2);
定义接口的关键字是interface
这个例子需要传入work的参数必须是一个带有name(string)的对象,可以理解为我要招聘一个有名字的员工,没有名字的都不需要。
可选属性
那如果我的招聘条件是最好懂typescript的,这个时候typescript就是可有可无的(最好懂,嘿嘿),那我们就要用到可选属性了
可选属性
在可选属性名后面加上一个?
interface person {
name: string;
ts?: boolean;
}
function Recruit(personObj:person) : string{
if(personObj.ts) {
return `congratulations!${personObj.name}`;
} else {
return `sorry,${personObj.name}, we need a employee who know ts!`;
}
}
let person1 = {name: 'Alan', age: 21, ts: true};
console.log(Recruit(person1));
let person2 = {name: 'Bob', age: 21};
console.log(Recruit(person2));
只读属性
我们都知道人的名字都是不可以改变的(一般情况下),这个时候我们对person接口里面的name属性稍作修改,在属性名name前加上readonly
interface person {
readonly name: string;
ts?: boolean;
}
let person1: person = {name: 'Alan'};
person1.name = 'Bob'; // Cannot assign to 'name' because it is a read-only property.
我们发现readonly和const的作用好像有点相似,那我们什么时候使用readonly什么时候使用const呢?
变量---->const
属性---->readonly
函数类型的接口
接口除了可以描述带有属性的对象外,还可以描述函数类型
这里创建一个函数来检查你有没有打卡
interface attendanceFunc {
(name:string, startTime: number, endTime: number) : boolean;
}
let checkAttendance : attendanceFunc;
checkAttendance = function (name:string, startTime: number, endTime: number) : boolean {
let result = startTime < 9 && endTime >18;
return result;
}
console.log(checkAttendance('Alan', 10, 19)); // false
看一下接口的声明:
interface attendanceFunc {
(name:string, startTime: number, endTime: number) : boolean;
}
name,startTime,endTime
放在()
中代表函数的参数
:boolean
表示函数的返回值类型
当然上面例子中的checkAttendance
的形参以及函数的返回值来说可以不指定类型,因为checkAttendance
复制给了attendanceFunc
变量,类型检查器会自动(按照接口中参数的顺序)推断出参数以及返回值的类型,也就是说写成下面这样也是可以的。函数中的参数名可以不和接口中的相同
interface attendanceFunc {
(name:string, startTime: number, endTime: number) : boolean;
}
let checkAttendance : attendanceFunc;
checkAttendance = function (n, startTime, endTime) {
let result = startTime < 9 && endTime >18;
return result;
}
console.log(checkAttendance('Alan', 10, 19)); // false
接口的继承
一个接口可以继承1个或者多个接口:
继承使用关键词extends
interface person {
name : string;
}
interface student {
studentId : number;
}
interface seniorStudent extends person, student {
grade: string;
}
let student1 : seniorStudent = {name: 'Alan', studentId: 1, grade: 'one'};
console.log(student1);