Latest tips / 11

A newly created Git repo (git init) has a default branch with the name master. You can configure that name for all new repositories with the following command:

git config --global init.defaultBranch main

Now every new Git repository will automatically create a branch main instead of master.

The setTimeout function accepts optional arguments that are passed to the provided function. This way you can pass arguments without wrapping the actual function in another function.

// Instead of this...
setTimeout(() => search("hello", "world"), 1000);

// ... you can do this
setTimeout(search, 1000, "hello", "world");

A function with parameters can have default values that are used when the caller does not provide a value for that parameter (by omitting the parameter or providing undefined). The default value does not have to be a static value. You can run JavaScript and use previous parameters of that function.

// "timestamp" has a dynamic default value
function logMessage(message, timestamp = Date.now()) {
  // ...
}

function someFunction(
  value,
  max = value.length,
  suffix = value.length > max ? "..." : ""
) {
  // ...
}

someFunction("hello") // max = 5, suffix = ""
someFunction("hello" 2) // max = 2, suffix = "..."
someFunction("hello", undefined, ".....") // max = 5, suffix = "....."

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