being able to create a component that can work over a variety of types rather than a single one

还是为了复用

Hello World of Generics

  1. function identity<T>(arg: T): T {
  2.     return arg;
  3. }
  5. // 可能会想使用 any, 但是使用 any 就会丢失了类型信息
  6. function identity(arg: any): any {
  7.     return arg;
  8. }
  10. // type of output will be 'string'
  11. // explicity set T
  12. let output = identity<string>("myString");
  13. // or ts automatically inference it
  14. let output = identity("myString");

Working with Generic Type Variables

  1. function loggingIdentity<T>(arg: T[]): T[] {
  2.     console.log(arg.length);  // Array has a .length, so no more error
  3.     return arg;
  4. }

Generic Types

  1. // 泛型函数
  2. function identity<T>(arg: T): T {
  3.     return arg;
  4. }
  5. let myIdentity: <T>(arg: T) => T = identity;
  7. // 不一定要用 T, 只要不冲突随便用, 只是约定俗成用 T
  8. function identity<T>(arg: T): T {
  9.     return arg;
  10. }
  11. let myIdentity: <U>(arg: U) => U = identity;
  13. // 使用带有 call signature 的对象字面量来定义泛型函数
  14. // 由此引出下面的带有泛型函数的接口
  15. function identity<T>(arg: T): T {
  16.     return arg;
  17. }
  18. let myIdentity: {<T>(arg: T): T} = identity;
  20. // 有泛型函数的接口
  21. interface GenericIdentityFn {
  22.     <T>(arg: T): T;
  23. }
  24. function identity<T>(arg: T): T {
  25.     return arg;
  26. }
  27. let myIdentity: GenericIdentityFn = identity;
  29. // 泛型接口, 把泛型参数用到整个接口上
  30. interface GernericIndentityFn<T> {
  31.     (arg: T): T;
  32. }
  33. function identity<T>(arg: T): T {
  34.     return arg;
  35. }
  36. let myIdentity: GernericIndentityFn<number> = identity;

Generic Classes

就和泛型接口很像, 类型后面加上
注意只能用在类的 instance side

Generic classes are only generic over their instance side 

  1. class GenericNumber<T> {
  2.     zeroValue: T;
  3.     add: (x: T, y: T) => T;
  4. }
  6. // with number
  7. let myGenericNumber = new GenericNumber<number>();
  8. myGenericNumber.zeroValue = 0;
  9. myGenericNumber.add = function(x, y) { return x + y; };
  11. // with string
  12. let stringNumeric = new GenericNumber<string>();
  13. stringNumeric.zeroValue = "";
  14. stringNumeric.add = function(x, y) { return x + y; };

Generic Constraints

为 T 定义一个约束的集合

  1. interface Lengthwise {
  2.     length: number;
  3. }
  5. function loggingIdentity<T extends Lengthwise>(arg: T): T {
  6.     console.log(arg.length);  // Now we know it has a .length property, so no more error
  7.     return arg;
  8. }

用一个类型参数来约束另一个类型参数

  1. function getProperty<T, K extends keyof T>(obj: T, key: K) {
  2.     return obj[key];
  3. }
  5. let x = { a: 1, b: 2, c: 3, d: 4 };
  7. getProperty(x, "a"); // okay
  8. getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.

using class types in generics

  1. // 工厂函数
  2. function create<T>(c: {new(): T; }): T {
  3.     return new c();
  4. }

更高级的运用, 构造函数和实例间的约束

  1. class BeeKeeper {
  2.     hasMask: boolean;
  3. }
  5. class ZooKeeper {
  6.     nametag: string;
  7. }
  9. class Animal {
  10.     numLegs: number;
  11. }
  13. class Bee extends Animal {
  14.     keeper: BeeKeeper;
  15. }
  17. class Lion extends Animal {
  18.     keeper: ZooKeeper;
  19. }
  21. function createInstance<A extends Animal>(c: new () => A): A {
  22.     return new c();
  23. }
  25. createInstance(Lion).keeper.nametag;  // typechecks!
  26. createInstance(Bee).keeper.hasMask;   // typechecks!