RxJs 和打字稿。 TS2307：找不到模块“@reactivex/rxjs”答案

【问题标题】：RxJs and Typescript. TS2307: Cannot find module '@reactivex/rxjs'RxJs 和打字稿。 TS2307：找不到模块“@reactivex/rxjs”
【发布时间】：2017-08-02 16:19:24
【问题描述】：

我遇到了 typescript 和 RxJs v5 的问题。

请查看更新部分。

我做了yarn add @reactivex/rxjs（也是yarn add rxjs），在我的index.ts 上做了import Rx from '@reactivex/rxjs'; 并得到了这个错误：

另外，如果我运行node ./node_modules/.bin/tsc，我也会收到此错误error TS2307: Cannot find module '@reactivex/rxjs'.

更新

也在做

import { Observable } from 'rxjs/Observable'

抛出相同错误 .

更新 2

这似乎与 TS 本身有关，而不是与 RxJS 相关。

"compilerOptions": {
    "module": "commonjs",
    "allowJs": true,
    "outDir": "dist",
    "target": "es2015",
    "noImplicitAny": true,
    "noEmit": true,
    "strictNullChecks": true,
    "suppressExcessPropertyErrors": false,
    "suppressImplicitAnyIndexErrors": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "lib": [
        "es2015",
        "dom"
    ]
}

拥有这个 ^ 配置似乎可以解决 VSCode 问题，但针对 src/index.ts 运行 tsc 不起作用

node_modules/rxjs/Observable.d.ts(69,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.

【问题讨论】：

我怀疑原因在于工具。 package.json 有点不寻常，有"main": "index.js" 和"typings": "./dist/cjs/Rx.d.ts"。这些工具可能没有使用typings 条目。无论如何，如果您使用其他任何具有 RxJS 依赖项的东西，您应该安装 npm install rxjs，因为这可能是其他依赖项可能使用的。
嘿，Cartant，您能详细说明一下吗？我想我没有在这里关注你。
@reactivex/rxjs 没有与package.json 中称为main 的文件平行的.d.ts 文件； .d.ts 嵌套更深。我猜这可能会混淆一些工具。如果你有其他使用 rxjs 的依赖项（例如 Angular），TypeScript 可能会不高兴，因为 @reactivex/rxjs 中的类型将被视为不同的类型。我会推荐马丁的回答。

标签： typescript rxjs rxjs5

【解决方案1】：

当我使用 npm 安装 UUID 包时，我遇到了这个问题，然后我使用 yarn 安装，它对我来说很好。

【讨论】：

【解决方案2】：

让我们想象以下场景：

my-app
  |__ app.ts

app.ts 文件根据martin's comment 包含import { Observable } from 'rxjs/Observable'。

我想将我的app.ts 编译成app.js

第 1 步：npm install rxjs

my-app
  |__ app.ts
  |__ node_modules
          |__ rxjs
          |__ ...

第 2 步：

没有 tsconfig.json：
- 步骤 2-1：运行tsc --target es2015 --module commonjs app
与 tsconfig.json：
- 步骤 2-1：将tsconfig.json 添加到my-app 文件夹。

my-app
  |__ app.ts
  |__ tsconfig.json
  |__ node_modules
          |__ rxjs
          |__ ...

- 步骤2-2：将以下配置设置为tsconfig.json文件：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015"
  },
  "files": ["app.ts"]
}

- 步骤 2-3：运行 tsc 而不是 ~~tsc app~~

第三步：运行编译文件，node app.js

【讨论】：

【解决方案3】：

对我来说，我遇到了以下错误：
错误 TS2307: 找不到模块 'rxjs-compat/Observable'。

解决方案：而不是导入：

import { Observable } from 'rxjs/Observable';

使用：

import { Observable } from 'rxjs';

您可以通过逗号分隔所有要导入的可观察对象，例如：

import { Observable, of } from 'rxjs';

