Latest tips / 12

Let’s say you have an enum Animal and a string value and you want to check if the value is an animal.

enum Animal {
  Cat = "cat",
  Dog = "dog",
}

const someInputValue = "cat";

// TS compiler will show an error,
// because "cat" is not assignable to Animal.
// We need to check if `someInputValue` is an animal.
someFunctionThatExpectsAnAnimal(someInputValue);

TypeScript supports type guards and type predicates that lets you do this. The function isAnimal accepts a string value and returns a boolean whether the value is a valid animal or not.

function isAnimal(value: string): value is Animal {
  return Object.values<string>(Animal).includes(value);
}

If the function returns true, TypeScript knows that the value is an Animal and infers that type inside the if statement. You don’t need to write as Animal.

if (isAnimal(someInputValue)) {
  // TypeScript knows that `someInputValue` is of type `Animal`
  someFunctionThatExpectsAnAnimal(someInputValue);
}

You can change the scroll behavior of your page (or an element) with the scroll-behavior property. Using smooth will enable animated scrolling when the user clicks on an anchor link on your page. Normal scrolling by the user is not affected by this property.

html {
  scroll-behavior: smooth;
}

Visual Studio Code has an integrated Screencast Mode. This can be useful when sharing your screen or making videos. Press Ctrl+Shift+P (or Cmd+ShiftP on macOS) to open the command palette, search for “Screencast” and select the Developer: Toggle Screencast Mode command.

Screencast Mode shows whenever you click with the mouse (a red circle appears) or press a key.

The appearance of these elements can be customized in the settings. If you want to show only keyboard shortcuts and not all keys, you can configure the following property:

{
  "screencastMode.onlyKeyboardShortcuts": true
}

The Subscription class in RxJS has an add() method that let’s you add subscriptions. All added subscriptions will be unsubscribed when you call unsubscribe() on the root subscription.

This lets you clean up multiple subscriptions with one command.

// Create a new subscription
const subscription = new Subscription();

// Subscribe to some observables
// and add them to the subscription
subscription.add(one$.subscribe({ /* ... */ }));
subscription.add(two$.subscribe({ /* ... */ }));
subscription.add(three$.subscribe({ /* ... */ }));

// During clean up
// This unsubscribes the subscription of one$, two$ and three$
subscription.unsubscribe();

The design mode lets you edit the content of any website directly inline in a WYSIWYG-like fashion. The modifications are locally only but still useful if you want to test something. Keyboard shortcuts like Ctrl+B for bold are supported.

The design mode can be enabled with one line of JavaScript:

// Enable
document.designMode = "on";

// Disable
document.designMode = "off";

// Toggle
document.designMode = document.designMode == "on" ? "off" : "on";