我遵循了本教程(非常简单): 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”也有效。
我的问题:没有一个运算符(operator)可以工作。打开页面时出现错误:
Uncaught TypeError: observable.map is not a function
我现在搜索了 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')
}
};
最佳答案
因为您使用的是运算符的旧语法。当前的一个包括使用 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));
注意:您的 map 没有做任何有用的事情,所以我让它做了一些事情。使用 any
确实是个坏主意,所以除了使用类型推断之外,我也删除了它。
关于typescript - 如何将 RxJs 6 与 TypeScript 和 WebPack 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53359370/