function genericDemo(data: number): number {
  return data;
}

function genericDemo(data: string): string {  
  return data;
}

function genericDemo<T>(data: T):T {
  return data;
}

function swap<T, U>(tuple: [T, U]):[U, T] {
  return [tuple[1], tuple[0]];
}

interface Identities<T, U> {
  id1: T;
  id2: U;
}

function identities<T, U> (arg1: T, arg2: U): Identities<T, U> {
  console.log(arg1 + ": " + typeof (arg1));
  console.log(arg2 + ": " + typeof (arg2));
  let identities: Identities<T, U> = {
  id1: arg1,
  id2: arg2
 };
 return identities;
}

function genericDemo<T>(data: T):T {
  return data;
}

function genericDemo<T>(data: T):T {
  console.log(data.length); // Error: T doesn't have .length
  return data;
}

function genericDemo<T>(data: Array<T>):Array<T> {
  console.log(data.length);
  return data;
}

interface Props {
  className"color: #ff0000">泛型约束


我们先看一个常见的需求，我们要设计一个函数，这个函数接受两个参数，一个参数为对象，另一个参数为对象上的属性，我们通过这两个参数返回这个属性的值，比如：




function getValue(obj: object, key: string){
  return obj[key] // error
}



我们会得到一段报错，这是新手 TypeScript 开发者常常犯的错误，编译器告诉我们，参数 obj 实际上是 {},因此后面的 key 是无法在上面取到任何值的。


因为我们给参数 obj 定义的类型就是 object，在默认情况下它只能是 {}，但是我们接受的对象是各种各样的，我们需要一个泛型来表示传入的对象类型，比如T extends object:




function getValue<T extends object>(obj: T, key: string) {
 return obj[key] // error
}



这依然解决不了问题，因为我们第二个参数 key 是不是存在于 obj 上是无法确定的，因此我们需要对这个 key 也进行约束，我们把它约束为只存在于 obj 属性的类型，这个时候需要借助到后面我们会进行学习的索引类型进行实现 <U extends keyof T>，我们用索引类型 keyof T 把传入的对象的属性类型取出生成一个联合类型，这里的泛型 U 被约束在这个联合类型中，这样一来函数就被完整定义了：




function getValue<T extends object, U extends keyof T>(obj: T, key: U) {
 return obj[key] // ok
}



另外提一个多重泛型约束的写法，可以当作拓展：




interface firstInterface {
  first(): number
}

interface secondInterface {
  second(): string
}

class Demo<T extends firstInterface & secondInterface >{
  ...
}




在泛型里使用类类型


在TypeScript使用泛型创建工厂函数时，需要引用构造函数的类类型。比如:




function create<T>(type: {new(): T; }): T {
  return new type();
}



参数type的类型{new(): T}就表示此泛型T是可被构造的，在被实例化后的类型是泛型 T。


总结