docs(examples): change js examples to ts (ReactiveX#4635)

* (docs): Fix wrong format for examples

changed to right code format and fixed wrong imports.

related ReactiveX#4621

* (docs): Fix wrong format for examples

changed to right code format.

related ReactiveX#4621

* (docs): Fix wrong format for examples and refactored to ts

changed to right code format and replaced some `var` declarations with `const` as well as removes references to `Rx` and added new imports

related ReactiveX#4621

* fix typos

* fix typo

* fix typo

* fix typo

* fix typo

Author: BioPhoton

doc/installation.md

@@ -6,7 +6,7 @@ npm install rxjs@beta
 
 Import just the parts you need and use them
 
-```js
+```ts
 import { of, fromEvent } from 'rxjs';
 import { map, filter } from 'rxjs/operators';
 
@@ -29,7 +29,7 @@ npm install rxjs@beta
 
 Usage is pretty much the same thing, only with require:
 
-```js
+```ts
 const { of, fromEvent } = require('rxjs');
 const { map, filter } = require('rxjs/operators');
 
@@ -48,7 +48,7 @@ fromEvent(input, 'input').pipe(
 You can use a CDN (shown below), if you like. In this case, everything is in the same location as it would be in the ESM or CJS versions, but they're namespaced like `rxjs` or `rxjs.operators` instead of `rxjs` and `rxjs/operators`.
 
 
-```js
+```ts
 const { of, fromEvent } = rxjs;
 const { map, filter } = rxjs.operators;
 

doc/introduction.md

@@ -19,15 +19,15 @@ The essential concepts in RxJS which solve async event management are:
 
 Normally you register event listeners.
 
-```js
+```ts
 const button = document.querySelector('button');
 
 button.addEventListener('click', () => console.log('Clicked!'));
 ```
 
 Using RxJS you create an observable instead.
 
-```js
+```ts
 import { fromEvent } from 'rxjs';
 
 const button = document.querySelector('button');
@@ -42,7 +42,7 @@ What makes RxJS powerful is its ability to produce values using pure functions.
 
 Normally you would create an impure function, where other pieces of your code can mess up your state.
 
-```js
+```ts
 const button = document.querySelector('button');
 let count = 0;
 
@@ -72,7 +72,7 @@ RxJS has a whole range of operators that helps you control how the events flow t
 
 This is how you would allow at most one click per second, with plain JavaScript:
 
-```js
+```ts
 const button = document.querySelector('button');
 const rate = 1000;
 let count = 0;
@@ -88,7 +88,7 @@ button.addEventListener('click', () => {
 
 With RxJS:
 
-```js
+```ts
 import { fromEvent } from 'rxjs';
 import { throttleTime, scan } from 'rxjs/operators';
 
@@ -110,7 +110,7 @@ You can transform the values passed through your observables.
 
 Here's how you can add the current mouse x position for every click, in plain JavaScript:
 
-```js
+```ts
 const button = document.querySelector('button');
 const rate = 1000;
 let count = 0;
@@ -127,7 +127,7 @@ button.addEventListener('click', (event) => {
 
 With RxJS:
 
-```js
+```ts
 import { fromEvent } from 'rxjs';
 import { throttleTime, map, scan } from 'rxjs/operators';
 

doc/observable.md

@@ -148,7 +148,7 @@ This happens because both functions and Observables are lazy computations. If yo
 
 Some people claim that Observables are asynchronous. That is not true. If you surround a function call with logs, like this:
 
-```js
+```ts
 console.log('before');
 console.log(foo.call());
 console.log('after');
@@ -165,7 +165,7 @@ You will see the output:
 
 And this is the same behavior with Observables:
 
-```js
+```ts
 console.log('before');
 foo.subscribe(x => {
   console.log(x);
@@ -188,7 +188,7 @@ Which proves the subscription of `foo` was entirely synchronous, just like a fun
 
 What is the difference between an Observable and a function? **Observables can "return" multiple values over time**, something which functions cannot. You can't do this:
 
-```js
+```ts
 function foo() {
   console.log('Hello');
   return 42;
@@ -404,7 +404,7 @@ Each Observable must define how to dispose resources of that execution when we c
 
 For instance, this is how we clear an interval execution set with `setInterval`:
 
-```js
+```ts
 const observable = new Observable(function subscribe(subscriber) {
   // Keep track of the interval resource
   const intervalId = setInterval(() => {
@@ -420,7 +420,7 @@ const observable = new Observable(function subscribe(subscriber) {
 
 Just like `observable.subscribe` resembles `new Observable(function subscribe() {...})`, the `unsubscribe` we return from `subscribe` is conceptually equal to `subscription.unsubscribe`. In fact, if we remove the ReactiveX types surrounding these concepts, we're left with rather straightforward JavaScript.
 
-```js
+```ts
 function subscribe(subscriber) {
   const intervalId = setInterval(() => {
     subscriber.next('hi');

doc/observer.md

@@ -2,8 +2,8 @@
 
 **What is an Observer?** An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: `next`, `error`, and `complete`. The following is an example of a typical Observer object:
 
-```js
-var observer = {
+```ts
+const observer = {
   next: x => console.log('Observer got a next value: ' + x),
   error: err => console.error('Observer got an error: ' + err),
   complete: () => console.log('Observer got a complete notification'),
@@ -13,7 +13,7 @@ var observer = {
 To use the Observer, provide it to the `subscribe` of an Observable:
 
 <!-- skip-example -->
-```js
+```ts
 observable.subscribe(observer);
 ```
 
@@ -23,8 +23,8 @@ Observers in RxJS may also be *partial*. If you don't provide one of the callbac
 
 The example below is an Observer without the `complete` callback:
 
-```js
-var observer = {
+```ts
+const observer = {
   next: x => console.log('Observer got a next value: ' + x),
   error: err => console.error('Observer got an error: ' + err),
 };
@@ -33,14 +33,14 @@ var observer = {
 When subscribing to an Observable, you may also just provide the callbacks as arguments, without being attached to an Observer object, for instance like this:
 
 <!-- skip-example -->
-```js
+```ts
 observable.subscribe(x => console.log('Observer got a next value: ' + x));
 ```
 
 Internally in `observable.subscribe`, it will create an Observer object using the first callback argument as the `next` handler. All three types of callbacks may be provided as arguments:
 
 <!-- skip-example -->
-```js
+```ts
 observable.subscribe(
   x => console.log('Observer got a next value: ' + x),
   err => console.error('Observer got an error: ' + err),

doc/operator-creation.md

@@ -30,15 +30,15 @@ any way the developer sees fit, but here are some guidelines:
 ### Example
 
 <!-- skip-example -->
-```js
+```ts
 function mySimpleOperator(someCallback) {
-   // We *could* do a `var self = this;` here to close over, but see next comment
+   // We *could* do a `const self = this;` here to close over, but see next comment
    return Observable.create(subscriber => {
      // because we're in an arrow function `this` is from the outer scope.
-     var source = this;
+     const source = this;
 
      // save our inner subscription
-     var subscription = source.subscribe(value => {
+     const subscription = source.subscribe(value => {
        // important: catch errors from user-provided callbacks
        try {
          subscriber.next(someCallback(value));
@@ -64,14 +64,14 @@ There are a few ways to do this. It's really down to needs and preference:
 1) Use the ES7 function bind operator (`::`) available in transpilers like [BabelJS](http://babeljs.io):
 
 <!-- skip-example -->
-```js
+```ts
 someObservable::mySimpleOperator(x => x + '!');
 ```
 
 2) Create your own Observable subclass and override `lift` to return it:
 
 <!-- skip-example -->
-```js
+```ts
 class MyObservable extends Observable {
   lift(operator) {
     const observable = new MyObservable(); //<-- important part here
@@ -93,7 +93,7 @@ MyObservable.prototype.mySimpleOperator = mySimpleOperator;
 3) Patch `Observable.prototype` directly:
 
 <!-- skip-example -->
-```js
+```ts
 Observable.prototype.mySimpleOperator = mySimpleOperator;
 
 // ... and later .../
@@ -108,12 +108,12 @@ If you don't want to patch the Observable prototype, you can also write the oper
 Example implementation:
 
 <!-- skip-example -->
-```js
+```ts
 function mySimpleOperator(someCallback) {
   // notice that we return a function here
   return function mySimpleOperatorImplementation(source) {
     return Observable.create(subscriber => {
-      var subscription = source.subscribe(value => {
+      const subscription = source.subscribe(value => {
         try {
           subscriber.next(someCallback(value));
         } catch(err) {
@@ -132,7 +132,7 @@ function mySimpleOperator(someCallback) {
 This can now be used with the `pipe()` method on the Observable:
 
 <!-- skip-example -->
-```js
+```ts
 const obs = someObservable.pipe(mySimpleOperator(x => x + '!'));
 ```
 

doc/operators.md

@@ -10,9 +10,11 @@ Operators are **methods** on the Observable type, such as `.map(...)`, `.filter(
 
 An Operator is essentially a pure function which takes one Observable as input and generates another Observable as output. Subscribing to the output Observable will also subscribe to the input Observable. In the following example, we create a custom operator function that multiplies each value received from the input Observable by 10:
 
-```js
+```ts
+import {Observable, from} from 'rxjs';
+
 function multiplyByTen(input) {
-  var output = Rx.Observable.create(function subscribe(observer) {
+  const output = Observable.create(function subscribe(observer) {
     input.subscribe({
       next: (v) => observer.next(10 * v),
       error: (err) => observer.error(err),
@@ -22,8 +24,8 @@ function multiplyByTen(input) {
   return output;
 }
 
-var input = Rx.Observable.from([1, 2, 3, 4]);
-var output = multiplyByTen(input);
+const input = from([1, 2, 3, 4]);
+const output = multiplyByTen(input);
 output.subscribe(x => console.log(x));
 ```
 
@@ -42,10 +44,12 @@ Notice that a subscribe to `output` will cause `input` Observable to be subscrib
 
 **What is an instance operator?** Typically when referring to operators, we assume *instance* operators, which are methods on Observable instances. For instance, if the operator `multiplyByTen` would be an official instance operator, it would look roughly like this:
 
-```js
-Rx.Observable.prototype.multiplyByTen = function multiplyByTen() {
-  var input = this;
-  return Rx.Observable.create(function subscribe(observer) {
+```ts
+import {Observable} from 'rxjs';
+
+Observable.prototype.multiplyByTen = function multiplyByTen() {
+  const input = this;
+  return Observable.create(function subscribe(observer) {
     input.subscribe({
       next: (v) => observer.next(10 * v),
       error: (err) => observer.error(err),
@@ -59,8 +63,9 @@ Rx.Observable.prototype.multiplyByTen = function multiplyByTen() {
 
 Notice how the `input` Observable is not a function argument anymore, it is assumed to be the `this` object. This is how we would use such instance operator:
 
-```js
-var observable = Rx.Observable.from([1, 2, 3, 4]).multiplyByTen();
+```ts
+import {Observable, from} from 'rxjs';
+const observable = from([1, 2, 3, 4]).multiplyByTen();
 
 observable.subscribe(x => console.log(x));
 ```
@@ -73,19 +78,22 @@ The most common type of static operators are the so-called *Creation Operators*.
 
 A typical example of a static creation operator would be the `interval` function. It takes a number (not an Observable) as input argument, and produces an Observable as output:
 
-```js
-var observable = Rx.Observable.interval(1000 /* number of milliseconds */);
+```ts
+import {interval} from 'rxjs';
+
+const observable = interval(1000 /* number of milliseconds */);
 ```
 
 Another example of a creation operator is `create`, which we have been using extensively in previous examples. See the list of [all static creation operators here](#creation-operators).
 
 However, static operators may be of different nature than simply creation. Some *Combination Operators* may be static, such as `merge`, `combineLatest`, `concat`, etc. These make sense as static operators because they take *multiple* Observables as input, not just one, for instance:
 
-```js
-var observable1 = Rx.Observable.interval(1000);
-var observable2 = Rx.Observable.interval(400);
+```ts
+import {interval, merge} from 'rxjs';
+const observable1 = interval(1000);
+const observable2 = interval(400);
 
-var merged = Rx.Observable.merge(observable1, observable2);
+const merged = merge(observable1, observable2);
 ```
 
 ## Marble diagrams

doc/pipeable-operators.md

@@ -170,7 +170,7 @@ module.exports = {
 More complete configuration (closer to a real-world scenario):
 
 <!-- skip-example -->
-```js
+```ts
 const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -179,7 +179,7 @@ const nodeEnv = process.env.NODE_ENV || 'development';
 const isProd = nodeEnv === 'production';
 const rxPaths = require('rxjs/_esm5/path-mapping');
 
-var config = {
+const config = {
     devtool: isProd ? 'hidden-source-map' : 'cheap-eval-source-map',
     context: path.resolve('./src'),
     entry: {

doc/subject.md

@@ -315,7 +315,7 @@ setTimeout(() => {
 
 The AsyncSubject is a variant where only the last value of the Observable execution is sent to its observers, and only when the execution completes.
 
-```js
+```ts
 import { AsyncSubject } from 'rxjs';
 const subject = new AsyncSubject();