[前提] of、fromはobservableを作るもの

ofとfromは、Observableにするメソッドなので、前提としてObservableの概念を学ばなければいけません。
https://tech.recruit-mp.co.jp/front-end/rxjs-intro/

subscribeの説明

subscribeはobservableに付随するメソッドです。
observableを川の流れと例えると、subscibeは下流に来た値を流す処理です。
以下がsubscribeメソッドの中身です。


subscribe(
  (x) => console.log(x),                    // onNext
  (error: Error) => console.error(error),   // onError
  () => console.log('Completed!!')          // onComplete
)

新しい値が取得できたら、onNextメソッド、
エラーが出たら、onErrorメソッド、
全ての値が流れ切った時に、OnCompleteメソッドが発火します、

[of] 引数の値を,observableにする

引数の値をObservableのデータにします。


// numberをobservableにして、引数である、1と２をストリームのデータにします。
 const number = of(1,2);
// subscribeで、1と2を取り出します。
 number.subscribe(val => console.log(val))

=> 1,2

[from] 引数の値を分解した要素を、observableの値にする

fromは、引数の値を分解して、observebleの値にします。

配列の場合


// 配列を、引数に入れる。fromで、要素が分解されるので、1と2をストリームのデータにします。
 const array = from([1,2])
// subscribeで、1と2を取り出します。
 array.subscribe(val => console.log(val))

=> 1,2

配列型オブジェクトの場合

配列とほぼ同じです。


 const numbers: Number[]
 numbers = [1,2]
 const array = from(numbers)
 array.subscribe(val => console.log(val))
=> 1,2

Stringの時


// stringを引数に入れる。stringの文字列が分解されて,"s","t","r","i","n","g"を
 const string = from("string");
// subscribeで、"s","t","r","i","n","g"を取り出す。
  string.subscribe(val => console.log(val))
=> "s","t","r","i","n","g"

Promiseの時


function numberOne()  {
 return 1
};

function numberTwo(){
 return 2
};


const promise = new Promise((numberOne, numberTwo) => {
    const one = numberOne();
    const two = numberTwo();
    setTimeout(() => {
        return [one, two]
    });
}



const promise = promise()

const result = from(promise);
result.subscribe(val => console.log(val));
=> 1,2

まとめ

	of	from
役割	Observableにする	Observableにする
引数の数	複数	一つ
引数にする値	値	配列、配列型オブジェクト、Promise,Observable,string

RxJSのof と fromの違い