Angular同名不相关类型冲突求助：Map<string, Person>赋值报错

Hey there, let's break down this tricky error you're hitting. That message might seem totally nonsensical at first—how can a type not be assignable to itself? The issue boils down to two distinct types sharing the same name but coming from different definitions, so TypeScript sees them as completely unrelated. Here's how to fix it:

Common Causes & Solutions #

1. You have duplicate Person type definitions #

This is by far the most likely culprit. If you've defined the Person interface/class in multiple files (e.g., one in your component's folder and another in your NgRx store's state folder), TypeScript treats them as separate types—even if their structure is identical.

Fix steps:

• Hunt down all instances of export interface Person or export class Person in your codebase.
• Delete all duplicates, leaving only one authoritative definition (ideally in a shared models folder like src/app/models/person.ts).
• Update every import of Person to point to this single file. For example:

  // In your component:
  import { Person } from '../models/person';
  
  // In your NgRx state/reducer:
  import { Person } from '../models/person';
  

2. Mismatched Map type sources #

Less common, but possible: you might be using a custom Map type from a third-party library in one place, and the native ES6 Map in another. For example, if you accidentally imported Map from a utility library instead of using the global browser/Node.js Map.

Fix steps:

• Check your import statements for lines like import { Map } from 'some-library';. If you find them, remove that import—you want to use the native Map by default.
• Ensure both your component's persons property and your store's rodex.persons property are typed with the native Map<string, Person>.

3. Temporary workaround (not recommended long-term) #

If you need to unblock yourself quickly while you track down the root cause, you can use a type assertion to tell TypeScript to trust you:

store.select('rodex').subscribe(rodex => {
  this.persons = rodex.persons as Map<string, Person>;
});

Just remember: this hides the underlying issue, so make sure to circle back and fix the root cause later to avoid unexpected bugs down the line.

Example of a Correct Setup #

To ensure everything aligns perfectly, here's how a proper shared type setup might look:

1. Shared Person model (src/app/models/person.ts):

export interface Person {
  id: string;
  name: string;
  age?: number;
  // Add your other properties here
}

2. Component code:

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Person } from '../models/person';

@Component({
  selector: 'app-person-list',
  templateUrl: './person-list.component.html'
})
export class PersonListComponent implements OnInit {
  persons: Map<string, Person>;

  constructor(private store: Store) {}

  ngOnInit(): void {
    this.store.select('rodex').subscribe(rodex => {
      this.persons = rodex.persons; // No type error now!
    });
  }
}

3. NgRx State definition:

import { Person } from '../models/person';

export interface RodexState {
  persons: Map<string, Person>;
  // Other state properties
}

export interface AppState {
  rodex: RodexState;
}

内容的提问来源于stack exchange，提问作者user9049996