【讨论】：

【解决方案4】：

对于 RxJS 5，你应该使用：

import * as Rx from 'rxjs';

或者只导入库的特定部分：

import { Observable } from 'rxjs/Observable';

欲了解更多信息，请参阅：https://github.com/ReactiveX/rxjs/#installation-and-usage

【讨论】：

嗨 Martin，谢谢，但我已经尝试过 安装和使用 下的内容。 js import { Observable } from 'rxjs/Observable'; 我得到了和上面一样的消息“找不到模块rxjs/Observable”
你确定它真的下载到./node_modules/rxjs吗？
是的，它在里面。

【解决方案5】：

This is a hard nut to crack: my fix

 in package.json  dependencies confirm this code exists:

     "rxjs": "^5.5.2",


In file /node_modules/@angular/core/src/application_ref.d.ts

//import { Observable } from 'rxjs/Observable';
// yeah, sure, I'm not supposed to, but I did and i worked
   import { Observable } from 'rxjs/Rx';


in file node_modules/rxjs/src/tsconfig.json

    {
      "compilerOptions": {
        "removeComments": false,
        "preserveConstEnums": true,
        "sourceMap": true,
        "declaration": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "suppressImplicitAnyIndexErrors": true,
        "moduleResolution": "node",
        "target": "es6",
        "outDir": "dist/es6",
        "lib": [ "es2016.array.include" ]
      },
      "formatCodeOptions": {
        "indentSize": 2,
        "tabSize": 2
      },
      "bazelOptions": {
        "suppressTsconfigOverrideWarnings": true
      },
      "files": [
        "src/Rx.ts"
      ]
    }

for this ng --version

    Angular CLI: 1.6.7
    Node: 8.11.1
    OS: darwin x64
    Angular: 5.2.10
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    @angular/cli: 1.6.7
    @angular-devkit/build-optimizer: 0.0.42
    @angular-devkit/core: 0.0.29
    @angular-devkit/schematics: 0.2.0
    @ngtools/json-schema: 1.1.0
    @ngtools/webpack: 1.9.7
    @schematics/angular: 0.1.17
    typescript: 2.4.2
    webpack-dev-server: 2.11.2
    webpack: 3.10.0

【讨论】：

【解决方案6】：

我在 Visual Studio 2017 中的一个全新的“Hello World”项目中遇到了同样的问题，为此我执行了npm install rxjs。

基本上只是在我的server.ts 文件中有这个：

import { Observable } from 'rxjs/Observable'
import * as http from 'http';

var port = process.env.port || 1337
http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
}).listen(port);

根据为编译选项 module 和 lib 设置的值，这会产生错误：

server.ts(1,28): error TS2307: Build:Cannot find module 'rxjs/Observable'.

或：

node_modules\rxjs\Observable.d.ts(73,59): error TS2693: Build:'Promise' only refers to a type, but is being used as a value here.

对我有用的编译选项的成功组合是：

"compilerOptions": {
    "module": "commonjs",
    "lib": [ "es2015" ]
  }

这使得两个错误都消失了。

【讨论】：

"commonjs" 为我修复了它。

【解决方案7】：

尝试在compileOptions 中设置"moduleResolution": "node" 以指定TS 的模块解析策略。

npm install rxjs --save

在你的打字稿中

import { Observable } from 'rxjs/Rx';

这为我解决了问题。

【讨论】：

是什么导致了这个问题？这不仅仅是重新安装 rxjs，因为对于 Angular 应用程序它已经存在，但它给出了同样的错误

【解决方案8】：

使用这个语法：

import { Observable } from 'rxjs/Rx'

或者

import Rx from 'rxjs/Rx';
Rx.Observable.of(1,2,3)

或者

import { Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

Observable.of(1,2,3).map(x => x + '!!!'); // etc

所有这些示例都可以在网站上找到： http://reactivex.io/rxjs/manual/installation.html

【讨论】：