null vs undefined Link to heading

In TypeScript, undefined means a variable has been declared but has not yet been assigned a value, while null represents an intentional, explicit absence of any object value.

When used in optional parameters and properties, TypeScript inherently favors undefined for optional features. When you mark an object property or a function argument as optional using the ? modifier, TypeScript implicitly appends | undefined to its underlying type. It does not append null.

If a function parameter has a default fallback value, passing undefined forces the parameter to use that default value. Passing null overrides the default and preserves the null state.

Example:

const greet = (name = "Guest") => console.log(`Hello, ${name}`);

greet(undefined); // Logs: "Hello, Guest"
greet(null);      // Logs: "Hello, null"

javascript array empty slots vs undefined Link to heading

Empty slots will be created when initiated an array. Either use new Array(number) or let arr = [1, 2, 3]; arr[50] = 100;, the 2 examples will generate empty slots.

Emtpy slots, unlike undefined, will be skipped by some generic functions, like map and reduce. So if you want to make it iterate every elements, then you have to explicitly at least declare undefined.

tsconfig.json Link to heading

tsconfig.json is the configuration file for typescript compiler (tsc). In this file, it usually tells rules for compiler to enforce: target is the standard for javascript; what syntax to import and export, etc.

template literals ` Link to heading

Template literals use backticks (`) instead of normal quotes. You can embed variables or expressions directly into the string using the ${expression} syntax.

rest parameters Link to heading

Rest parameters are much alike python’s *args: not regulating how many variables to pass into a function. In javascript, it’s ...restParameters, and typescript will make it type safe, like ...restParameters: string[].

function assigning to variables Link to heading

javascript can assign functions to variables; typescript can precisely control the kinds of functions assignable to variables.

type and interface Link to heading

type will use =, like

type Foobar = {
    foo: string;
    bar: number;
}

interface doesn’t,

interface Foobar {
    foo: string;
    bar: number;
}

The biggest difference between interface and type is that interface can only be used to type objects, while type can be used to type objects, primitives, and more.

Use interface when defining object shapes that need to be extended, implemented by classes, or used in public libraries. Use type when you need advanced flexibility like unions, intersections, primitives, or complex type logic.

For interface, class can implements. (inheritance)

complex class Link to heading

example

class OneSeries implements Robot {
  about;

  constructor(props: { general: { id: number; name: string; } }) {
    this.about = props;
  }

  getRobotId() {
    return `ID: ${this.about.general.id}`;
  }
}

implements and extends Link to heading

Use extends when you want to build a hierarchical relationship where a child class inherits data and functional logic from a parent class.

index signature Link to heading

When typing objects in TypeScript, sometimes it’s not possible to know the property names for an object, like when we get back information from an outside data source/API. While we may not know the exact property names at compile-time, we may know what the data will look like in general. In that case, it’s useful to write an object type that allows us to include a variable name for the property name. This feature is called index signatures.

Imagine we query a map API to get a list of latitudes where a solar eclipse can be viewed. The data might look like:

{
  '40.712776': true;
  '41.203323': true;
  '40.417286': false;
}

We know that all the property names will be strings, and all their values will be booleans, but we don’t know what the property names will be. To type this object, we can utilize an index signature to type this object. We could write this object’s type like this:

interface SolarEclipse {
  [latitude: string]: boolean;
} 

This feature in typescript is purely for developer’s convinence.

cheat sheets Link to heading

cheat sheets