【TypeScript】泛型

泛型（Generics）是 TypeScript 中一个重要的概念，它允许你在编写可重用、灵活的函数、类或接口时，参数或返回值的类型变成一个占位符。

下面是一些关于 TypeScript 泛型的基本概念和用法：

1. 函数泛型：

    // 用 T K 限制某一类型
    function xx<T, K>(x: T, y: K):Array<K |T> {
      return [x, y]
    }
    xx(1, false) // 会自动类型推断
   

也可以添加默认类型，例如 T = number ，此时默认为 number ，当然也还是可以使用其他类型。

2. 接口泛型：

    type A<T> = string | number | T
    let a: A<number> = 1
    
    // 或者interface
    interface Data<T> {
      msg: T
    }
    let data: Data<number> = {
      msg: 1
    }
   

   这里我们创建了一个 Box 接口，它接受一个类型参数 T。当我们声明一个 box 变量时，我们指定了泛型类型为 number，这意味着 box 中的 value 属性的类型将会是 number。

3. 类泛型：

   class Pair<T, U> {
     constructor(public first: T, public second: U) {}
   }
   
   let pair = new Pair<number, string>(1, "one");
   

   这里我们创建了一个泛型类 Pair，它可以接受两个类型参数 T 和 U。在实例化时，我们指定了 number 和 string 作为类型参数，因此 pair 对象的 first 属性将是 number 类型，而 second 属性将是 string 类型。

4. 泛型约束：

    // T extends number 就是泛型约束
    function add<T extends number>(a: T, b: T) {
      return a + b
    }
    add(1, 2)
    
    interface Len {
      length: number
    }
    function fn<T extends Len>(a: T) {
      a.length
    }
    // fn(111) // 报错，整型没有长度
    fn("xxx") // 不报错，字符串有长度
    fn([1, 2, 3]) // 不报错，数组有长度
   
    let obj = {
      name: 'xx',
      age: 123
    }
    
    // type Key = typeof obj // 此时 Key 是对象类型 {name: string;age: number;}
    
    // type Key = keyof typeof obj // 此时 Key 是联合类型 "name" | "age"
    // function ob<T extends object,K extends keyof T>(obj:T, key:K) {
    //   return obj[key]
    // }
    // ob(obj, 'name') // xx
    
    interface Data {
      name?:string,
      age?:number
      sex?:string
    }
    type Options<T extends object> = {
      [Key in keyof T]?:T[Key]
    }
    type B = Options<Data>
    // 解析出来结果：
    // type B = {
    //   name?: string;
    //   age?: number;
    //   sex?: string;
    // }
    
    type Option<T extends object> = {
      readonly [Key in keyof T]: T[Key]
    }
    type C = Option<Data>
    // 解析出来结果：
    // type C = {
    //   readonly name?: string;
    //   readonly age?: number;
    //   readonly sex?: string;
    // }
   

应用场景：

const axios = {
  get<T>(url: string): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      let xhr: XMLHttpRequest = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.onreadystatechange = () => {
        if(xhr.readyState == 4 && xhr.status == 200) {
          resolve(JSON.parse(xhr.responseText))
        }
      }
      xhr.send(null)
    })
  }
}
interface Data {
  message:string,
  code:number
}
axios.get<Data>('./data.json').then(res => {
  console.log(res.code);
})

data.json

{
  "messsage":"success"'./index.js'
  "code": 1
}

将 index.ts 同步编译到 index.js ，在 index.html 中引入 ‘./index.js’