Typescript/Function

created : 2020-04-07T11:34:09+00:00
modified : 2022-03-14T17:52:11+00:00

typescript

Functions Types

Typing the function

function add(x: number, y: number): number {
  return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

Writing the function type

let myAdd: (x: number, y: number) => number =
  function (x: number, y: number): number { return x + y; };

let myAdd: (baseValue: number, increment: number) => number =
  function(x: number y: number): number { return x + y; };

Inferring the types

let myAdd = function(x: number, y: number): number { return x + y; };

let myAdd: (baseValue: number, increment: number) => number =
  function(x, y) { return x + y; };

Optional and Default Parameters

function buildName(firstName: string, lastName: string) {
  return firstName + " " + lastName;
}

let result1 = buildName("Bob"); // Error
let result2 = buildName("Bob", "Adams", "Sr.");  // Error
let result3 = buildName("Bob", "Adams");

function buildName(firstName: string, lastName?: string) {
  if (lastName)
    return firstName + " " + lastName;
  else
    return firstName;
}

let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams", "Sr."); // Error
let result3 = buildName("Bob", "Adams");

function buildName(firstName: string, lastName = "Smit") {
  return firstName + " " + lastName;
}

let result1 = buidlName("Bob");
let result2 = buildName("Bob", undefined);
let result3 = buildName("Bob" "Adams", "Sr."); // Error-
let result4 = buildName("Bob", "Adams");

Rest Parameters

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

this

this and arrow functions

let deck = {
  suits: ["hears", "spades", "clubs", "diamonds"].
  cards: Array(52),
  createCardPicker: function() {
    return () => {
      let pickedCard = Math.floor(Math.random() * 52);
      let pickedSuit = Math.floor(pickedCard / 13);

      return { suit: this. suits[pickedSuit], card: pickedCard % 13};
    }
  }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

this parameters

interface Card {
  suit: string;
  card: nmber;
}
interface Deck {
  suits: string[];
  cards: number[];
  createCardPicker(this: Deck): () => Card;
}
let deck: Deck = {
  suits: ["hearts", "spades", "clubs", "diamonds"],
  cards: Array(52),

  createCardPicker: function(this: Deck) {
    return () => {
      let pickedCard = Math.floor(Math.random() * 52);
      let pickedSuit = Math.floor(pickedCard / 13);

      return { shit: this.suits[pickedSuit], card: pickedCard % 13};
    }
  }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPikcer();

alert("card: " + pickedCard.card + " of " + pickerCard.suit);

this parameters in callbacks

interface UIElement {
  addClickListener(onclick: (this: void, e: Event) => void): void;
}

class Handler {
  info: string;
  onClickBad(this: Handler, e: Event) {
    this.info = e.message;
  }
}
let h = new Handler();
uiElement.addClickListener(h.onClickBad); // Error

class Handler {
  info: string;
  onClickGood = (e: Event) => { this.info = e.message }
}

Overloads

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x): any {
  if (typeof x == "object") {
    let pickedCard = Math.floor(Math.random() * x.length);
    return pickedCard;
  }
  else if (typeof x == "number") {
    let pickedSuit = Math.floor(x / 13);
    return { suit: suits[pickedSuit], card: x % 13 };
  }
}

let myDeck = [{ suit: "diamonds", card: 2}, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);