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代码,就不会有任何用处了。