Latest tips / 9

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.

Visual Studio Code shows the side bar on the left side by default. However, you can move it to the right if you want. Just right-click on the side bar and choose "Move Side Bar Right".

When collapsing / expanding the side bar your code does not jump anymore when the side bar is on the right side. This helps a lot if you toggle the side bar very often.

The RxJS operator map can be used to map the stream value to a new value. However, if you want to map to a static value that does not depend on the stream value, you can use the mapTo operator. This operator accepts the value directly and you don't need to create an additional function.

// Use `map` for dynamic values
stream$.pipe(map((user) => user.isAdmin));

// Use `mapTo` for static values
stream$.pipe(mapTo(true));

Note: the mapTo operator has been deprecated in RxJS 7 and will be removed in RxJS 8. It's better to use map with a function that returns the static value.

When making an HTTP request with query params in Angular using the HttpClient you don't need to compose the URL by yourself. Instead, you can pass the params as an object or an HttpParams instance.

  // Instead of passing query params as part of the URL...
function fetchSomeData() {
  return this.httpClient.get('/my/endpoint?id=2');
}

// ... you can pass them as object
function fetchSomeData() {
  const params: { id: 2 };
  return this.httpClient.get('/my/endpoint', { params });
}

// ... or HttpParams
function fetchSomeData() {
  const params = new HttpParams().set('id', 2);
  return this.httpClient.get('/my/endpoint', { params });
}