TypeScript 中的 interface 接口

• Interface接口初步了解

现在我们要作一个简历的自动筛选程序，

const screenResume = (name: string, age: number, height: number) => {
  age < 60 && height >= 160 && console.log(name + "进入面试");
};

screenResume("张三", 18, 180);

这时候老板又增加了需求，说我必须能看到这些简历。于是你又写了这样一个方法。

const getResume = (name: string, age: number, height: number) => {
  console.log(name + "年龄是：" + age);
  console.log(name + "身高是：" + height);
};
getResume("张三", 18, 180);

这时候问题来了，程序开发中一直强调“代码重用”，两个方法用的类型注解一样，需要作个统一的约束。上节课一个类型别名的知识可以解决代码重复的问题，这节课我们就用一个更常用的语法接口（Interface）.

我们可以把这两个重复的类型注解，定义成统一的接口。代码如下：

interface Girl {
  name: string;
  age: number;
  height: number;
}

有了接口后，我们的程序也要作一些修改，需要写成下面的样子。这样就更像是面向对象编程了。

const screenResume = (girl: Girl) => {
  girl.age < 60 && girl.height >= 160 && console.log(girl.name + "进入面试");
};

const getResume = (girl: Girl) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
};
const girl = {
  name: "大张三",
  age: 18,
  height: 170,
};

screenResume(girl);
getResume(girl);

• 接口和类型别名的区别

现在我们学了接口，也学过了类型别名，这两个语法和用处好像一样，

类型别名可以直接给类型，比如string，而接口必须代表对象。

比如我们的类型别名可以写出下面的代码：

type Girl1 = stirng;

但是接口就不能这样写，它必须代表的是一个对象，也就是说，你初始化girl的时候，必须写出下面的形式.

const girl = {
  name: "张三",
  age: 18,
  height: 180,
};

• 接口非必选值得定义

这时候老板又有了新的要求，要求尽量能看到体重，但是不作强制要求，就是可选值吗。那接口如何定义那？其实typeScript已经为我们准备好了相应的办法，就是在:号前加一个?

interface Girl {
  name: string;
  age: number;
  height: number;
  weight?: number;
}

然后我们再修改一下getResume方法，写成这样。

const getResume = (girl: Girl) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
  girl.weight && console.log(girl.name + "体重是：" + girl.weight);
};

• 允许加入任意值
  简历一般是有自由发挥的空间的，所以这时候需要一些任意值，就是自己愿意写什么就写什么。这时候interface接口也是支持的。

interface Girl {
  name: string;
  age: number;
  height: number;
  weight?: number;
  [propname: string]: any;
}

这个的意思是，属性的名字是字符串类型，属性的值可以是任何类型。

这时候我们在对象里给一个性别,代码如下：

const girl = {
  name: "张三",
  age: 18,
  height: 170,
  weight: 50,
  sex: "女",
};

再修改一下代码，这首就没有错误了。

const getResume = (girl: Girl) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
  girl.weight && console.log(girl.name + "体重是：" + girl.weight);
  girl.sex && console.log(girl.name + "性别是：" + girl.sex);
};

这时候我们的程序是不报错的，但是如果我们去掉刚才的设置，就会报错。

[propname:string]:any;  //去掉

• 接口里的方法

接口里不仅可以存属性，还可以存方法，比如这时候有个say()方法，返回值是string类型。这时候你就不要再想成简历了，你需要更面向对象化的编程，想象成一个人。

interface Girl {
  name: string;
  age: number;
  height: number;
  weight?: number;
  [propname: string]: any;
  say(): string;
}

加上这个say()方法后，程序马上就会报错，因为我们对象里没有 say方法。那我们就要给对象一个 say 方法

const girl = {
  name: "张三",
  age: 18,
  height: 170,
  weight: 50,
  sex: "女",
  say() {
    return "hello！！";
  },
};

• 接口和类的约束

我们都知道 JavaScript 从ES6里是有类这个概念的，类可以和接口很好的结合，我们先来看一个例子。下面的

class XiaoJieJie implements Girl {}

这时候类会直接报错，所以我们需要把这个类写的完全点。

class XiaoJieJie implements Girl {
  name = "张三";
  age = 18;
  height = 170;
  say() {
    return "hello！！";
  }
}

• 接口间的继承
  接口也可以用于继承的，比如你新写一个Teacher接口，继承于Person接口。

interface Teacher extends Girl {
  teach(): string;
}

比如这时候老板说了，只看 Teacher 级别的简历，那我们需要修改getResume()方法。

const getResume = (girl: Teacher) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
  girl.weight && console.log(girl.name + "体重是：" + girl.weight);
  girl.sex && console.log(girl.name + "性别是：" + girl.sex);
};

修改后，你就会发现下面我们调用getResume()方法的地方报错了,因为这时候传的值必须有Teach方法，修改girle对象，增加teach()方法，这时候就不会报错了。

const girl = {
  name: "zhangsan",
  age: 18,
  height: number;
  weight?: number;
  sex: "女",
  say() {
    return "hello！！";
  },
  teach() {
    return "hello";
  },
};