javascript - ¿Debería usar tanto `import 'rxjs/Rx'` como `import { Observable } from '@rxjs/Observable'`?

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/observable/throw';
@Component({});
export shellModule{}

Este es un fragmento de código de mi aplicación Angular que copié de algún lugar (he eliminado las definiciones en el módulo exportado. Lo estoy usando para crear un servicio para llamar a APIs.

En las importaciones en este archivo en particular, ¿por qué se importa Observable por separado aunque se haya importado todo rxjs? Si un módulo en particular se está importando en su totalidad, ¿por qué se importa un objeto específico de él por separado? Intenté hacer esta pregunta en el foro de donde lo tomé, pero no hubo respuesta. Quiero entender si esto de alguna manera ayuda a la optimización del código.

Respuesta #1

En general:

En Typescript, la forma en que se manejan los módulos requeriría que cargues toda la biblioteca con import * as rx from 'rxjs/Rx', o un módulo específico exportado dentro de la biblioteca para usarlo, de manera que el compilador cargue los tipos.

Reducir tus importaciones solo a los módulos específicos que necesitas prepara tu aplicación para usar tree shaking a partir de la compilación AOT de Angular. Esto no lo hace el compilador de TypeScript, sino una herramienta llamada Rollup. Así que puede ayudar a optimizar el código más adelante, pero no lo hace automáticamente.

En cuanto a la sobrecarga de compilación, incluir toda la biblioteca podría ralentizar un poco al compilador... pero esto no es un punto muy importante excepto para bibliotecas masivamente complejas.

Yo, personalmente, prefiero importar módulos específicos porque hace que el código que los llama sea un poco más limpio, ya que no necesito usar ese nombre global para acceder al nombre específico. rx.Observable vs Observable. Un buen ejemplo de esto es la biblioteca lodash (rxjs es un poco más complejo...)

Honestamente, importar bibliotecas enteras como la línea que tienes ahí: import 'rxjs/Rx' no tiene sentido para mí. Solo deberías importar módulos específicos exportados. Intenta eliminarlo, ver qué errores obtienes y luego usar la sintaxis * as rx en su lugar.

En lo que respecta a rxjs, es un poco complicado cuando quieres importar operadores específicos como lo hace esta pregunta, así que la forma de obtener operadores específicos es con: import 'rxjs/add/observable/from', pero eso también requiere ajustar tu configuración de webpack como se indica en la respuesta de la pregunta referenciada.

Respuesta #2

Veamos qué exporta el módulo rxjs/Rx:

export { Subject, AnonymousSubject } from './Subject';
export { Observable } from './Observable';
export { Operator } from './Operator';
export { Observer } from './Observer';
export { Subscription } from './Subscription';
export { Subscriber } from './Subscriber';
export { AsyncSubject } from './AsyncSubject';
export { ReplaySubject } from './ReplaySubject';
export { BehaviorSubject } from './BehaviorSubject';
...

import './add/observable/bindCallback';
import './add/observable/bindNodeCallback';
import './add/observable/combineLatest';
...

Entonces exporta clases de RxJs y también importa operadores desde la carpeta add. Como puedes ver, carga todo en la biblioteca. Sin embargo, no exporta ningún objeto global. Por lo tanto, necesitas usar exportación con nombre así:

import * as Rx from 'rxjs/Rx'

poder usar una clase exportada:

Rx.Observable.of(12, 3);

Esto emula lo que tendrías si cargases la biblioteca usando el paquete: un objeto global Rx:

<script src="rxjs/bundles/Rx.js">

Si quieres usar Observable sin el objeto global Rx, necesitas importarlo por separado:

import { Observable } from '@rxjs/Observable';
Observable.of(1);

Importando ambos

import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';

no es una buena práctica, pero puede usarse si no quieres importar cada operador por separado.

También vea Cómo importar correctamente los operadores desde el paquete rxjs.