如何将 RxJs 6 与 TypeScript 和 WebPack 一起使用
How to use RxJs 6 with TypeScript and WebPack
我遵循了本教程(非常简单):
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 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));
注意:您的地图没有做任何有用的事情,所以我让它做了一些事情。使用 any
确实是个坏主意,所以除了使用类型推断外,我也删除了它。
我遵循了本教程(非常简单): 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 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));
注意:您的地图没有做任何有用的事情,所以我让它做了一些事情。使用 any
确实是个坏主意,所以除了使用类型推断外,我也删除了它。