Chapter 5: The Type System – From Basics to Advanced

This is the chapter that will really make you understand the power of TypeScript. We start with primitive types, then move on to complex types, unions, generics, type inference, narrowing, and more.

🔗 Do you like Techelopment? Check out the website for all the details!

🧱 1. Primitive types

These are the basic types, common to many languages:

let name: string = "Angelina";
let age: number = 28;
let active: boolean = true;
let nothing: null = null;
let unknow: undefined = undefined;

🔹 string, number, boolean, null, undefined, bigint, symbol

If you don't specify them, TypeScript tries to infer them automatically:

let surname = "Jolie"; // TS understands that it is a string

🧩 2. Array and Tuple

Array:

let numbers: number[] = [1, 2, 3];
let names: Array = ["Angelina", "Cameron"];

Tuple (array with fixed length and types):

let persons: [string, number] = ["Arnold", 35];

💡 3. Type inference

TypeScript infers types even if you don't write them:

let message = "hello"; // it is string
let x = [1, 2, 3]; // it is number[]

However, if more control or clarity is needed, it is good practice to specify this explicitly.

🚧 4. Type alias and Interface

Alias:

type ID = string | number;

let userId: ID = 123;
userId = "abc123";

Interface:

interface Person {
  name: string;
  age: number;
  active?: boolean; // optional
}

Difference?
👉 type can describe union, tuple, primitive etc.
👉 interface It is intended for objects and classes.

⚙️ 5. Typed Functions

function sum(a: number, b: number): number {
  return a + b;
}

You can also type anonymous or callback functions:

const multiply: (x: number, y: number) => number = (x, y) => x * y;

🔗 6. Union (|) and intersection (&) types

Union:

let input: string | number;
input = "hello";
input = 42;

Intersection:

type A = { name: string };
type B = { age: number };

type PersonComplete = A & B;

const user: PersonComplete = { name: "Carrie", age: 30 };

🔍 7. Type narrowing

When a value can have multiple types, TypeScript helps you “figure out” the actual type at a certain point in the code:

function print(val: string | number) {
  if (typeof val === "string") {
    console.log(val.toUpperCase()); // it is a stringa!
  } else {
    console.log(val.toFixed(2)); // it is a number!
  }
}

Also instanceof, in and Array.isArray() belong to narrowing.

🧠 8. Generics

Generics allow you to write reusable and flexible code:

function myElements<T>(list: T[]): T {
  return list[0];
}

const s = myElements(["a", "b"]); // T = string
const n = myElements([1, 2, 3]); // T = number

You can use them with custom classes, interfaces, and types.

🧱 9. Literal types and `enum`

Literal types:

let direction: "up" | "down" | "left" | "right";
direction = "up"; // ok
direction = "in front"; // error

Enum:

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Red;

🧪 10. Useful advanced types

Type	Description
`any`	Disable all controls (to be avoided)
`unknown`	Like `any`, but requires type-check before use
`never`	Function that never returns (eg. `throw`)
`void`	No return value
`Record<K, V>`	Generic object with keys `K` and values `V`
`Partial<T>`	It makes all the properties of `T` optional
`Readonly<T>`	It makes all the properties of `T` immutable

Example with Record:

const translations: Record<string, string> = {
  it: "Ciao",
  en: "Hello",
  es: "Hola",
};

🎯 In summary

TypeScript gives you a type system:

✅ Static but optional
✅ Extremely flexible and powerful
✅ Which helps you prevent errors, document code and build robust APIs

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog