泛型

 泛型：组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，用户就可以以自己的数据类型来使用组件。更加灵活

泛型接口

  //泛型接口的第一种定义方式 当这个接口去限制函数，推荐使用这个
  interface IPrint {
    <T>(value: T): T
  }
  const print: IPrint = value => value

  print<string>('abc') //在函数调用时候显示传入T类型
  print('bbb') //这是简写 这样更普遍 利用了类型推断 编译器自动根据所传参数类型'abc'确定T的类型

  
  // 泛型接口的第二种定义方式  当这个接口去实现类implement 推荐使用这种定义方式。
  interface IIdentity1<T> {
    (arg: T): T
  }
  //这样 我就必须在函数定义的时候传入T类型，但是我不知道在函数定义时候传入什么类型。 而不是调用时候传入T类型，这种不好 
  const print1: IIdentity1<any> = value => value //这里IIdentity1必须要求我传入T的类型。传入具体的类型不太好。因为到时候限制我的调用，只能传入具体的类型,所以不得已传入any,传入any后面调用是没有提示的
  const r=print1(100) //r在这个时候是不明确它的类型的，编辑器是没有任何提示
  
  const print2: IIdentity1<string> = value => value 
  const r2=print2('abc') //r2明确知道是string类型。但是也只能传入string类型数据，失去了泛型的意义
  // print2(100)Error  Argument of type 'number' is not assignable to parameter of type 'string'.

例子2

 // 定义泛型接口
  interface IAddFunc {
    <T>(value1: T, value2: T): string | number
  }

  const add: IAddFunc = (value1, value2) => {
    // 直接 return value1+value2 是会报错的 Operator '+' cannot be applied to types 'T' and 'T'.
    if (typeof value1 === 'string' && typeof value2 === 'string') return value1 + value2
    if (typeof value1 === 'number' && typeof value2 === 'number') return value1 + value2
  }
  console.log(add('aaa', 'bbb'))
  console.log(add(10, 20))

更简洁的写法

interface IAddFunc {

    <T>(value1: T, value2: T): T

  }

  const add: IAddFunc = <IAddFunc>(value1, value2) => { //<IAddFunc>是类型断言 尝试用as但是报错了why

    return value1 + value2

  }

  console.log(add(1, 2))

  console.log(add('a', 'b'))

  // add(1, 'a') //Error

泛型类

class ClassName<T> //T可以是基本数据类型：number|string; 也可以是自定义类类型。其他类型应该也可以传进来当作T的类型

// 泛型类
  class MinClass<T>{
    list: Array<T> = []
    push(value: T): void {
      this.list.push(value)
    }
    getMin(): T {
      let minIndex = 0
      for (let i: number = 1; i < this.list.length; i++) {
        if (this.list[minIndex] > this.list[i]) minIndex = i //找出最小值索引
      }
      return this.list[minIndex]
    }

  }
  // 数字类型
  const minNumber = new MinClass<number>()
  minNumber.push(1)
  minNumber.push(30)
  minNumber.push(5)
  minNumber.push(-7)
  minNumber.push(0)
  minNumber.push(100)
  const minNum = minNumber.getMin() //minNum可以确定是number类型 无需显示表示,如果要表示就是number类型

  //字符串类型
  const minString = new MinClass<string>()
  minString.push('f')
  minString.push('d')
  minString.push('4')
  minString.push('ebe')
  minString.push('few')
  minString.push('wewr')
  const minStr = minString.getMin() ///minStr可以确定是string类型 无需显示表示,如果要表示就是string

