Оператор startWith - добавляет начальное значение в поток. То есть - в начало потока добавляется значение, которое передается в startWith() как аргумент; потом уже пойдут значения самого потока.

import { interval } from 'rxjs'; 
import { startWith, take } from 'rxjs/operators';

const stream$ = interval(1000).pipe(startWith('welcome'), take(12));
stream$.subscribe(v => console.log(v));

Вывод будет таким:

welcome
0
1
2
3

Обратить внимание! Выведен поток из пяти элементов! Начальное значение welcome также учитывается оператором take()!

Обратить внимание! В данном случае от потока отписываться не нужно, так как оператор take() сам отпишет (complete()) данный поток по завершении своей работы - особенность работы этого оператора take()!


Изображения иногда встречаются с разными расширениями - .jpg или .jpeg. В чем же разница между ними? Это разные форматы изображения? На самом деле нет - изображение может быть как image.jpeg так и image.jpg. И это - одно и тоже изображение; и формат изображения также одинаковый - JPEG.

Просто раньше, когда операционные системы были старыми (типа DOS), они поддерживали формат расширения - только три символа после точки - .jpg. Сейчас (при современных ОС) это неактуально и расширение можно указывать так, как этот формат называется официально - .jpeg.

Вот и вся разница.


В TypeScript есть возможность объявлять переменную, которая может хранить в себе значения двух или нескольких типов данных.

Такая возможность называется - Объединение Типов (Union Type). Union Type - это тоже тип данных, но это - составной тип данных. То есть, это тип данных, который создается на основе комбинирования нескольких других типов данных.

Давайте рассмотрим пример:

let someVariable: string | string[];
someVariable = 'apple'; // => apple
someVariable = ['apple', 'tomato', 'mango']; // => ['apple', 'tomato', 'mango']
someVariable = 12; // => Type '12' is not assignable to type 'string | string[]'

Что мы сделали в коде выше? Мы объявили переменную someVariable и указали, что эта переменная может хранить в себе значения только двух типов - строка (string) или же массив строк (string[]).

Присвоив переменной строку или же массив строк, мы не получим ошибки компиляции, так как это удовлетворяет условию - string или string[].

Но если присвоим переменной число 12, то получим ошибку

Type '12' is not assignable to type 'string | string[]'

… так как тип number не объявлен в числе допустимых типов значений для переменной someVariable.


Настройки Proxy в случае, если npm не разрешают ходить напрямую, исходя из вопросов безопасности. Чаще всего такое бывает в крупных организациях с высоким уровнем безопасности, например, банки.

Шаблон для задания прокси:

npm config set proxy http://<username>:<password>@<proxy-server-url>:<port>
npm config set https-proxy http://<username>:<password>@<proxy-server-url>:<port>

Эти настройки должны вам предоставить в организации:

  • username - имя пользователя
  • password - пароль пользователя
  • proxy-server-url - адрес прокси-сервера
  • port - порт прокси-сервера

Итоговые строки для запуска будут примерно такими:

npm config set proxy http://greenbergaa:123123@proxy.super-puper-compony.com:8080
npm config set https-proxy http://greenbergaa:123123@proxy.super-puper-compony.com:8080

Задача заметки - понять, что такое метод pluck.

Допустим, у нас есть input, на который мы подписаны и у которого забираем вводимое значение:

import { fromEvent } from 'rxjs';

const input = document.querySelector('#text');
const course$ = fromEvent(input, 'input');

course$.subscribe(event => console.log(event.target.value));

Этот метод не совсем верный, так как в subscribe мы должны выводить уже готовое значение. Поэтому можно использовать метод map для промежуточной обработки получаемых из потока событий:

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

const input = document.querySelector('#text');
const course$ = fromEvent(input, 'input');

course$
  .pipe(map((event: InputEvent) => event.target.value))
  .subscribe((value: string) => console.log(value));

Но в RxJs есть специальный метод pluck, который упрошает выборку значения из нужного поля объекта:

import { fromEvent } from 'rxjs';
import { pluck } from 'rxjs/operators';

const input = document.querySelector('#text');
const course$ = fromEvent(input, 'input');

course$
  .pipe(pluck('target', 'value'))
  .subscribe((value: string) => console.log(value));

То есть, мы знаем, что работает с объектом event, у которого есть поле target, у которого также есть поле value, значение которого нам нужно получить. Поэтому воссоздаем структуру объекта event так - pluck(‘target’, ‘value’).