Types as Sets: Exploring TypeScript's Type System with Examples

In TypeScript, types can be thought of as sets in the sense that they define sets of values that a variable can have. TypeScript’s type system is designed to help you catch type-related errors at compile-time and provide better code documentation. When you define a type in TypeScript, you are essentially defining a set of values that a variable with that type can take.

Some more examples of using TypeScript types as sets:

Union Types:

Creating a type that represents a set of multiple possible values.

type Fruit = 'apple' | 'banana' | 'orange';

let myFruit: Fruit;
myFruit = 'apple'; // Valid
myFruit = 'grape'; // Error: Type '"grape"' is not assignable to type 'Fruit'.

Intersection Types: Combining two types to create a new type that represents the intersection of their sets.

type Animal = { name: string };
type Bird = { canFly: boolean };

type FlyingBird = Animal & Bird;

const eagle: FlyingBird = { name: 'Eagle', canFly: true }; // Valid
const penguin: FlyingBird = { name: 'Penguin', canFly: false }; // Error: Property 'canFly' is missing in type '{ name: string; }' but required in type 'Bird'.

Enum Types:

Enumerated types represent a finite set of named values.

enum Gender {
Male = 'male',
Female = 'female',
Other = 'other',
}

let myGender: Gender;
myGender = Gender.Male; // Valid
myGender = 'unknown'; // Error: Type '"unknown"' is not assignable to type 'Gender'.

Generic Types:

Using generics to create a type that works with different sets of values.

type Wrapper = { value: T };

const stringWrapper: Wrapper = { value: 'Hello' }; // Valid
const numberWrapper: Wrapper = { value: 42 }; // Valid
const booleanWrapper: Wrapper = { value: true }; // Valid

Function Types: Defining types for functions, which represent sets of valid function signatures.

type AddFunction = (a: number, b: number) => number;

const add: AddFunction = (x, y) => x + y; // Valid
const subtract: AddFunction = (x, y) => x - y; // Error: Type '(x: number, y: number) => number' is not assignable to type 'AddFunction'.

Mapped Types:

Mapped types allow you to create new types based on the keys of an existing type.

type User = {
id: number;
username: string;
email: string;
};

type UserKeys = keyof User; // "id" | "username" | "email"

const key: UserKeys = "username"; // Valid
const invalidKey: UserKeys = "age"; // Error: Type '"age"' is not assignable to type '"id" | "username" | "email"'.

Conditional Types: Conditional types allow you to create types that depend on a condition.

type IsString = T extends string ? true : false;

type A = IsString; // true
type B = IsString; // false

Tuple Types: Types that represent arrays with specific lengths and element types.
type Point2D = [number, number];

const point: Point2D = [1, 2]; // Valid
const invalidPoint: Point2D = [1, "2"]; // Error: Type 'string' is not assignable to type 'number'.

Record Types:

Types for objects with a fixed set of keys and value types.

type Person = {
name: string;
age: number;
};

const person: Record = {
name: "John",
age: 30,
}; // Valid
const invalidPerson: Record = {
name: "John",
age: "30",
}; // Error: Type 'string' is not assignable to type 'number'.

Type Aliases:

Creating a new type that is a union or intersection of existing types.

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; sideLength: number };
type Shape = Circle | Square;

const circle: Shape = { kind: "circle", radius: 5 }; // Valid
const triangle: Shape = { kind: "triangle", base: 4 }; // Error: Object literal may only specify known properties...

Conditional Type with Generics:

type MyConditionalType = T extends string ? number : boolean;

const result1: MyConditionalType = 42; // Valid
const result2: MyConditionalType = true; // Valid
const result3: MyConditionalType = "hello"; // Valid
const result4: MyConditionalType<string[]> = false; // Valid

These examples show how the TypeScript type system may be used to build and manipulate sets of values, specify restrictions, and improve type safety in your code.

You can also discover a lot about Javascript by exploring different topics.

Note: We welcome your feedback at Easy Coding School. Please don’t hesitate to share your suggestions or any issues you might have with the article!

Types as Sets: Exploring TypeScript’s Type System with Examples