class User {
    name: string;
    age: number;
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
  }
  class Article {
    title: string;
    time: Date
    desc?: string;
    constructor(title: string, desc?: string, time: Date = new Date) {
      this.title = title
      this.time = time
      this.desc = desc
    }
  }



  class SqlDb<T>{ //T可以是自定义类类型 我想甚至接口都可以传进来
    list: Array<T> = [] //定义一个空泛型对象
    add(item: T): void {
      this.list.push(item)
    }
  }


  const u1 = new User('zs', 10)
  const u2 = new User('lisi', 12)
  const article = new Article('三国演义', '曹操-孙权-刘备')
  const article1 = new Article('红楼梦', '贾宝玉-林黛玉-薛宝钗')
  const userDB = new SqlDb<User>() //看这里 传入自定义类型User
  
  userDB.add(u1)
  userDB.add(u2)
  const articleDB = new SqlDb<Article>() //看这里 传入自定义类型Article
  articleDB.add(article)
  articleDB.add(article1)

泛型约束

例子1

interface ILength {
    length: number //限制泛型必须有length 属性
  }
  interface ILoggingIdentity {
    <T extends ILength>(value: T): T // <T extends ILength> 表示T类型必须有length属性
  }
  const loggingIdentity: ILoggingIdentity = value => {
    console.log(value.length);//我输出length属性 肯定是希望我传入的变量是有length属性的
    return value
  }
  loggingIdentity('abc')
  loggingIdentity({ name: 'zs', age: 10, length: 10 })

泛型类型别名 type定义

 // 接口和type interface定义一个实实在在的接口，接口是一个真正的类型。type一般是定义别名，大白话：type 就是给一个类型起一个新名字。不会产生一个新的类型
  //类型别名type不能用extends implements扩展接口， interface可以
  // 泛型类型别名 type定义
  type CartType<T> = { list: Array<T> } | Array<T> //| 或者意思
  const cart1:CartType<string>={list:['1','2']}
  const cart2:CartType<number>=[1,2,3]

综合案例

里面有自定义类接口约束

/*
  定义一个操作数据库的库同时支持mysql mssql mongDB（泛化）,同时都有add update delete get方法（接口实现类）

  //注意描述：约束统一的规范（接口）；代码的重用（泛型）
  */
  interface DBI<T> { //接口去定义方法 然后用类去实现这个接口implement
    add: (item: T) => boolean
    update: (item: T, id: number) => boolean
    deleteById: (id: number) => boolean
    getById: (id: number) => T
  }
  interface IId { //接口约束T必须有Id属性
    id: number
  }
  // 定义一个操作mysql数据库的类 注意：要实现泛型接口，这个类也应该是一个泛型类
  // 新的知识点 自定义类约束 <T extends IId> 约束T自定义类实例有id属性
  class MySqlDb<T extends IId> implements DBI<T>{
    list: Array<T> = []
    add(item: T) {
      this.list.push(item)
      return true
    }
    update(item: T, id: number) { return true }
    deleteById(id: number) {
      this.list = this.list.filter(item => item.id !== id)

      return true
    }
    getById(id: number): T {
      return this.list.find(item => item.id === id)
    }

  }
  class User {
    id: number
    user: string;
    password: string
    constructor(id: number, user: string, password: string) {
      this.user = user
      this.password = password
      this.id = id
    }
  }
  const u1 = new User(1000, 'zs', '123456')
  const u2 = new User(1001, 'lisi', '123456')
  const mySqlDb = new MySqlDb<User>()
  mySqlDb.add(u1)
  mySqlDb.add(u2)
  console.log('8888888888888888');

  console.log(mySqlDb.getById(1001))
  mySqlDb.deleteById(1001)
  console.log(mySqlDb.list);


  //定义一个操作mssql数据库的类
  class MsSqlDb<T> implements DBI<T>{
    add: (item: T) => boolean;
    update: (item: T, id: number) => boolean;
    deleteById: (id: number) => boolean;
    getById: (id: number) => T;
  }
  //定义一个操作mongDB数据库的类
  class MonDb<T> implements DBI<T>{
    add: (item: T) => boolean;
    update: (item: T, id: number) => boolean;
    deleteById: (id: number) => boolean;
    getById: (id: number) => T;

  }