const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

 could be null or undefined so can't call getContext

const canvas = document.getElementById("canvas");
const context = canvas?.getContext("2d");

with optional chaining now we let TS now to only call 

 if it is not null or undefined but we now get the issue that canvas will be an 

 property is not defined in its interface.

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const context = canvas?.getContext("2d");

const ageInYears = ("too old to count" as unknown) as number;
ageInYears; // const ageInYears: number

Very useful when TS won’t let you do what you know is right (specially when using third party APIs) but very dangerous, much more than using any.

function buttonEventListener(
  event: string,
  listener: any,
  element: HTMLButtonElement,
) {
  element.addEventListener(event, listener);
}

const anchor = document.createElement("a");
buttonEventListener(
  "click",
  () => console.log("Mouse clicked"),
  anchor,
);
// Type Error: Argument of type 'HTMLAnchorElement' is not assignable to parameter of type 'HTMLButtonElement'.

buttonEventListener(
  "click",
  () => console.log("Mouse moved"),
  (anchor as HTMLElement) as HTMLButtonElement,
);
// no error

Assertion Signatures

Double Assertion Signatures (dangerous)