文章内容输出来源：拉勾教育大前端高薪训练营
文章说明：文章内容为学习笔记，学徒之心，仅为分享; 如若有误，请在评论区指出，如若您觉得文章内容对您有一点点帮助，请点赞、关注、评论，共享
上一篇：第一阶段.模块二：学习笔记-es6的symbol
下一篇：第一阶段.模块二：学习笔记-TypeSrcipt的函数
接口的基本用法
** 接口可以被定义为 对象的形式、函数的形式**
** 定义接口的语法，要用 interface 接口名字 {} **
** 定义接口的时候，注意接口名字的首字母要大写 **
1、接口可以用来为函数内的参数定义参数的类型
2、定义接口的时候，注意接口名字的首字母要大写
// 定义接口
interface NameInfo {
firstName: string,
lastName: string
}
// 创建函数，函数内使用接口
const getFullName = ({ firstName, lastName }: NameInfo): string => {
return `${firstName} ${lastName}`
}
// 声明一个对象
const obj = {
firstName: 'lebron',
lastName: 'james'
}
// 调用函数
console.log(getFullName(obj)) // lebron james
接口的可选属性
1、接口可以用来为函数内的参数指定是否是必填项
2、定义接口的时候，接口内的数据后面紧跟着 ？ 号就可以了
// 定义接口
interface NameInfo {
firstName: string,
lastName: string,
work?: string
}
// 创建函数，函数内使用接口
const getFullName = ({ firstName, lastName, work }: NameInfo): string => {
return `${firstName} ${lastName} ${
work ? work + '是一位篮球明星' : '是一位富商'
}`
}
// 声明一个对象
const obj = {
firstName: 'lebron',
lastName: 'james'
// work: '职业'
}
// 调用函数
console.log(getFullName(obj)) // obj对象内有work属性，返回 lebron james 职业是一位篮球明星
console.log(getFullName(obj)) // obj对象内无work属性，返回 lebron james 是一位富商
接口的多余属性检查 和 绕开多余属性检查
// 定义接口
interface NameInfo {
firstName: string,
lastName: string,
work?: string
}
// 创建函数，函数内使用接口
const getFullName = ({ firstName, lastName, work }: NameInfo): string => {
return `${firstName} ${lastName} ${
work ? work + '是一位篮球明星' : '是一位富商'
}`
}
// **函数内传递的参数中 age 属性是多余的**
// 第一种解决办法：类型断言断言
// 在调用函数的参数后面紧跟着使用类型断言指定对应的接口名字
/**
console.log(
getFullName({
firstName: 'lebron',
lastName: 'james',
work: '职业',
age: 35
} as NameInfo)
)
*/
/**
// 第二种解决办法：利用索引签名
// 在对应的接口里面的最后一项里面写入：[prop:string]:any
interface NameInfo {
firstName: string,
lastName: string,
work?: string,
[prop:string]:any
}
console.log(
getFullName({
firstName: 'lebron',
lastName: 'james',
work: '职业',
age: 35
})
)
*/
/**
// 第三种解决办法：利用类型兼容性
// 把参数声明成一个单独对象，
// 在调用函数的时候，把这个对象传递进去就可以了
// 声明一个对象
const obj = {
firstName: 'lebron',
lastName: 'james',
work: '职业',
age:35
}
// 调用函数
console.log(getFullName(obj)) // obj对象内有work属性，返回 lebron james 职业是一位篮球明星
console.log(getFullName(obj)) // obj对象内无work属性，返回 lebron james 是一位富商
*/
接口的只读属性
// 只需要在接口内属性名的前面加上 readonly 关键字即可
// 只读的意思就是，一但初始化完成，就不能被修改了
// 定义接口
interface NameInfo {
firstName: string
readonly lastName: string
work?: string
}
// 接口也可以被实例化，就是用接口创建一个对象
// 但是在实例化的时候，只读属性是必须要创建的
let NameInfoObj = {
firstName: '你',
lastName: '好',
}
接口定义为函数类型
// 使用普通的方式创建
interface FunInter {
(num1: number, num2: number): number
}
// 使用类型别名的方式创建
type FunInter = (num1: number, num2: number) => number
//创建函数,函数的类型用的是定义的接口的类型
const fun1:FunInter = (n1,n2) => n1+n2
// 调用函数
console.log(fun1(1, 4)) // 5
接口的索引类型
interface Suoyin {
[id: number]: string
}
const obj: Suoyin = {
0: 'james',
'1': 'wade'
}
// 索引类型定义的是number，但是输入字符串也不报错
// 这是因为js引擎在解析的时候，把number类型的转换成了string类型
console.log(obj[1]) // wade
接口的继承接口
// 1、使用关键字 extends 来实现
// 2、接口是可以同时继承多个的，继承的多个接口之间用 ，号隔开
// 定义接口
interface Sports {
sport: string
}
// 定义接口
interface Animals {
age: number
sex: string
}
// 定义接口，接口的多继承
interface Dog extends Animals,Sports {
name: string
}
// 定义接口，接口的单继承
interface Cat extends Animals {
name: string
}
// 创建对象
const dog: Dog = {
name: '龙龙',
age: 3,
sex: '男',
sport:'跑。跳。睡觉'
}
// 创建对象
const cat: Cat = {
name: '小白',
age: 1,
sex: '女'
}
接口的混合类型接口
// 1、typescript的3.1以及以后的版本才支持
interface Counter {
(): void
count: number
}
const getCounter = (): Counter => {
const c = () => {
c.count++
}
c.count = 0
return c
}
const counter: Counter = getCounter()
// const counter = getCounter()
counter()
console.log(counter.count) // 1
counter()
console.log(counter.count) // 2
counter()
console.log(counter.count) // 3
不是很好理解，我没看懂
结语：
来拉钩教育训练营学习已经有三周了，在没有来之前，我都是回家之后打游戏（游戏名：斗战神），来到这里之后才发现居然还有很多大佬也在学习，真的很惊讶，本人自身水平垃圾的一批，再不学习，以后可能一直就是混吃等死的状态了
- 首先来说，拉钩的课程很干，每个视频很短，都是干货，讲师没有一句废话，视频内容覆盖比较广，布置的作业也比较符合实际，导师也会及时批改，然后一周或两周必有直播，直播都会回答学习过程中所遇到的问题和新的内容
- 其次来说，每个班都有班级群，群里居然还有5年或6年的前端开发的大佬(⊙▽⊙)； 班主任和导师也在群里，有任何问题都可以在群里@导师，班级群真的很活跃
- 最后来说一句，如果有其他人也是在打游戏混日子，不如来拉钩教育训练营，尝试着改变一下自己目前所处的环境