TypeScropt中的interface接口

现在我们要作一个简历的自动筛选程序，很简单。年龄小于 25 岁，胸围大于 90 公分的，可以进入面试环节。我们最开始的写法是这样的。

const screenResume = (name: string, age: number, bust: number) => {
    
    
  age < 24 && bust >= 90 && console.log(name + "进入面试");
  age > 24 || (bust < 90 && console.log(name + "你被淘汰"));
};

screenResume("大脚", 18, 94);

写好后，好像我们的程序写的不错，可以在终端中使用ts-node xxx.ts进行查看。这时候老板又增加了需求，说我必须能看到这些女孩的简历。于是你又写了这样一个方法。

const getResume = (name: string, age: number, bust: number) => {
    
    
  console.log(name + "年龄是：" + age);
  console.log(name + "胸围是：" + bust);
};
getResume("大脚", 18, 94);

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

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

const screenResume = (girl: Girl) => {
    
    
  girl.age < 24 && girl.bust >= 90 && console.log(girl.name + "进入面试");
  girl.age > 24 || (girl.bust < 90 && console.log(girl.name + "你被淘汰"));
};

const getResume = (girl: Girl) => {
    
    
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "胸围是：" + girl.bust);
};
const girl = {
    
    
  name: "大脚",
  age: 18,
  bust: 94,
};

screenResume(girl);
getResume(girl);

这时候我们代码就显得专业了很多，以后再用到同样的接口也不怕了，直接使用girl就可以了。

接口和类型别名的区别

现在我们学了接口，也学过了类型别名，这两个语法和用处好像一样，我先表个态，确实用起来基本一样，但是也有少许的不同。

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

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

type Girl1 = stirng;

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

const girl = {
    
    
  name: "大脚",
  age: 18,
  bust: 94,
};

接口非必选值得定义

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

比如把Girl的接口写成这样。

扫描二维码关注公众号，回复： 11933044 查看本文章

interface Girl {
    
    
  name: string;
  age: number;
  bust: number;
  waistline?: number;
}

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

const getResume = (girl: Girl) => {
    
    
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "胸围是：" + girl.bust);
  girl.waistline && console.log(girl.name + "腰围是：" + girl.waistline);
};

 const girl = {
    
    
    name: "大脚",
    age: 18,
    bust: 94,
    waistline:29,
  };
  

  getResume(girl);

允许加入任意值

简历一般是有自由发挥的空间的，所以这时候需要一些任意值，就是自己愿意写什么就写什么。这时候interface接口也是支持的。方法如下：我们接着上面的代码。

interface Girl {
    
    
  name: string;
  age: number;
  bust: number;
  waistline?: number;
  [propname: string]: any;
}

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

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

const girl = {
    
    
  name: "大脚",
  age: 18,
  bust: 94,
  waistline: 21,
  sex: "女",
};

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

const getResume = (girl: Girl) => {
    
    
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "胸围是：" + girl.bust);
  girl.waistline && console.log(girl.name + "腰围是：" + girl.waistline);
  girl.sex && console.log(girl.name + "性别是：" + girl.sex);
};

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

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

接口里的方法

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

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

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

const girl = {
    
    
  name: "大脚",
  age: 18,
  bust: 94,
  waistline: 21,
  sex: "女",
  say() {
    
    
    return "欢迎光临 ，红浪漫洗浴！！";
  },
};
  const getResume = (girl: Girl) => {
    
    
    console.log(girl.name + "年龄是：" + girl.age);
    console.log(girl.name + "胸围是：" + girl.bust);
    girl.waistline && console.log(girl.name + "腰围是：" + girl.waistline);
    girl.sex && console.log(girl.name + "性别是：" + girl.sex);
    girl.say() && console.log(girl.say());
  };

  getResume(girl);

接口和类的约束

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

class XiaoJieJie implements Girl {
    
    }

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

class XiaoJieJie implements Girl {
    
    
  name = "刘英";
  age = 18;
  bust = 90;
  say() {
    
    
    return "欢迎光临 ，红浪漫洗浴！！";
  }
}

这里的是implements是个关键词意思是xiaojiejie这个类受到Girl的约束

接口的继承

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

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

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

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

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


  const getResume = (girl: Teacher) => {
    
    
    console.log(girl.name + "年龄是：" + girl.age);
    console.log(girl.name + "胸围是：" + girl.bust);
    girl.waistline && console.log(girl.name + "腰围是：" + girl.waistline);
    girl.sex && console.log(girl.name + "性别是：" + girl.sex);
    girl.say() && console.log(girl.say());
    girl.teach() && console.log(girl.teach());
  };


  const girl = {
    
    
    name: "大脚",
    age: 18,
    bust: 94,
    waistline: 21,
    sex: "女",
    say() {
    
    
        return "欢迎光临 ，红浪漫洗浴！！";
      },
    teach(){
    
    
          return "我是一个老师！"
      }
  };

  getResume(girl);