Typescript（二）

接口

先看一个接口的例子

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);

image.png

定义接口的关键字是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);