interface

这是我参与更文挑战的第8天，活动详情查看更文挑战

ts中的interface是一个很基本的概念,我们在使用过程中必须熟练掌握,本文将举例说明其使用

ts中interface接口

作用: 就是用来规范类型的 当两个方法用的类型注解是一样的,需要做一个统一的约束,可以使用类型别名也可以使用interface 有两个方法类型注解是一样的

我们以一个程序员面试的为例子来看看interface到底该怎么用吧 例如一次面试分为笔试written和面试interview两部分

const screenResume = (name: string, written: number, interview: number) => {
     written > 80 && interview >= 90 && console.log(name + "进入面试");
    written < 60 || (interview < 90 && console.log(name + "你被淘汰"));
   };
screenResume('柏特', 88, 99);
const getResume = (name: string, written: number, interview: number) => {
    console.log(name + "笔试成绩是：" + written);
    console.log(name + "面试成绩是：" + interview);
};
getResume("柏特", 88, 99);

把两个重复的类型注解定义成统一的接口

interface People {
    name: string;
    written: number;
    interview: number;
  }

  const screenResume = (girl: People) => {
    girl.written >=80 && girl.interview >= 90 && console.log(girl.name + "面试通过");
    girl.written <80 || (girl.interview < 90 && console.log(girl.name + "你被淘汰"));
  };
  
  const getResume = (girl: Girl) => {
    console.log(girl.name + "年龄是：" + girl.written);
    console.log(girl.name + "身高是：" + girl.interview);
  };
  const girl = {
    name: "晓晓",
    written: 88,
    interview: 99,
  };
  
  screenResume(girl);
  getResume(girl);

接口和类型别名的区别

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

  type Girl1 = stirng;
  const girl = {
    name: "小小",
    written: 88,
    interview: 94,
  };

接口非必选值的定义

其实typeScript已经为我们准备好了相应的办法，就是在:号前加一个?

interface Girl {
  name: string;
  written: number;
  interview: number;
  waistline?: number;
}

/* 允许加入任意值 */
interface Girl {
  name: string;
  written: number;
  interview: number;
  waistline?: number;
  [propname: string]: any; //这个的意思是，属性的名字是字符串类型，属性的值可以是任何类型。
}
/* 接口里的方法 */
interface Girl {
  name: string;
  written: number;
  interview: number;
  waistline?: number;
  [propname: string]: any;
  say(): string; //比如这时候有个say()方法，返回值是string类型。
}

接口和类的约束

类可以和接口很好的结合

class XiaoJieJie implements Girl {
    name = "大熊";
    written = 80;
    interview = 90;
    say() {
      return "面试官好,我是来面试";
    }
  }

接口间的继承

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

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

 const girl = {
   name: "小熊",
   written: 88,
   interview: 94,
   sex: "女",
   say() {
     return "面试官好,我是来面试！！";
   },
   teach() {
     return "我是一个应届生";
   },
 };

接口只是对我们开发的约束，在生产环境中并没有体现。 也可以说接口只是在 TypeScript 里帮我们作语法校验的工具， 编译成正式的js代码，就不会有任何用处了。

TypeScript上手系列文章

TypeScript上手04 类的理解再也不用担心了

TypeScript上手03 数组类型定义

TypeScript上手02 函数参数和返回类型定义

TypeScript上手01 常用数据类型