Latest tips / 8

The Exclude type in TypeScript is a way to exclude certain types from a union.

Let's say you use a third-party package that exports a function with an optional parameter. The parameter uses an inline type which is not exported:

export function fetch(sortBy?: "name" | "date" | "rating") {}

You now want to extract the type of sortBy but exclude undefined from the union (undefined is allowed because the param is optional).

You can use Parameters<T> to get the parameters of the function and Exclude<T> to exclude undefined:

type SortBy = Exclude<Parameters<typeof fetch>[0], undefined>;
// Results in: type SortBy = "name" | "date" | "rating"

Data Binding in Angular Templates binds to properties not attributes. As aria-* attributes are not properties, they cannot be bound to. If you want to bind to aria attributes, you need to use the [attr.aria-*] syntax.

<!-- Does NOT work -->
<div [aria-hidden]="isHidden">
  <!-- ... -->
</div>

<!-- Works -->
<div [attr.aria-hidden]="isHidden">
  <!-- ... -->
</div>

The split() function in JavaScript splits a string into an array by a separator and removes the separator:

// Split by "-"
"hello-from-javascript".split("-");
// Result: ["hello", "from", "javascript"]

// Split by "-" or "_"
"hello-from_javascript".split(/-|_/g);
// Result: ["hello", "from", "javascript"]

Use a RegEx group (...) if you want to keep the separator in the array:

// Split by "-" or "_"
"hello-from_javascript".split(/(-|_)/g);
// Result: ["hello", "-", "from", "_", "javascript"]

The infer keyword in Typescript makes it possible to extract types. This can be used to extract function parameters, generics and more.

// Given the following types ...
export interface Stream<T> { next: (value: T) => void }
export type SpecificStream = Stream<string[]>;

// ... you can extract T into a type
export type ValueOfStream<S> = S extends Stream<infer T> ? T : never;

// ... and use like this
function emitValue(
  stream: SpecificStream,
  value: ValueOfStream<SpecificStream> // Extract T from Stream
) {}

TypeScript provides some built-in types like Parameters and ReturnType.

// Given this type ...
export type SomeFn = (first: string, second: boolean) => string[];

// ... you can extract parameters
export type SecondParam = Parameters<SomeFn>[1];

// ... and the return type
export type ReturnTypeOfSomeFn = ReturnType<SomeFn>;

Live Expressions allow you to observe values in Browser DevTools. You can enter a JavaScript expression and it will automatically show the latest value. This can be useful to see how a value changes over time or to monitor the focused element (document.activeElement) to see if focus handling is working properly.

Open the DevTools, navigate to the "Console" Tab and click the eye icon to add a new Live Expression.