一文读懂 TypeScript 泛型及应用

function identity (value) {
  return value;
}
console.log(identity(1)) // 1

function identity (value: Number) : Number {
  return value;
}
console.log(identity(1)) // 1

function identity <T>(value: T) : T {
  return value;
}
console.log(identity<Number>(1)) // 1

function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  return value;
}
console.log(identity<Number, string>(68, "Semlinker"));

function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  return value;
}
console.log(identity(68, "Semlinker"));

function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  return value;
}

function identity <T, U>(value: T, message: U) : [T, U] {
  return [value, message];
}

interface Identities<V, M> {
  value: V,
  message: M
}

function identity<T, U> (value: T, message: U): Identities<T, U> {
  console.log(value + ": " + typeof (value));
  console.log(message + ": " + typeof (message));
  let identities: Identities<T, U> = {
    value,
    message
  };
  return identities;
}
console.log(identity(68, "Semlinker"));

68: number
Semlinker: string
{value: 68, message: "Semlinker"}

interface GenericInterface<U> {
  value: U
  getIdentity: () => U
}
class IdentityClass<T> implements GenericInterface<T> {
  value: T
  constructor(value: T) {
    this.value = value
  }
  getIdentity(): T {
    return this.value
  }
}
const myNumberClass = new IdentityClass<Number>(68);
console.log(myNumberClass.getIdentity()); // 68
const myStringClass = new IdentityClass<string>("Semlinker!");
console.log(myStringClass.getIdentity()); // Semlinker!

type Props = {
  className?: string
   ...
};
type State = {
  submitted?: bool
   ...
};
class MyComponent extends React.Component<Props, State> {
   ...
}

function identity<T>(arg: T): T {
  console.log(arg.length); // Error
  return arg;
}

interface Length {
  length: number;
}
function identity<T extends Length>(arg: T): T {
  console.log(arg.length); // 可以获取length属性
  return arg;
}

identity(68); // Error
// Argument of type '68' is not assignable to parameter of type 'Length'.(2345)

function identity<T>(arg: T[]): T[] {
   console.log(arg.length);  
   return arg; 
}
// or
function identity<T>(arg: Array<T>): Array<T> {      
  console.log(arg.length);
  return arg; 
}

interface Person {
  name: string;
  age: number;
  location: string;
}
type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string | number

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

enum Difficulty {
  Easy,
  Intermediate,
  Hard
}
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
let tsInfo = {
   name: "Typescript",
   supersetOf: "Javascript",
   difficulty: Difficulty.Intermediate
}
 
let difficulty: Difficulty = 
  getProperty(tsInfo, 'difficulty'); // OK
let supersetOf: string = 
  getProperty(tsInfo, 'superset_of'); // Error

Argument of type '"superset_of"' is not assignable to parameter of type 
'"difficulty" | "name" | "supersetOf"'.(2345)

interface A<T=string> {
  name: T;
}
const strA: A = { name: "Semlinker" };
const numB: A<number> = { name: 101 };

T extends U ? X : Y

interface Dictionary<T = any> {
  [key: string]: T;
}
 
type StrDict = Dictionary<string>
type DictMember<T> = T extends Dictionary<infer V> ? V : never
type StrDictMember = DictMember<StrDict> // string

async function stringPromise() {
  return "Hello, Semlinker!";
}
interface Person {
  name: string;
  age: number;
}
async function personPromise() {
  return { name: "Semlinker", age: 30 } as Person;
}
type PromiseType<T> = (args: any[]) => Promise<T>;
type UnPromisify<T> = T extends PromiseType<infer U> ? U : never;
type extractStringPromise = UnPromisify<typeof stringPromise>; // string
type extractPersonPromise = UnPromisify<typeof personPromise>; // Person

/**
 * node_modules/typescript/lib/lib.es5.d.ts
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

interface Todo {
  title: string;
  description: string;
}
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}
const todo1 = {
  title: "organize desk",
  description: "clear clutter"
};
const todo2 = updateTodo(todo1, {
  description: "throw out trash"
});

{
   title?: string | undefined;
   description?: string | undefined;
}

/**
 * node_modules/typescript/lib/lib.es5.d.ts
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

interface PageInfo {
  title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" }
};

// node_modules/typescript/lib/lib.es5.d.ts
/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = {
  title: "Clean room",
  completed: false
};

// node_modules/typescript/lib/lib.es5.d.ts
/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number

// node_modules/typescript/lib/lib.es5.d.ts
/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<any>; // any
type T5 = ReturnType<never>; // any
type T6 = ReturnType<string>; // Error
type T7 = ReturnType<Function>; // Error

class FirstClass {
  id: number | undefined;
}
class SecondClass {
  name: string | undefined;
}
class GenericCreator<T> {
  create(): T {
    return new T();
  }
}
const creator1 = new GenericCreator<FirstClass>();
const firstClass: FirstClass = creator1.create();
const creator2 = new GenericCreator<SecondClass>();
const secondClass: SecondClass = creator2.create();

'T' only refers to a type, but is being used as a value here.

interface Point {
  new (x: number, y: number): Point;
}

new C  
new C ( ... )  
new C < ... > ( ... )

new < T1, T2, ... > ( p1, p2, ... ) => R

{ new < T1, T2, ... > ( p1, p2, ... ) : R }

// 构造函数类型字面量
new (x: number, y: number) => Point

{
   new (x: number, y: number): Point;
}

interface Point {
  new (x: number, y: number): Point;
  x: number;
  y: number;
}
class Point2D implements Point {
  readonly x: number;
  readonly y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
const point: Point = new Point2D(1, 2);

Class 'Point2D' incorrectly implements interface 'Point'.
Type 'Point2D' provides no match for the signature 'new (x: number, y: number): Point'.

interface Point {
  x: number;
  y: number;
}
interface PointConstructor {
  new (x: number, y: number): Point;
}

class Point2D implements Point {
  readonly x: number;
  readonly y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
function newPoint(
  pointConstructor: PointConstructor,
  x: number,
  y: number
): Point {
  return new pointConstructor(x, y);
}
const point: Point = newPoint(Point2D, 1, 2);

class GenericCreator<T> {
  create<T>(c: { new (): T }): T {
    return new c();
  }
}

create<T>(c: { new(a: number): T; }, num: number): T {
  return new c(num);
}

const creator1 = new GenericCreator<FirstClass>();
const firstClass: FirstClass = creator1.create(FirstClass);
const creator2 = new GenericCreator<SecondClass>();
const secondClass: SecondClass = creator2.create(SecondClass);