文章内容输出来源：拉勾教育大前端高薪训练营
文章说明：文章内容为学习笔记，学徒之心，仅为分享; 如若有误，请在评论区指出，如若您觉得文章内容对您有一点点帮助，请点赞、关注、评论，共享
上一篇：第一阶段.模块二：学习笔记-TypeSrcipt的函数
下一篇：第一阶段.模块二：学习笔记-es6的类基础
ts 的泛型
泛型就是在编译期间不确定方法的类型(广泛之意思)，在方法调用时，由程序员指定泛型具体指向什么类型。
泛型主要包括泛型函数、泛型类、泛型接口。
1-泛型的简单使用
// 创建一个数组，数组的元素个数默认是5个
const getArray = (value: any, ArrayLen: number = 5): any[] => {
return new Array(ArrayLen).fill(value)
}
// console.log(getArray(0, 2)) // [0, 0]
console.log(getArray(0, 2).map(item => item.length)) // [undefined, undefined] 数值没有length属性
// 使用 泛型变量<T> 来定义 泛型函数
const getArray = <T>(value: T, ArrayLen: number = 5): T[] => {
return new Array(ArrayLen).fill(value)
}
// 调用 泛型函数 ，传入指定的一个类型
// console.log(getArray<number>(0, 2)) // [0, 0]
console.log(getArray<string>('nihao', 2)) // [0, 0]
// console.log(getArray<number>(0, 2).map(item => item.length)) // 类型“number”上不存在属性“length”。
// 调用 泛型函数 ，传入指定的二个类型
const getArray = <T, U>(value1: T, value2: U, ArrayLen: number = 3): [T, U][] => {
return new Array(ArrayLen).fill([value1, value2])
}
// console.log(getArray(1, 'A')) // 没有指定传入的泛型的类型，ts自己会判断
console.log(getArray<number, string>(1, 'A')) // 指定传入的泛型的类型
2-泛型的变量
通常使用 <T> 来表示泛型变量
3-泛型在类型定义中的使用
// 使用泛型 来定义 函数类型
let getArray: <T>(arg1: T, total: number) => T[] // 使用泛型 来定义 函数类型，
getArray = (arg1: any, total: number = 3): any[] => {
return new Array(total).fill(arg1)
}
// console.log(getArray<number>(888)) // 声明的参数的默认值失效,报错：应有 2 个参数，但获得 1 个。
console.log(getArray<number>(888, 3)) // 声明的参数的默认值失效
// 使用泛型+类型别名type 来定义 函数类型
// 类型别名 的名字首字母要大写
type GetArray = <T>(arg1: T, total: number) => T[]
const getArray:GetArray = (arg1: any, total: number = 3): any[] => {
return new Array(total).fill(arg1)
}
// console.log(getArray<number>(888)) // 声明的参数的默认值失效,报错：应有 2 个参数，但获得 1 个。
console.log(getArray<number>(888, 3)) // 声明的参数的默认值失效
// 使用泛型+接口interface 来定义 函数类型
// 接口 的名字首字母要大写
// 第一种：
interface GetArray {
<T>(arg1: T, total: number) : T[]
}
// 第一种：接口里面的所有属性的类型都可以使用泛型T
interface GetArray<T> {
(arg1: T, total: number): T[]
name: T
}
4-泛型的约束
// 使用方式：<T extends 约束的类型/约束的属性>
// 不想任何数据都可以当做函数的参数，只想把带有length属性的数据，当做参数传递
interface ValueWithLen {
length: number
}
const getArray = <T extends ValueWithLen>(arg1: T, total: number = 3): T[] => {
return new Array(total).fill(arg1)
}
getArray([1,2],5) //可以
getArray('123',5) //可以
getArray(1,5) //不可以 类型“1”的参数不能赋给类型“ValueWithLen”的参数。
getArray({length:3} //可以
5-在泛型约束中使用类型参数
// 定义一个对象，只能访问对象内存在的属性的时候
const getProps = <T, K extends keyof T>(obj: T, propName: K) => {
return obj[propName]
}
const objs = {
a: 'a',
b: 'b'
}
getProps(objs, 'a')
//实现编译保存的时候，就提示有错误
// getProps(objs, 'c') // 类型“"c"”的参数不能赋给类型“"a" | "b"”的参数。
结语：
来拉钩教育训练营学习已经有三周了，在没有来之前，我都是回家之后打游戏（游戏名：斗战神），来到这里之后才发现居然还有很多大佬也在学习，真的很惊讶，本人自身水平垃圾的一批，再不学习，以后可能一直就是混吃等死的状态了
- 首先来说，拉钩的课程很干，每个视频很短，都是干货，讲师没有一句废话，视频内容覆盖比较广，布置的作业也比较符合实际，导师也会及时批改，然后一周或两周必有直播，直播都会回答学习过程中所遇到的问题和新的内容
- 其次来说，每个班都有班级群，群里居然还有5年或6年的前端开发的大佬(⊙▽⊙)； 班主任和导师也在群里，有任何问题都可以在群里@导师，班级群真的很活跃
- 最后来说一句，如果有其他人也是在打游戏混日子，不如来拉钩教育训练营，尝试着改变一下自己目前所处的环境
