Angular中Object类型参数无法分配给Never类型问题求助

Hey, let's get this sorted out! That TS2345 error happens because two key issues are messing with TypeScript's type checking: missing explicit type definitions, and a bug in your WebService that turns your messages array into a string (yikes!). Here's how to fix everything:

1. First, Fix the Critical WebService Bug #

Looking at your web.service.ts, there are two big mistakes in the getMessages method:

• You forgot parentheses when calling toPromise() (it's a method, not a property!)
• You're using JSON.stringify(response) which converts the backend's array response into a string—so this.messages becomes a string instead of an array, making push() impossible.

Let's fix that, plus add proper types:

Step 1: Create a Message Interface #

First, define a clear type for your messages to keep everything consistent. Create a new file src/app/message.model.ts:

export interface Message {
  owner: string;
  text: string;
  // Add any other fields your backend returns (like id, createdAt) here
}

Step 2: Update WebService with Correct Types & Code #

Modify web.service.ts to use the new interface and fix the bugs:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Message } from './message.model';

@Injectable()
export class WebService {
  BASE_URL = 'http://localhost:1234/api';
  messages: Message[] = []; // Explicitly type as Message array

  constructor(private http: HttpClient) {
    this.getMessages();
  }

  async getMessages() {
    // Fix toPromise() and add type to http.get
    const response = await this.http.get<Message[]>(`${this.BASE_URL}/messages`).toPromise();
    // Directly assign the parsed response—no JSON.stringify needed!
    if (response) {
      this.messages = response;
    }
  }

  postMessage(message: Message) { // Type the parameter as Message
    return this.http.post<Message>(`${this.BASE_URL}/messages`, message).toPromise();
  }
}

2. Update Components to Use the Message Type #

Now let's make sure all components use the Message interface instead of vague object or any types.

Step 3: Fix MessagesComponent #

Update messages.component.ts to use the correct type:

import { Component } from '@angular/core'
import { WebService } from './web.service'
import { Message } from './message.model';

@Component({
 selector: 'messages',
 template: `
 <div *ngFor="let message of webService.messages">
 <mat-card class="card">
 <mat-card-title>{{message.owner}}</mat-card-title>
 <mat-card-content>{{message.text}}</mat-card-content>
 </mat-card>
 </div>
 `
})
export class MessagesComponent {
 messages: Message[] = []; // Explicit type here too
 constructor(private webService: WebService) { }
}

Step 4: Fix AppComponent's onPosted Method #

Change the parameter type from object to Message in app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { MessagesComponent } from './messages.component';
import { NewMessageComponent } from './new-message-componet';
import { Message } from './message.model';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 @ViewChild(MessagesComponent) messages: MessagesComponent;

 onPosted(message: Message) { // Now using Message type instead of object
 this.messages.messages.push(message);
 // Pro tip: Instead of just pushing to the frontend array, you should call
 // this.webService.postMessage(message).then(() => this.webService.getMessages());
 // This syncs the frontend with the backend so new messages persist!
 }
}

Step 5: Check NewMessageComponent's Output #

Make sure your NewMessageComponent emits a Message type instead of a generic object. For example:

import { Component, Output, EventEmitter } from '@angular/core';
import { Message } from './message.model';

@Component({
  selector: 'new-message',
  // Your template here
})
export class NewMessageComponent {
  @Output() onPosted = new EventEmitter<Message>();

  submitMessage(ownerInput: HTMLInputElement, textInput: HTMLInputElement) {
    const newMessage: Message = {
      owner: ownerInput.value,
      text: textInput.value
    };
    this.onPosted.emit(newMessage);
    // Clear inputs after submission
    ownerInput.value = '';
    textInput.value = '';
  }
}

Why This Works #

• By defining the Message interface, TypeScript knows exactly what shape your message objects have, eliminating the "object vs never" mismatch.
• We fixed the WebService bug so messages stays an array of Message objects, not a string.
• All components now use consistent types, so TypeScript can validate your code properly.

Give these changes a try, and your type error should disappear!

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