Using `any` as a hack

/** 
 * @param input a command or an array of commands
 * @returns a single trimmed string
 */
function formatCommandline(input: any) {
  let line = '';
  if (typeof input === 'string') {
    line = input.trim();
  } else {
    line = input.map(x => x.trim()).join(' ');
  }
  return line;
}

console.log(formatCommandline('hello ')); // 'hello'
console.log(formatCommandline(['hello ', ' world '])); // 'hello world'

// Allows unsafe code that fails at Runtime 😬
console.log(formatCommandline(1337)); // Runtime Error

Introducing Unions

For example string | string[]:

/** 
 * @param input a command or an array of commands
 * @returns a single trimmed string
 */
function formatCommandline(input: any) {
  let line = '';
  if (typeof input === 'string') {
    line = input.trim();
  } else {
    line = input.map(x => x.trim()).join(' ');
  }
  return line;
}

console.log(formatCommandline('hello ')); // 'hello'
console.log(formatCommandline(['hello ', ' world '])); // 'hello world'

// Caught at compile time!
console.log(formatCommandline(1337)); // Invalid Input!

Another Example

/**
 * Takes a string and adds `padding` to the left.
 * If `padding` is a number, then that number of spaces is added to the left.
 * If `padding` is a string, then `padding` is appended to the left.
 */
function padLeft(value: string, padding: number | string) {
  if (typeof padding === 'number') {
    return Array(padding + 1).join(' ') + value;
  }
  if (typeof padding === 'string') {
    return padding + value;
  }
  throw new Error(`Expected number or string, got '${padding}'.`);
}

padLeft('Hello world', 4);     // '    Hello world'
padLeft('Hello world', '  ');  // '  Hello world'
padLeft('Hello world', '---'); // '---Hello world'

padLeft('Hello world', false); // Caught at Compile Time!

Using Type Aliases

Single line:

type Padding = number | string;

Multi line (leading | is allowed):

type Padding =
  | number
  | string;

Transcript

00:00

One amazing feature within the TypeScript type system is type unions. Let's consider a simple example to demonstrate their motivation. Here we have a simple function that can operate on a string or an array of strings, and within the function body, if it is simply a string, it'll trim it and return the result. And if it is an array, it'll trim each of the strings in the array and then join them with the space and return the results. Such functions, which operate on a single item or an array of items is quite common within the JavaScript ecosystem.

00:33

Currently, in order to accept a string as well as an array of strings, we have this function annotated as input type. Any however, this results in type unsafety. For example, someone can pass in a number and now our code will blow up at runtime without any compiled time errors. Fortunately, TypeScript allows you to create types as a union of predefined types. For example, in our case, we want to accept only a string or an array of strings once we've added this annotation. Invalid usages are highlighted

01:06

as a compile time error per type script. Now, union types are simply a set of types separated by the pipe operator as shown over here, you are free to use any type names separated by the pipe operator to create a union type. Let's demonstrate that by another usage. A common requirement in UR programming is to pair a string with some characters before it. Here we have a function that achieves this objective. If the input argument is a number, it pads with a number of spaces. Alternatively, you can pass in your own padding string,

01:40

and that is used prepend it before the input value. And if the input is not the number or a string, this function throws a runtime error. A naive approach would be to accept all inputs using the unknown type as we have done over here. And indeed, it does achieve the objective of accepting a number or a padding string. However, just like any unknown accepts all types, and if someone were to call this function with something that is not a number or a string, for example, a bullion, this function will throw a runtime exception. Fortunately, once more, we can catch this error

02:14

by using a proper union type annotation for the pairing parameter. In this case, we want to accept a number or a string, and anything else will be caught as a compile time error from TypeScript as shown over here. Now, just like any other type annotation within TypeScript, you can extract a union type into its own type alias, giving it a well-defined name for better code readability. Now, if your unions are becoming a bit long, TypeScript allows you to split your union into multiple lines. Also, in order to increase the readability a bit more. TypeScript allows you to optionally add a pipe

02:48

before the first member in the union. This has no impact on the semantics of the type and is purely there for code readability purposes.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Union Types

Subscription Required

Using `any` as a hack

Introducing Unions

Another Example

Using Type Aliases

Transcript

Professional TypeScript Masterclass

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Union Types

Subscription Required

Using any as a hack

Introducing Unions

Another Example

Using Type Aliases

Transcript

Professional TypeScript Masterclass

Using `any` as a hack