Notbook of Typescript

Oct-2024

How to define a User type as an example

Syntax: type ObjectName = { propertyKey: type; } as value of string, number, boolean etc…

type User = {
    id: number;
    username: string;
    passwordHash: string;
    email: string;
    age: number;
    isLoggedIn: boolean;
    createdAt: Date;
}

How to extend a User type

There’s already User type defined, so extending it simply by using &

type Student = User &  {
    isGraduated: boolean;
    studyYear: number;
}

Then the Student literally is that type now:

type Student = {
    id: number;
    username: string;
    passwordHash: string;
    email: string;
    age: number;
    isLoggedIn: boolean;
    isGraduated: boolean;
    studyYear: number;
    createdAt: Date;
}

How to alter existing type and create new one

Type properties can be omit, picked and partially (re-)defined.

Pick only needed

type Teacher = Pick<User, 'id' | 'username' | 'password' | 'email' | 'createdAt'>

So the teachers will only have those properties in their orbject type

Omit unnecessary

type Teacher = Omit<User, 'age' | 'isLoggedIn' >

Does the same result like Pick way, inverted.

Omitting or Picking and also new props

type Teacher = Pick<User, 'id' | 'username' | 'password' | 'email'> & {
    department: Department;
    tenure: Date;
}

Extends the User object with some of its original properties, plus, two new

Partial’ization

type Graduated = Partial<Student, 'isLoggedIn'>

Extends Student as Graduated students list maybe, but makes isLoggedIn data optional, means that data will be processed or not.

How to combine objects with other types

type Teacher = Pick<User, 'id' | 'username' | 'password' | 'email'> & {
    lectures: Lecture[];
    tenure: Date;
}

type Lecture = {
    semester: number;
    department: Department; // Department is another type
    startsAt: Date;
    endsAt: Date;
}

type Department = {
    id: number;
    manager: User; // says the value will be inside User type  definitions
}

Teacher has lectures info, that will be responded as an array of Lecture type, and lecture has department info which refers to a data which is Department type.

Referring to existing types

Prevents typo mistaktes that causes by duplicating definition, or in any case to have it programmable.

// Assuming the Student is declared already

type Teacher = Pick<User, 'id' | 'username' | 'password' | 'email'> & {
    lectures: Lecture[];
    tenure: Date;
    isRetired: Student["isGraduated"]; // in thic case it is `boolean`
}

Gets the type from Student object and defines it as same type to isRetired property.

Using enums

Not for definin the employess! but instead the type of the user

import type { Student } from 'types';

// Will make the education type string entries concrete, off-typo safety
// Watch out the syntax difference
enum EducationType {
    evening = "Evening",
    dayTime = "Day Time",
}

type Student = Student & {
    eduType: EducationType;
}

That will give two-strict-option-as-string property to the students.

Importing and Exporting types

// importing only the types from the file which is in the same directory: types.ts
import type { Student, Teacher } from './types'

And in the meanwhile the types.ts file:

// Assuming those type declerations done above ...
export { Student, Teacher }

Alternativly importing both types and other things

// importing only the types from the file which is in the same directory: types.ts
import { getUsers, type Student, Teacher,  } from './types'

So if there was getUsers function in types.ts file it was imported together with the types from there.

Nested declerations

import type { Student, Teachers } from 'types';

type LecturesOfStudent = {
    id: Student["id"];
    name: Student["name"];
    lectures: {
        id: Lecture["id"];
        department: Lecture["Department"][]
    }
}

In this example developer can combine two types by using pointing to the existing types then make a new specific object model type safety definition for multiplle the lectures output of the a student. Watch out the extra [] there which points the the type is an array, multiple lectures will be returned.

Exercism.org Exercises

Challenge: Typescript / Resistor Color Duo
Exercise Playground: My Provided Examples