Skip to content

Working With Typescript

Some Problems With Javascript

Javascript is critical to web development but poses some challenges to developers working on large projects. - Runtime issues (errors and undefined) - Lack of developer tooling (type annotations, refactoring)

Static Types, The Missing Piece

Static types allow for strong tooling and developer confidence - Autocomplete - Runtime error and undefined warnings - Refactoring and IDE Tools (Imports, Quick fixes)

Core Typescript Concepts

Typescript In The Wild

Spot the Typescript 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
interface UserProfile {
    id: number;
    name: string;
    email?: string;
    preferences: {
        theme: "dark" | "light";
        notifications: boolean | null;
    };
}

function getUserProfile(userId: number): UserProfile {
    const profiles: UserProfile[] = [
        { id: 1, name: "Alice", email: "[email protected]", preferences: { theme: "dark", notifications: true } },
        { id: 2, name: "Bob", preferences: { theme: "light", notifications: null } },
    ];

    let profile = profiles.find((p) => p.id === userId);
    if (!profile) {
        profile = {
            id: userId,
            name: `Guest-${userId}`,
            preferences: { theme: "light", notifications: null },
        };
    }

    return profile;
}

function getActiveUsers(userProfiles: UserProfile[]): UserProfile[] {
    const active: UserProfile[] = userProfiles.filter(
        (user) => user.preferences.notifications === true && !!user.email
    );

    return active;
}

const users: UserProfile[] = [
    { id: 1, name: "Alice", email: "[email protected]", preferences: { theme: "dark", notifications: true } },
    { id: 2, name: "Bob", preferences: { theme: "light", notifications: null } },
    { id: 3, name: "Charlie", email: "[email protected]", preferences: { theme: "dark", notifications: false } },
];

const activeUsers = getActiveUsers(users);

function logUserNames(users: UserProfile[]): void {
    users.forEach((user) => {
        console.log(user.name || "Unknown User");
    });
}

logUserNames(activeUsers);
  • Variable annotations
  • Interfaces
  • Arrays
  • Optional and null
  • Functions
  • Union

Basic Types

Type Description Example
string Represents text data. let name: string = "Alice";
number Represents numeric values. let age: number = 30;
boolean Represents true/false values. let isActive: boolean = true;
array Represents a collection of values. let items: number[] = [1, 2, 3];
object Represents a collection of key-value pairs. let person: { name: string; age: number; } = { name: "Alice", age: 30 };
null Represents an explicitly empty value. let value: null = null;
undefined Represents an uninitialized variable. let value: undefined = undefined;
any Allows any type (used sparingly). let data: any = "text"; data = 42; data = true;
tuple Represents an array with fixed types. let tuple: [string, number] = ["Alice", 30];
enum Represents named constants. enum Status { Active, Inactive } let s: Status = Status.Active;
void Represents no return value from a function. function log(message: string): void { console.log(message); }
never Represents a function that never returns. function error(msg: string): never { throw new Error(msg); }

Type Aliases

1
2
type ID = number | string;
let productId: ID = "123-abc";

Type Inference

1
2
3
let selectedUser = null;

selectedUser = { name: 'Bob', }

Functions

1
2
3
function add(a: number, b: number): number {
    return a + b;
}

Objects and Interfaces

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
type Name = {
    first: string,
    last: string,
}

interface User {
    id: number;
    name: string;
    isActive: boolean;
}

let user: User = { id: 1, name: "Alice", isActive: true };

Arrays and Inline Objects

1
2
3
type StringArray = string[];
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

Generics

Typescript In The IDE vs Browser

Compiling For The Web

Typescript uses the Typescript compiler (tsc) to transform Typescript into Javascript which can be run on the web. While applying this transformation it will check for issues and report them while compiling.

Local Development

Checking your code from the command line constantly would be tedious. IDEs come with language servers that run checks in real time using the Typescript compiler. tsconfig.json is a common file you will see in all Typescript projects that configures how the Typescript server runs and gives it information about your project. Typescript can then be used with other build tools to bundle and compile your Typescript into something suitable for the browser.

Thinking About Types

Help Yourself, Help Others

It's very easy to write "loose" types in Typescript. 

1
2
3
4
5
    type file = any;
    // vs 
    type file = string
    // vs
    type file = `${string}.png`


1
2
3
4
5
6
7
    interface User {
        name: string;
        age: number;
        email: string;
    }

    const user = { name: "Bob", age: 54 } as User;

1
2
3
4
5
const getFirstElement = (arr: any[]) => {
  return arr[0];
};

const first = getFirstElement([1, 2, 3]);

first is typed as any

1
2
3
4
5
6
7
const getFirstElement = <T>(arr: T[]) => {
  return arr[0];
};

const firstNumber = getFirstElement([1, 2, 3]);

const firstString = getFirstElement(["a", "b", "c"]);