TypeScript Basics | SudoVersity FYI

Just a quick post for helping to remember TypeScript syntax. This is not an explanation, a tutorial, or guidance. For that see the section below called Resources.

Primatives

// String
let myName: string = "Josey";
// Number
let favNumber: number = 13;
// Boolean
let isCool: boolean = false;
// Array
let favAnimals: string[] = ["cat", "dog", "all"];

Parameters

// Typical
function printToConsole(eventNumber: number, eventMessage: string) {
  console.log(`LOG: ${eventNumber}: ${eventMessage}`);
}

Objects

Note: There are multiple ways to annotate an object. Each has an impact.

Inline

Pass object type directly or inline: gives verbose error that includes full object type.

export const multiplyTwoNumbers = (params: {
  first: number;
  second: number;
}) => {
  return params.first * params.second;
};

Type

Named Type: represents anything from an object, to string, number, or boolean.

type MultiplyTwoNumbers = {
  first: number;
  second: number;
};

export const multiplyTwoNumbers = (params: MultiplyTwoNumbers) => {
  return params.first * params.second;
};

Interface

Named Interface: Works with ojbects only for the most part.

interface MultiplyTwoNumbers {
  first: number;
  second: number;
}

export const multiplyTwoNumbers = (params: MultiplyTwoNumbers) => {
  return params.first * params.second;
};

Optional

The ? character makes a property or parameter optional. This means the property or parameter or object that is using the declared type.

interface MultiplyTwoNumbers {
  first: number;
  second?: number;
}

Using type | undefined where type is a primative can be used to ensure the value of that specific key/value pair do not need a value, but the key must still be sent and declared as undefined in that case.

type MultiplyNumbers = {
  first: number;
  second: number;
  third: number | undefined;
};

export const multiplyTwoNumbers = (params: MultiplyNumbers) => {
  return params.first * params.second;
};

multiplyTwoNumbers({ first: 5, second: 16, third: undefined });

Variable Interface Assigning

interface Animal {
  id: number;
  name: string;
  legs: number;
}

const newAnimal: Animal = {
  id: 334,
  name: "Agnes",
  legs: 4,
};

Union Types (Value Type Contraints)

interface Animal {
  id: number;
  name: string;
  legs: 2 | 3 | 4;
}

Arrays, Combining Types

interface Animal {
  id: number;
  name: string;
  legs: 2 | 3 | 4;
  owners: Owner[];
}

interface Owner {
  id: number;
  firstName: string;
  lastName: string;
}

const newAnimal: Animal = {
  id: 334,
  name: "Agnes",
  legs: 4,
  owners: [
    {
      id: 13,
      firstName: "Josey",
      lastName: "Howarth",
    },
    {
      id: 69,
      firstName: "Dan",
      lastName: "Howarth",
    },
  ],
};

Typing Function Returns

const makeAnimal = (): Animal => {
  return {
    id: 334,
    name: "Agnes",
    legs: 4,
    owners: [
      {
        id: 13,
        firstName: "Josey",
        lastName: "Howarth",
      },
      {
        id: 69,
        firstName: "Dan",
        lastName: "Howarth",
      },
    ],
  };
};

Promises

There are mutliple ways to do this.

interface Animal {
  id: number;
  name: string;
  legs: 2 | 3 | 4;
}

// Promise Method

export const fetchAgnes = async (): Promise<Animal> => {
    const data = await fetch("https://www.reallycoolapifakeaddress.com/api/animal/334").then((res)) => {
        return res.json();
    });
    return data;
};

// Recommended methods for working with fetch
// Typing fetched response
export const fetchAgnes = async () => {
    const data: Animal = await fetch("https://www.reallycoolapifakeaddress.com/api/animal/334").then((res)) => {
        return res.json();
    });
    return data;
};

// Casting (assigning is safer than using casting)
export const fetchAgnes = async () => {
    const data = await fetch("https://www.reallycoolapifakeaddress.com/api/animal/334").then((res)) => {
        return res.json();
    });
    return data as Animal;
};

TypeScript Comments

// @ts-expect-error
/// Tells TS that an error should show on the next line

// @ts-ignore
/// Tells TS to ignore the next line

Resources

If you’re wanting to dig deeper into the concepts of TypeScript, I cannot recommend the following two resources enough.