Getting into Javascript World as a Developer

Why Learn Web Development Now?Javascript The Differences Typescript Types Contextual typing Function Class Generic About Resources Best Free Javascript & Typescript Resources for Developer

Why Learn Web Development Now?

As a software engineer at Dialpad, I mostly work on infrastructure/backend issues like api, indexes, scalability and observability. Infra is fascinating and it’s a great area to start a career and gain in depth experience. But at the same time, starting a company is my dream and I would like to work on side projects after work. Two routes to do this:

Involve in open source project to gain deep experience and insights at a field. Then find a problem (luckily) and start a project/company to deal with it. For example, contributing to open telemetry or Prometheus, then find opportunities around. Just like people at Uber worked at M3 and started Chronosphere.

The bar is high so it usually comes with competitive advantage. eg. Not many people in the world have the techinical expertise to found Chronosphere. Only people at Uber have the insight and domain knowledge can do it. Business is willing to pay for technical solution backed by impactful open source software.

On this route, it’s best to work at companies that are working on impactful open source project (eg. Grafana).

Work on some smaller idea to solve some issues at daily life. I have a couple ideas stuck with me for a couple months. This route requires more product/business skills, something I would like to develop.

So I am starting #2. Most of my ideas are related to some sort of web and mobile app. I will do this after work and in a one people team. My plan is to dive deeper into web development before executing on those ideas. Hopefully this can up my productivity and help me through maintenance and improvement stage. I already had exposure to web development and had quite a lot of experience in software engineering in general, so this should not take tons of time.

Javascript

The Differences

Number is not an integer

Javascript itself does not have input or output. The browser provides such functionality.

Closure = Function + function’s outer scope (lexical environment)

Promise

A promise is an object that encapsulates the result of an asynchronous operation.
A promise starts in the pending state and ends in either fulfilled state or rejected state.
Use then() method to schedule a callback to be executed when the promise is fulfilled, and catch() method to schedule a callback to be invoked when the promise is rejected.
Place the code that you want to execute in the finally() method whether the promise is fulfilled or rejected.

IIFE (Immediately Invoked Function Expression). This provides lexical scope. It was popular in JavaScript as a method to support modular programming before the introduction of more standardized solutions such as CommonJS and ES modules.

Typescript

Typescript brings type into Javascript and it’s much more similar to programming language like Java and Python. One of Javascript’s pitfall is maintainablity issue comes with type. And Typescript is going to help!!

Types

Array with two types


let scores = ['Programming', 5, 'Software Design', 4]; 

let scores : (string | number)[];

tuple: • A tuple is an array with a fixed number of elements whose types are known. let skill: [string, number];

Under the hood, an enum is a JavaScript object with named properties declared in the enum definition.


// typescript
enum Month {
    Jan,
    Feb,
};
// compile into javascript:
{
  '0': 'Jan', 
  '1': 'Feb', 
  Jan: 0,     
  Feb: 1,     
}

any type: let result: any; for variable with unknown type at compile time.

void vs never

Use the void type as the return type of functions that do not return any value.
The never type contains no value.The never type represents the return type of a function that always throws an error or a function that contains an indefinite loop.

string literal type


let mouseEvent: 'click' | 'dblclick' | 'mouseup' | 'mousedown';
mouseEvent = 'click'; // valid
mouseEvent = 'dblclick'; // valid
mouseEvent = 'mouseup'; // valid
mouseEvent = 'mousedown'; // valid
mouseEvent = 'mouseover'; // compiler error

// combine usage with type aliases
type MouseEvent: 'click' | 'dblclick' | 'mouseup' | 'mousedown';
let mouseEvent: MouseEvent;
mouseEvent = 'click'; // valid
mouseEvent = 'dblclick'; // valid
mouseEvent = 'mouseup'; // valid
mouseEvent = 'mousedown'; // valid
mouseEvent = 'mouseover'; // compiler error

let anotherEvent: MouseEvent;

Contextual typing

TypeScript uses locations of variables to infer their types. This mechanism is known as contextual typing. For example:


document.addEventListener('click', function (event) {
    console.log(event.button);//
});

In this example, TypeScript knows that the event parameter is an instance of MouseEvent because of the click event.

However, when you change the click event to the scroll event, TypeScript will issue an error:


document.addEventListener('scroll', function (event) {
    console.log(event.button);// compiler error
});

Function

💡

Typescript supports optional, default, rest parameters and function overload!! Similar to Python.

Notes

Optional, default and rest Parameters


function multiply(a: number, b: number, c?: number): number {

    if (typeof c !== 'undefined') {
        return a * b * c;
    }
    return a * b;
}

// default
function applyDiscount(price, discount = 0.05) {
    return price * (1 - discount);
}

//rest parameters
function getTotal(...numbers: number[]): number {
    let total = 0;
    numbers.forEach((num) => total += num);
    return total;
}

Function Overload


function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
   return a + b;
}

Class

💡

Typescript supports class and it’s very similar to Java! Inheritance, getter, setter, private+protected+public, static methods + properties, abstract classes, interface, implements, extends ... wow looks familiar!!

Notes

Class is supported at typesciprt (with annotated type)!!!


class Person {
    ssn: string;
    firstName: string;
    lastName: string;

    constructor(ssn: string, firstName: string, lastName: string) {
        this.ssn = ssn;
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

Readonly:


class Person {
    readonly birthDate: Date;

    constructor(birthDate: Date) {
        this.birthDate = birthDate;
    }
}

Generic

💡

Typescript’s generic is similar to Java.

Generic Type


function getRandomElement<T>(items: T[]): T {
    let randomIndex = Math.floor(Math.random() * items.length);
    return items[randomIndex];
}
// Generic functions with multiple types
function merge<U, V>(obj1: U, obj2: V) {
    return {
        ...obj1,
        ...obj2
    };
}

Generic constraits


// Use extends keyword to constrain the type parameter to a specific type.
function merge<U extends object, V extends object>(obj1: U, obj2: V) {
    return {
        ...obj1,
        ...obj2
    };
}

// Argument of type '25' is not assignable to parameter of type 'object'.
let person = merge(
    { name: 'John' },
    25
);


// Use extends keyof to constrain a type that is the property of another object.
See example. in the link