一、前言
各位读者 ，大家好，今天我来完成TypeScript的下篇了，上篇我们主要介绍了TypeScript的类型声明，接口等概念，如果读者朋友还没有了解过这部分的概念，请前往上一篇进行查看哦，今天我们将对TypeScript(以下简称TS)的类，泛型等概念做一个总结和介绍。话不多说我们接下来开始。。。
在开始之前，我希望各位能够准备几样知识储备，ES6中的类，面向对象对象编程思想。
二、认识类
类是面向对象编程思想中非常重要的概念，ES6对类进行了支持，既我们class 声明方式，在此之前我们只能使用构造函数去创建类，但今后我们可以使用更为直观的语法啦。
（1）类的继承：我们假设你已经懂得了如何使用类，知道类的概念了，以下的内容我们当做复习好么？
// 关于类
class People {
name:string
constructor(name:string){
this.name = name
}
say(){
console.log('人都有自己的语言，可以进行表达')
}
}
class Man extends People {
muscle:string
constructor(name,muscle:string){
super(name)
this.muscle = muscle
}
aggression(){
console.log('男性往往更加有侵略性，肌肉力量更加发达')
}
}
class Woman extends People {
careful:string
constructor (name:string,careful){
super(name)
this.careful = careful
}
baby(){
console.log('女性可以生孩子但是男性是不可以的，同时女性更加细腻')
}
}
// 以上的例子我们介绍了类的继承的特性，如果我们通过new关键字对Man new 出来的实例进行查看，它具有People的特性
let m1 = new Man('张三','他的肌肉很发达')
m1.name // 张三 继承自 People
m1.aggression() // 男性往往更加有侵略性，肌肉力量更加发达小结：我们可以看到，类是可以进行继承，因此可以扩展很多动能，我们在react中进场可以看到这样的应用，创建类式组件时，都让其继承react.Component对么。
（2）：类的几大修饰符，类中有很多可用的修饰符，可以帮助我们去对每一个属性进行约束定义和扩展。
// 下面来了解一下类的几大修饰符 public private protected static readonly
class Student {
static msg:string = '祖国的花朵' // 静态属性 属于这个类，而不属于实例对象，学生都是祖国的花朵
protected age:number // 被保护的属性 这个age可以在自己的类中和子类中进行使用，
private IdCardNum:number // 私有属性 这个身份证证，外界和子类都不能进行使用，更为的隐私
public name:string // 公有属性 如果不加任何修饰，任何属性其实都属于公有属性。
readonly sex:boolean // 只读属性 只能对其进行查看，而不能对其进行修改
constructor(name:string,age:number,sex:boolean,IdCardNum:number){
this.age = age
this.name = name
this.sex = sex
this.IdCardNum = IdCardNum
}
study(){
console.log(`${this.name}今年${this.age}岁，我每天都在好好的学习`)
}
}
class HightSchoolStudent extends Student {
constructor(name:string,age:number,sex:boolean,IdCardNum:number){
super(name,age,sex,IdCardNum)
}
test(){
console.log(this.age)
console.log(this.IdCardNum) // error 不能访问的
}
}
let s1 = new Student('张三',20,true,1111111)
s1.age // error 被保护属性不能在外部访问
// 存取器
class Person {
public name:string
public get fullName(){
return this.name
}
public set fullName(value : string) {
console.log('我被修改了')
this.name = value;
}
}
let p1 = new Person()
p1.fullName = '小鹏'小结：各位读者一样要记得区分 protected 和 private 的区别哦，前者是可以在内部和子类中使用，但后者只能在内部使用， 后者相对于前者来说更加隐私，更为私密，如果记不住，就记得越短越私密好么。。。。其他的修饰符都很见名知意，我们不多加强调了哦。
三、泛型
我们要来介绍TS的重头戏啦，泛型，在认知让泛型之前我们来看看问题，今天我想定义一个函数接口
// 泛型的初体验
function fun0(arg:string):string {
return arg
}这个接口相信你肯定可以看的懂，但是第二天，发现我们类型不对要换一下了
function fun1(arg:number):number{
return arg
}然后又到了后天我们发现业务需求中又得换一下类型了
function fun1(arg:boolean):boolean{
return arg
}各位发现了么，整个过程中，我们的业务需求仅仅是想换一下类型，但是函数结构都是没有变得，这种数据类型未知的情况，我们肯定会经常遇到，这个时候，我们会不会有一定思考呢，要是我们提前不用指定类型，而是使用时指定类型会不会更好呢。。。。
（1）因此泛型诞生了
// 问题：如果这个参数不是很固定怎么办，难道我们要一个一个写么当然不是我们可以指定一个类型
function fun2<T>(arg:T):T{ // 这个T类型在定义时是未知的在使用时才进行定义
return arg
}使用时我们这样
fun2<string>('张三')
fun2<number>(111)
fun2<boolean>(false)问题是不是就解决了，接下来我们同样的，大刀阔斧的做一下更加深入的例子
（2）：创建泛型函数
let fun3:<T>(arg:T)=>T // 这便是一个表达式版的泛型函数了
// 根据上面的定义我们写出下面这样的函数类型
fun3 = function <Type>(arg:Type):Type{
return arg
}（3）：创建泛型类
// 泛型类
class MyfirstClass <Type> {
public store:Type[]
add(arg:Type){
this.store.push(arg)
}
minus(){
this.store.unshift()
}
}（4）：创建泛型接口
interface MyFirstInterface<Type>{
name:Type
add():Type
}（5）：泛型的继承
// 泛型继承
interface hasLength {
length:number
}
// 当我们想对某个未知类型做特定操作，但发现未知属性没有相应的操作条件，可以使用继承使其继承相应的属性，进行操作。
function doSelf <T extends hasLength>(arg:T):T{
console.log(arg.length)
return arg
}（6）：泛型的应用
// 小结：什么是泛型，所谓泛型，其实就是在进行定义函数 ，类，接口是，不预先指定类型，因为往往我们也不知道到将来用的时候到底使用什么样的类型，
// 但是又不能直接使用any来代替，因为这样就失去的ts的意义了，此时我们可以对该未知的类型进行一个泛型定义，等将来用的时候我们再进行定义，这便是泛型
// 函数使用泛型
function createArr<T>(value:T,count:number):Array<T>{
let arr:Array<T> = []
for(var i:number=0;i<count;i++){
arr.push(value)
}
return arr
}
// 使用时
let name:string = '小鹏'
let arr0 = createArr<string>(name,10)
let arr1 = createArr<number>(10,10)
console.log(arr0)
// 接口定义泛型
interface Store <T> {
store:Array<T> // 仓库
add:(thing:T)=>Array<T>
sell:(name:string)=>Array<T>
}
class Pet {
name:string = ''
price:number = 999
constructor(name:string,price:number){
this.name = name
this.price = price
}
say(){
alert('主人，你好')
}
}
class PetStore implements Store<Pet>{
store:Array<Pet> = []
add(thing:Pet){
this.store.push(thing)
return this.store
}
sell(name:string){
let index:number
for(var i:number=0;i<this.store.length;i++){
if(this.store[i].name == name){
index = i
}
}
this.store.splice(index,1)
return this.store
}
}
let ps = new PetStore()
let p1 = new Pet('小张',22)
ps.add(p1)
console.log(ps)四、结语
最后感谢你能够将这片文章看完，虽然这片文章是下篇，但其实TS的学习其实远没有结束，本篇文章只是对TS的最浅层次的使用做了一定的总结，其实还有更为有趣和惊艳的写法呢，下一篇我争取写一篇关于TS的进阶的一些用法和跟大家一起交流一部分关于TS高阶部分的应用，拭目以待吧，这篇文章当然还有很多需要改进的地方，如果读者发现了希望大佬能够在评论区指正哦，我一定第一时间改善，还是那句话，立志成为一名优秀的前端工程师，我们一直在路上，一起加油。
