javascript - โมดูล Typescript แก้ไขปัญหา 'rxjs' แตกต่างกันในไฟล์เดียวกัน

ฉันใช้เวลาหลายชั่วโมงวนไปวนมา ดังนั้นถึงเวลาของคำถามที่ไม่ชัดเจนอีกครั้ง

ฉันอยู่ภายใน lerna mono repo โดยมีสองโปรเจกต์ย่อย ได้แก่ ProjectA และ ProjectB

ProjectA มีการพึ่งพา rxjs เช่นเดียวกับ ProjectB

ProjectB มีการพึ่งพา ProjectA ซึ่ง lerna จัดการโดยใช้ symlinks

ปัญหาคือ ใน ProjectB ฉันมีไฟล์ที่ทำการนำเข้าดังต่อไปนี้:

import { Subject } from 'rxjs/Subject'
import { Observable } from "rxjs/Observable";

ในไฟล์นั้น มีคลาสหนึ่งซึ่งมีตัวแปรส่วนตัวซึ่งเป็น Subject และมันเปิดเผยตัวแปรนั้นเป็น Observable อย่างไรก็ตาม tsc กำลังแจ้งข้อผิดพลาดดังต่อไปนี้:

ประเภท 'Subject<ActionRequestResult<any>>' ไม่สามารถกำหนดค่าให้กับประเภท 'Observable<ActionRequestResult<any>>' ได้ คุณสมบัติ 'source' เป็นแบบป้องกัน แต่ประเภท 'Observable<T>' ไม่ใช่คลาสที่สืบทอดมาจาก 'Observable<T>'

หลังจากตรวจสอบแล้ว ปรากฏว่าการนำเข้า rxjs สองครั้งที่ด้านบนของไฟล์นั้นถูกนำเข้ามาจากสองแหล่งที่ต่างกัน ดังนั้นแม้ว่า Subject จะขยาย Observable มันก็ไม่ใช่ Observable เดียวกันที่ถูกนำเข้าและอ้างอิงในไฟล์ของฉัน

ฉันพยายามติดตั้ง rxjs ที่ระดับโปรเจกต์รูท ซึ่งเป็นที่ตั้งของไฟล์ lerna.json แต่ ProjectB มีการพึ่งพา webpack-cli ซึ่งมีการพึ่งพาแบบ transit ของ rxjs ด้วย ดังนั้นมันจึงยังคงถูกติดตั้งใน ProjectB

ดังนั้นฉันจึงไม่แน่ใจจริงๆ ว่าควรไปที่ไหน หรือว่านี่คือบั๊กหรือเปล่า?

ProjectA ใช้ Subject ภายใน ดังนั้นฉันสงสัยว่า TypeScript กำลังเดินไปตามโครงสร้างโปรเจกต์และเก็บแคชตำแหน่งของแต่ละสิ่งไว้ และสิ่งนี้กำลังเกิดปัญหาในสถานการณ์ที่ฉันเจอ

มีความคิดเห็นหรือคำแนะนำอะไรไหม?

คำตอบ #1

สามารถแก้ไขได้โดยการสลับลำดับของคำสั่งนำเข้าของฉัน ฉันเชื่อว่านี่เป็นบั๊กที่เกี่ยวข้องกับบริการภาษา Typescript และวิธีที่มันแคชสิ่งต่าง ๆ ฉันจะส่งปัญหาในเร็ว ๆ นี้

โดยพื้นฐานแล้ว ฉันมีสิ่งนี้:

import { Something } from 'ProjectA';
import { Subject } from 'rxjs/Subject';
import { Observable } from "rxjs/Observable";

เพราะว่า ProjectA อ้างอิง Subject ทำให้บริการภาษาชัดเจนว่าทำการแคชสิ่งนั้นไว้ ดังนั้นเมื่อฉันนำเข้ามาเอง มันจะใช้การอ้างอิงที่มีอยู่แล้ว

การย้ายการนำเข้า ProjectA ไปที่ท้ายช่วยแก้ปัญหาได้:

import { Subject } from 'rxjs/Subject';
import { Observable } from "rxjs/Observable";
import { Something } from 'ProjectA';