08. TypeScript 中的 interface 接口

现在我们餐饮公司要开始招聘美女服务员了，这时候你需要一些美女服务员的简历投递和自动筛选功能，就是不符合简历要求的会直接被筛选掉，符合的才可以进入下一轮的面试。那最好的解决方法就是写一个接口。TypeScript 中的接口，就是用来规范类型的。

Interface 接口初步了解

现在我们要做一个简历的自动筛选程序，很简单。年龄小于 25 岁，胸围大于 90 公分的，可以进入面试环节。我们最开始的写法是这样的。（新建一个文件 Demo8.ts,然后编写如下代码）

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 demo8.ts进行查看。这时候老板又增加了需求，说我必须能看到这些女孩的简历。于是你又写了这样一个方法。

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

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

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

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

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

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的接口写成这样。

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

这时候在定义girl对象的时候，就可以写saistline（腰围），也可以不写了。

允许加入任意值

简历一般是有自由发挥的空间的，所以这时候需要一些任意值，就是自己愿意写什么就写什么。这时候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 "欢迎加入我们团队！！";
  },
};

接口和类的约束

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

class XiaoJieJie implements Girl {}

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

class XiaoJieJie implements Girl {
  name = "小红";
  age = 18;
  bust = 90;
  say() {
    return "欢迎加入我们团队！！";
  }
}

接口间的继承

接口也可以用于继承的，比如你新写一个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.bust);
  girl.waistline && console.log(girl.name + "腰围是：" + girl.waistline);
  girl.sex && console.log(girl.name + "性别是：" + girl.sex);
};

修改后，你就会发现下面我们调用getResume()方法的地方报错了，因为这时候传的值必须有Teach方法：

getResume(girl);

修改girl对象，增加teach()方法，这时候就不会报错了。

const girl = {
  name: "小丽",
  age: 18,
  bust: 94,
  waistline: 21,
  sex: "女",
  say() {
    return "欢迎加入我们团队！！";
  },
  teach() {
    return "我是一个老师";
  },
};

关于接口的知识就讲到这里吧，这基本包含了接口 80%的知识，还有些基本不用的语法，我就不讲了。如果课程中遇到，我们再讲。学会了接口，你还需要明白一件事，就是接口只是对我们开发的约束，在生产环境中并没有体现。也可以说接口只是在 TypeScript 里帮我们作语法校验的工具，编译成正式的js代码，就不会有任何用处了。

以上关于08. TypeScript 中的 interface 接口的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。