TypeScript Type Checking and Type Guard Mechanisms

This article extracts two sections from a longer TypeScript fundamentals guide: the type‑checking mechanism and the type‑guard mechanism, providing concise explanations and practical code examples.

Type‑checking mechanism – TypeScript’s compiler follows a set of principles to verify types, helping developers catch errors early and improve productivity.

Type inference – When a variable’s type is omitted, the compiler infers it from the initializer:

let a = 1 // inferred as number
let b = [1] // inferred as number[]
let c = (x = 1) => x + 1 // inferred as (x?: number) => number

When multiple values are combined, TypeScript chooses the best common type, e.g.:

let d = [1, null] // inferred as (number | null)[]
// with "strictNullChecks": false, null is treated as a subtype of number, so the type becomes number[]

Contextual typing works from left to right, commonly seen in event handlers.

Type assertions let developers override inferred types when they know a more precise type:

interface Bar { bar: number }
let foo = {} as Bar
foo.bar = 1
// recommended: declare the variable with its type directly
let foo1: Bar = { bar: 1 }

Type compatibility – A type Y is compatible with type X if a value of Y can be assigned to a variable of X.

Examples:

let s: string = 'a'
s = null // compatible when "strictNullChecks" is false

Interface compatibility – A smaller interface can be assigned to a larger one:

interface X { a: any; b: any; }
interface Y { a: any; b: any; c: any; }
let x: X = { a: 1, b: 2 }
let y: Y = { a: 1, b: 2, c: 3 }
x = y // OK, y = x // error

Function compatibility – Parameter count, optional/rest parameters, parameter types, return types, and overloads affect assignability.

type Handler = (a: number, b: number) => void
function test(handler: Handler) { return handler }

let handler1 = (a: number) => {}
test(handler1) // OK
let handler2 = (a: number, b: number, c: number) => {}
test(handler2) // error – too many parameters

Optional and rest parameters are compatible with fixed parameters in one direction:

let a1 = (p1: number, p2: number) => {}
let b1 = (p1?: number, p2?: number) => {}
let c1 = (...args: number[]) => {}

a1 = b1 // compatible
a1 = c1 // compatible
b1 = a1 // not compatible
b1 = c1 // not compatible
c1 = a1 // compatible
c1 = b1 // compatible

Other compatibility examples include:

Enums are compatible with numbers but not with other enums.

Classes are compatible based on instance members; static members and constructors are ignored. Private members affect compatibility unless one class inherits the other.

Generic interfaces without members are compatible regardless of type arguments; adding members makes them incompatible.

Generic functions with identical signatures are mutually assignable.

Compatibility summary

Structural compatibility: a type with fewer members is compatible with one that has more.

Function compatibility: a function with more parameters can be assigned to one expecting fewer.

Type‑guard mechanism – Allows code blocks to narrow a variable’s type, enabling safe property access and method calls.

Setup example:

enum Type { Strong, Week }
class Java { helloJava() { console.log('hello Java') } java: any }
class JavaScript { helloJavaScript() { console.log('hello JavaScript') } javaScript: any }

Various type‑guard techniques:

Type assertion – tell the compiler the concrete type:

function getLanguage(type: Type, x: string | number) {
  let lang = type === Type.Strong ? new Java() : new JavaScript()
  if ((lang as Java).helloJava) {
    (lang as Java).helloJava()
  } else {
    (lang as JavaScript).helloJavaScript()
  }
  return lang
}

instanceof – checks the runtime class:

function getLanguage(type: Type, x: string | number) {
  let lang = type === Type.Strong ? new Java() : new JavaScript()
  if (lang instanceof Java) {
    lang.helloJava()
  } else {
    lang.helloJavaScript()
  }
  return lang
}

in – checks whether a property exists on the object:

function getLanguage(type: Type, x: string | number) {
  let lang = type === Type.Strong ? new Java() : new JavaScript()
  if ('java' in lang) {
    lang.helloJava()
  } else {
    lang.helloJavaScript()
  }
  return lang
}

typeof – useful for primitive unions:

function getLanguage(type: Type, x: string | number) {
  let lang = type === Type.Strong ? new Java() : new JavaScript()
  if (typeof x === 'string') {
    x.length
  } else {
    x.toFixed(2)
  }
  return lang
}

Custom type‑guard function with a type predicate:

function isJava(lang: Java | JavaScript): lang is Java {
  return (lang as Java).helloJava !== undefined
}

function getLanguage(type: Type, x: string | number) {
  let lang = type === Type.Strong ? new Java() : new JavaScript()
  if (isJava(lang)) {
    lang.helloJava()
  } else {
    lang.helloJavaScript()
  }
  return lang
}

Choosing the appropriate guard depends on the scenario: typeof for primitive types, instanceof for class instances, in for property checks, and custom guard functions for complex logic.