In this blog, we will go through some basic and advanced types comparison in TypeScript which will help you better type in the code.

Optional vs. Default value vs. Undefined

If you first know about TypeScript, it’s easy to get confused about the following options :

• Parameter is optional: x?: number
• Parameter has a default value: x = 123
• Parameter has a union type with undefined: x: undefined | number

Let’s go through them one by one:

1. With optional parameter, the type will be undefined if param omitted:function f1(x?: number) { return x }
// type ======>
// function f1(x?: …

Partial<T>

— — Make all properties of a type optional.

class StateStore<T> {
  constructor(public current: T) { }
  update(next: Partial<T>) {
    this.current = { ...this.current, ...next };
  }
}const state = new StateStore({ x: 0, y: 0 });
state.update({ y: 123 }); 
console.log(state.current); // { x: 0, y: 123 }

Required<T>

— — Make all the members of a type required.

type Example = {
  a?: string,
  b?: number,
}

const example: Required<Example> = { a: "a" }
// Property 'b' is missing in type '{ a: string; }' but required in type 'Required<Example>'.

Readonly<T>

— — Make all properties of a…

Note that some examples are extracted from the TypeScript Handbook, and all tributes should go to it.

Function

====> Function Expressionfunction greeter(fn: (a: string) => void) {
  fn("Hello, World");
}function printToConsole(s: string) {
  console.log(s);
}greeter(printToConsole);====> Type Aliastype GreetFunction = (a: string) => void;function greeter(fn: GreetFunction) {
   // ...
}====> Call signature (for functions with additional properties) Note compared to a function type expression - use : between the parameter list and the return type rather than =>.type DescribableFunction = {
  description: string; // additional properties
  (a: string): void;
};function doSomething(fn: DescribableFunction) {…

Without further ado, let’s jump in! Note that some examples are extracted from the TypeScript Handbook, and all tributes should go to it.

Concepts that can be confusing

Object literal types

Object literal types are anonymous interfaces.

// explicit type
type Point = {
  x: number;
  y: number;
};// anonymous function pointToString(pt: {x: number, y: number}) {
  return `(${pt.x}, ${pt.y})`;
}

Type Aliases vs. Interface

They are very much the same, with the key distinction being that a type cannot be extended to add new properties while an interface which is extendable. Thus, a type cannot be changed after being created like below

type…

Note that some examples are extracted from the TypeScript Handbook, and all tributes should go to it.

Why need narrowing

Let’s say we have a union type, TypeScript will only allow you to do things with the union if the thing is valid for every member of the union due to contextual typing:

function printId(id: number | string) {console.log(id.toUpperCase());
// Property 'toUpperCase' does not exist on type 'string | number'.

The solution is to narrow the union with code, the same as in JavaScript with if else statement. …

Today I need to set up my connection to Redshift and need to use SSH (I got confused!). So just thinking it will be good to provide some basic information for anyone who needs to connect to a remote server and run commands on it.

Ssh Protocol

The SSH protocol ( Secure Shell) is a method for secure remote login. It is a secure alternative to the non-protected login protocols (such as telnet, rlogin) and insecure file transfer methods (such as FTP).

Secure Shell, or Secure Socket Shell, is a protocol which allows client to connect securely to a remote server. …

Not long ago, my friend’s company (let’s say amazingCorp )conducted a Pen test against the whole codebase and identified a few security vulnerabilities. One of them being adding samesite attribute to all cookies if it’s absent.(e.g. mostamazingCorp.com cannot make cross-domain requests to API.amazingCorp.com) . To be more specific, he wants:

Given I am on a non amazingCorp domain e.g mostamazingCorp.com
When I am making an http get or post request to api.amazingCorp.com 
Then I should not be able to complete the requestGiven I am on a amazingCorp subdomain e.g login.amazingCorp.com When I am making an http get or post…

Not long ago, I was tasked to assess our current Content Security Policy (CSP) and find out ways to improve it. It took me longer than I thought, as I need to familiarise myself with the terminologies and protocols before go into implementation detail.

What is CSP?

Content-Security-Policy(CSP) is the name of a HTTP response header (or as meta tag) that browsers use to safeguard your site.

You may ask “aren’t we already have CORS and Same-site policy? Well, attackers have found clever ways to compromise the system. For example, Cross-site scripting (XSS) attack originates from the browser’s inability to distinguish between script…