カテゴリー
【Rxjs基礎講座】Typescript & Babelでrxjsを手軽に試せる砂場(sandbox)を構築してみよう
※ 当ページには【広告/PR】を含む場合があります。
2020/08/26
2022/10/05
「Rxjs」
Observable
rxjs
typescript
rxjs
ECMAScript
babel
rxjs
rxjs砂場
Requirements
nodejs
npm
yarn
npm
$ node --version
v12.13.1
$ npm --version
6.12.1
$ yarn --version
1.19.1
rxjsとtypescriptとbabelのインストール
tsc
typescript
javascript
babel-node
$ npm i -g typescript @babel/core @babel/node
rxjsのインストール
rxjs
package.json
$ npm init -y
package.json
$ touch package.json
{
"name": "nxjs-sandbox",
"version": "0.0.1",
"description": "To make a test for rxjs easier",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"private": true,
"scripts": {
"build": "tsc"
}
}
rxjs
$ yarn add @types/node -D #tsでnodejsを使うための型定義セット(おまじない)
$ yarn add rxjs -S
rxjs
tscの設定
$ tsc --init
tsconfig.json
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true
},
"include": [
"./index.ts"
],
"compileOnSave": false
}
index.ts
dist
rxjsを簡単にテストしてみる
rxjs
index.ts
$ touch index.ts
node_modules
$ tree -I node_modules
.
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock
index.ts
import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const range$ = () => {
range(1, 100).pipe(
filter(x => x % 2 === 1),
map(x => x + x)
).subscribe(x => console.log(x));
};
range$();
tscビルド
$ tsc
tsconfig.json
dist
$ tree -I node_modules
.
├── dist
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock
jsコードの実行
rxjs
$ babel-node dist/index.js
2
6
#...中略
194
198
Done in 0.49s.
rxjs
まとめ
rxjs
typescript
babel-node
node
typscript&rxjs
babel
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー