Как использовать RxJs 6 с TypeScript и WebPack - PullRequest
Новая
       8

Как использовать RxJs 6 с TypeScript и WebPack

0 голосов
/ 18 ноября 2018

Я следовал этому уроку (очень просто): https://www.techiediaries.com/rxjs-tutorial/

Мой index.ts выглядит так: 

import { Observable, Observer } from "rxjs";
import { map } from "rxjs/operators"

console.log(Observable);

var observable = Observable.create((observer:Observer<string>) => {
    observer.next('Hello');
    observer.next('Hello Again');
    observer.complete();
});

observable.map((s:string) => s).subscribe((x:any) => {
    console.log(x);
});

webpack-dev-server запускается без проблем.Кажется, что «Observable.create» также работает.

Моя проблема: ни один оператор не будет работать.Я получаю ошибку при открытии страницы:

Uncaught TypeError: observable.map не является функцией

Я ищу в течение 2 часов - каждая статья объясняет, чтоэто должен быть правильный способ использования RxJs 6 с TypeScript.

Мой tsconfig.json: 

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es6",
    "allowJs": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Мой webpack.config.js: 

const path = require('path');
module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
};

1 Ответ

0 голосов
/ 18 ноября 2018

Потому что вы используете старый синтаксис для операторов.Текущий состоит в использовании конвейерных операторов : 

import { Observable, Observer } from "rxjs";
import { map } from "rxjs/operators"

console.log(Observable);

var observable = Observable.create((observer:Observer<string>) => {
    observer.next('Hello');
    observer.next('Hello Again');
    observer.complete();
});

observable.pipe(
  map(s => s.toLowercase())
).subscribe(s => console.log(s));

Примечание: ваша карта не сделала ничего полезного, поэтому я заставил ее что-то сделать.Использование any на самом деле плохая идея, поэтому я также удалил ее, в дополнение к выводу типа.

...