Generics

Generic Functions

Generic functions keep a value type connected from input to output.

generic function A generic function uses a type parameter such as `T` so one function can work with many value types.

Generic Functions

firstName
functions.ts
Replay: real traced execution (multi-file project)
function firstItem<T>(items: T[]): T {
    return items[0];
}

const firstName: string = "Ada";
const names: string[] = [firstName, "Milo", "Nia"];
const first: string = firstItem<string>(names);

console.log(`first=${first}`);

function firstItem<T>(items: T[]): T {
    return items[0];
}

const firstName: string = "Grace";
const names: string[] = [firstName, "Milo", "Nia"];
const first: string = firstItem<string>(names);

console.log(`first=${first}`);

function firstItem<T>(items: T[]): T {
    return items[0];
}

const firstName: string = "Linus";
const names: string[] = [firstName, "Milo", "Nia"];
const first: string = firstItem<string>(names);

console.log(`first=${first}`);

  1. firstName ← Ada, names ← Ada,Milo,Nia

    2    return items[0];3}45const firstName→ Ada: string = "Ada";  //@firstName="Grace", "Linus"6const names→ Ada,Milo,Nia: string[] = [firstNameAda, "Milo", "Nia"];7const first: string = firstItem<string>(namesAda,Milo,Nia);

  2. function firstItem<T>(items: T[]): T

    1function firstItem<T>(itemsAda,Milo,Nia: T[]): T {2    return items[0]Ada;3}

  3. first ← Ada

    5const firstName: string = "Ada";  //@firstName="Grace", "Linus"6const names: string[] = [firstName, "Milo", "Nia"];7const first→ Ada: string = firstItem<string>(namesAda,Milo,Nia);89console.log(`first=${firstAda}`);
    outputfirst=Ada

  1. firstName ← Grace, names ← Grace,Milo,Nia

    2    return items[0];3}45const firstName→ Grace: string = "Grace";6const names→ Grace,Milo,Nia: string[] = [firstNameGrace, "Milo", "Nia"];7const first: string = firstItem<string>(namesGrace,Milo,Nia);

  2. function firstItem<T>(items: T[]): T

    1function firstItem<T>(itemsGrace,Milo,Nia: T[]): T {2    return items[0]Grace;3}

  3. first ← Grace

    5const firstName: string = "Grace";6const names: string[] = [firstName, "Milo", "Nia"];7const first→ Grace: string = firstItem<string>(namesGrace,Milo,Nia);89console.log(`first=${firstGrace}`);
    outputfirst=Grace

  1. firstName ← Linus, names ← Linus,Milo,Nia

    2    return items[0];3}45const firstName→ Linus: string = "Linus";6const names→ Linus,Milo,Nia: string[] = [firstNameLinus, "Milo", "Nia"];7const first: string = firstItem<string>(namesLinus,Milo,Nia);

  2. function firstItem<T>(items: T[]): T

    1function firstItem<T>(itemsLinus,Milo,Nia: T[]): T {2    return items[0]Linus;3}

  3. first ← Linus

    5const firstName: string = "Linus";6const names: string[] = [firstName, "Milo", "Nia"];7const first→ Linus: string = firstItem<string>(namesLinus,Milo,Nia);89console.log(`first=${firstLinus}`);
    outputfirst=Linus

Follow the Value

  1. firstName starts as Ada.
  2. names becomes ["Ada", "Milo", "Nia"].
  3. firstItem<string>(names) receives the whole string array.
  4. The function returns items[0], so first is Ada.
  5. The program prints first=Ada. | firstName | names[0] | printed output | | --- | --- | --- | | Ada | Ada | first=Ada | | Grace | Grace | first=Grace | | Linus | Linus | first=Linus |

Exercise: functions.ts

Reproduce first=Ada, then use firstName Grace and Linus to predict first=Grace and first=Linus.