Latest tips / 11

TypeScript supports template string types that lets you create string types in a specific format. Here are a few examples:

type Locale = `${string}-${string}`;
const locale: Locale = "en-US";

type Url = `https://${string}`;
const url: Url = "https://tinytip.co";

type CssCustomProp = `var(--${string})`;
const cssCustomProp: CssCustomProp = "var(--color-primary)";

type CurrencySymbol = "€" | "$" | "£" | "¥";
type AmountWithCurrency = `${CurrencySymbol} ${number}`;
const bankBalance: AmountWithCurrency = `$ 42`;

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();