如何将 RxJs 6 与 TypeScript 和 WebPack 一起使用答案

【问题标题】：How to use RxJs 6 with TypeScript and WebPack如何将 RxJs 6 与 TypeScript 和 WebPack 一起使用
【发布时间】：2019-04-20 21:53:15
【问题描述】：

我遵循了本教程（非常简单）： 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”也可以。

我的问题：没有一个操作员可以工作。打开页面时出现错误：

未捕获的类型错误：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')
    }
};

【问题讨论】：

标签： typescript rxjs rxjs6

【解决方案1】：

因为您使用的是旧的运算符语法。当前的一个在于使用pipeable operators：

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 确实是个坏主意，所以除了使用类型推断之外，我也将其删除。

【讨论】：