Typescript Generics

Table of Content

  • What is Generics?
  • Why Generics?
  • How to use Generics?
  • Utility Types (not included)

What is Generics

  • a kind of tool that enables you to create reusable code components that allow a number of types instead of a single type.
  • able to retrieve the complete type information
  • can apply on classes, interfaces, and functions.

Why Generics?

  • to solve problem of type 'any' which is lack of complete information
  • to enable types, classes or interfaces to act as parameters.
  • to reuse the same code for different types of input since the type itself is available as a parameter.

Example

function lastNumber(arr: number[]): number {
    return arr[arr.length - 1];
};

const last1 = lastNumber([1, 2, 3]);  // Output: 3
function lastString(arr: string[]): string {
    return arr[arr.length - 1];
};

const last2 = lastString(["a", "b", "c"]);  // Output: c

  • Repeat same function with different type
function lastBoolean(arr: boolean[]): boolean {
    return arr[arr.length - 1];
};

const last3 = lastBoolean([false, false, true]);  // Output: true
function last(arr: any[]): any {
    return arr[arr.length - 1];
};

const last1 = last([1, 2, 3]);  // Output: 3
const last2 = last(["a", "b", "c"]);  // Output: c

  • Alternative way. we canuUse type 'any'
  • Not recommended as it lose the type information
// typescript does not show error
console.log(last1.length);
console.log(last2.length);

The problem can be solved by using

TypeScript Generics

function last<T>(arr: T[]): T {
    return arr[arr.length - 1];
};

const last1 = last([1, 2, 3]);  // Output: 3
const last2 = last(["a", "b", "c"]);  // Output: c
const last3 = last<boolean>([false, false, true]);  // Output: true

console.log("last1", last1.length); // not valid
console.log("last2", last2.length); // valid
console.log("last3", last3.length); // not valid

How to write Generics Types?

  • let's use T to make our function become generics
const last = <T>(arr: T[]): T => {
    return arr[arr.length - 1];
};
  • generics in arrow function
class ArrayClass<T> {
  private _list: T[];
  constructor() {
    this._list = [];
  }
  
  add(something: T) {
    this._list.push(something);
  }
  
  get(index: number): T {
    return this._list[index]
  }
}

Generics in class

const array1 = new ArrayClass<string>();
array1.add("abc");
const value1 = array1.get(0); // Output: abc


const array2 = new ArrayClass<number>();
array2.add(123);
const value2 = array2.get(0); // Output: 123
class ArrayClass {
    private _list: any[];
    constructor() {
      this._list = [];
    }
    
    add(something: any) {
      this._list.push(something);
    }
    
    get(index: number): any {
      return this._list[index]
    }
}

const array1 = new ArrayClass();
array1.add("abc");
const value1 = array1.get(0); // Output: abc


const array2 = new ArrayClass();
array2.add(123); 
const value2 = array2.get(0); // Output: 123
  • type 'any'
  • generics type
function makeArr<T, K>(value1: T, value2: K) {
    return [value1, value2];
}

// const v: number[]
const v = makeArr(5, 6);
// const v2: string[]
const v2 = makeArr("a", "b");
// const v3: (string | number)[]
const v3 = makeArr("a", 5);

More than 1 Generics Types

function addID(obj: object) {
    const id = Math.random()
    return { ...obj, id };
}

const obj1 = addID({ name: "kfc", count: 666 });
// not valid
console.log(obj1.name);

Generics for object

function addID<T>(obj: T) {
    const id = Math.random()
    return { ...obj, id };
}

const obj1 = addID({ name: "kfc", count: 666 });
console.log(obj1.name);
  • Generics capture all property information from input obj
const obj2 = addID("kfc");
  • Valid input for all type, not only object

Generics with extends

function addID<T extends object>(obj: T) {
    const id = Math.random()
    return { ...obj, id };
}

// not valid
const obj2 = addID("kfc");
  • more specific extends
function getName<T extends { name: string }>(obj: T) {
    return obj.name;
}

// valid
const name1 = getName({ name: "kfc", count: 666 });
const name2 = getName({ name: "john", age: 18 });

// not valid
const name3 = getName({ address: "Petaling jaya" });
const name4 = getName({ name: 123 });

Constraint of Generics

function getLength<T>(arg: T) {
  return arg.length;
}
  • Typescript will throw an exception
interface LengthArgs {
  length: number;
}

function getLength<T extends LengthArgs>(args:T) : number {
  return args.length;
}
  • Example to avoid exception
const l1 = getLength("kfc");  // valid
const l2 = getLength({ name: "ruler", length: 100 });  // valid
const l3 = getLength(28);  // not valid

Generics in interface

interface SpatialData<T> {
    lat: number;
    lon: number;
    data: T
}

type stringSpatialData = SpatialData<string>;
type numberSpatialData = SpatialData<number>;
interface POI {
    name: string;
    address: string;
    poiCode: string;
}

type POISpatialData = SpatialData<POI>;

function getName<T extends POISpatialData>(obj: T) {
    return obj.data.name
}

Reference

Typescript Generics

By shirlin1028

Made with Slides.com

Typescript Generics

  • 303

More from shirlin1028