【Rxjs基礎講座】Typescript & Babelでrxjsを手軽に試せる砂場(sandbox)を構築してみよう

            
            $ node --version
v12.13.1
$ npm --version
6.12.1
$ yarn --version
1.19.1
        

            
            $ npm i -g typescript @babel/core @babel/node
        

            
            $ npm init -y
        

            
            $ 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"
    }
}
        

            
            $ yarn add @types/node -D #tsでnodejsを使うための型定義セット(おまじない)
$ yarn add rxjs -S
        

            
            $ tsc --init
        

            
            {
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "declaration": true,
        "sourceMap": true,
        "outDir": "./dist",
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./index.ts"
    ],
    "compileOnSave": false
}
        

            
            $ touch index.ts
        

            
            $ tree -I node_modules
.
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock
        

            
            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
        

            
            $ tree -I node_modules
.
├── dist
│   ├── index.d.ts
│   ├── index.js
│   └── index.js.map
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock
        

            
            $ babel-node dist/index.js
2
6
#...中略
194
198
Done in 0.49s.