Functions page

Overview

In this part, we will:

• Annotate functions parameters and return values.
• Use optional parameters & rest parameters.
• Update a function with TypeScript annotations.
• Understand this in TypeScript.

Objective 1: Annotate functions

Annotating function parameters

In TypeScript, we’re able to annotate function parameters to better guard our code.

In the following example, the add function is called with two parameters that are not numbers, so TypeScript’s compiler will throw an error when compiled:

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

add(1, "three");
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)

Annotating function return values

We can also annotate what a function should return.

function returnNumber(): number {
  return "1";
}
// Error: Type 'string' is not assignable to type 'number'.ts(2322)

Of course, this works when fixed:

function returnNumber(): number {
  return 1;
}
// Works!

Optional parameters

Sometimes when writing functions, we don’t need every parameter to be satisfied. TypeScript allows us to mark optional parameters (or properties) with a ? so the compiler will not error if an optional param isn’t passed.

function buildDinosaur(name: string, breed: string, teeth?: number): void {
  if (teeth) {
    console.info(`${name} is a ${breed} and has ${teeth} teeth.`);
  } else {
    console.info(`${name} is a ${breed}.`);
  }
}

let newDino = buildDinosaur("Blue", "Velociraptor", 80);
// Works
let otherDino = buildDinosaur("Delta", "Velociraptor");
// Also works
let otherOtherDino = buildDinosaur("Charlie");
// Expected 2-3 arguments, but got 1.ts(2554)
// Error: An argument for 'breed' was not provided.

Rest parameters

Rest parameters are a way to pass in an unknown number of arguments to a function. Rest params are signaled to the transpiler by passing an ellipsis (...) followed by the parameter name.

function buildDinosaur(breed: string, ...dna: string[]): void {
  console.info(`The ${breed} has dna from ${dna.join(", ")}`);
}

buildDinosaur(
  "Indominous Rex",
  "Velociraptor",
  "Tyrannosaurus rex",
  "Therizinosaurus",
  "cuttlefish",
);
// Logs "The Indominous Rex has dna from Velociraptor,
//      Tyrannosaurus rex, Therizinosaurus, cuttlefish"

Setup 1

✏️ Create src/functions/dnaCost.ts and update it to be:

export function dnaCost(baseCost, sequence) {
    return baseCost + sequence.length;
}

let raptorCost = dnaCost(5000,"CGGCA");

console.log(raptorCost);
// Logs 5005

Verify 1

✏️ Create src/functions/dnaCost.test.ts and update it to be:

import assert from "node:assert/strict";
import { describe, it } from "node:test";
import { dnaCost } from "./dnaCost";

describe("Functions: dnaCost", () => {
  it("can be called with two arguments", () => {
    assert.equal(dnaCost(2500, "abc"), 2503);
  });

  it("can be called with many arguments", () => {
    assert.equal(dnaCost(2500, "abc", "de", "f"), 2506);
  });
});

Exercise 1

The dnaCost function in dnaCost.ts calculates the cost of synthesizing a DNA sequence to make a dinosaur. It calculates the cost by adding a baseCost plus the length of the DNA sequence.

Now scientists want to mix the DNA of multiple dinosaurs. Open the dnaCost.ts file and modify this function to:

1. Take an unknown amount of sequences.
2. Return the sum of baseCost and the length of each sequence.

Have issues with your local setup? You can use either StackBlitz or CodeSandbox to do this exercise in an online code editor.

Solution 1

If you’ve implemented the solution correctly, the tests will pass when you run npm run test!

export function dnaCost(baseCost: number, ...sequences: string[]) {
  return sequences.reduce((sum, sequence) => {
    return sum + sequence.length;
  }, baseCost);
}

export function dnaCost(baseCost: number, ...sequences: string[]) {
  let sum = baseCost;
  sequences.forEach(sequence => {
    return sum += sequence.length;
  });
  return sum;
}

Objective 2: Use this in TypeScript

Understanding this

The value of this within a function depends on how the function is called:

• Global context: If a function is called in the global scope, this refers to the global object (window in browsers, global in Node.js). However, in strict mode, this will be undefined.
• Object context: When a function is called as a method of an object, this refers to the object.
• Class context: In a class, this refers to the instance of the class.
• Event handlers: In DOM event handlers, this typically refers to the element that received the event, unless the function is an arrow function, which does not bind its own this.
• Arrow functions: Arrow functions do not bind their own this; they inherit this from the enclosing execution context.

The dynamic nature of this means that its value can change based on how and where a function is called. This can lead to issues, especially when functions that use this are passed around as callbacks.

For instance:

const dog = {
  name: "fido",
  bark: function () {
    console.info(this.name + "says woof");
  },
};
const address = { street: "2 State St" };

dog.bark.call(dog); // Logs "fido says woof";
dog.bark.call(address); // Logs "undefined says woof"

In the example above, dog.bark is called with two very different types of objects, the second of which (address) doesn’t have a name property.

Using strictBindCallApply

Compiling with the --strictBindCallApply flag allows you to specify the this type:

const dog = {
  name: "fido",
  bark: function (this: { name: string }) {
    console.info(this.name, "says woof");
  },
};
const address = { street: "2 State St" };

dog.bark.call(dog);
dog.bark.call(address);

Line 10 will error with:

Property 'name' is missing in type '{ street: string; }' but required in type '{ name: string; }'.

Next steps

Next, let’s take a look at classes in TypeScript.