Typescript-Eigenschaft '' existiert nicht für den Typ 'nie'. in NodeJS

Question

Reagieren stapelt Ich bin langsam ich NodeJS Lehre, Express, React, monogoDB und Typoskript .. (aus einem Hintergrund MVC C# SQL DB)

Mein sehr einfaches Programm Hallo Welt nur mit den Bedürfnissen kommunizieren Express-Server zum Anzeigen einer Liste von Benutzern. Mein Express-Server auf Port 3001 und mein Create-React-App Frontend ist Port 3000.

meine App-Komponente ist wie folgt:

import * as React from 'react'; 
import './App.css'; 

const logo = require('./logo.svg'); 

class App extends React.Component { 
    state = {users: []} 
    componentDidMount(){ 
    console.log("Fetching Users"); 
    fetch('/users') 
     .then(res=> res.json()) 
     .then(users=> this.setState({users})); 
    } 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React test</h2> 
      {this.state.users.map(user => 
      <div key={user.id}>{user.username}</div> 
     )} 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.tsx</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App; 

Der Fehler:

(21,28): error TS2339: Property 'id' does not exist on type 'never'.

I kann das Problem sehen ist, dass ich Benutzer nicht definiert habe, um Eigenschaften users.id und users.username einzuschließen. Aber ich bin unsicher, wie man das tut?

Answer 1

Ich habe diese Frage möglicherweise zu schnell gestellt. aber ich löste meine Antwort

import * as React from 'react'; 
import './App.css'; 

const logo = require('./logo.svg'); 

interface Iuser { 
    id: number, 
    username: string 
} 

class App extends React.Component { 
    state = {users: Array<Iuser>()} 
    componentDidMount(){ 
    console.log("Fetching Users"); 
    fetch('/users') 
     .then(res=> res.json()) 
     .then(users=> this.setState({users})); 
    } 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React test</h2> 
      {this.state.users.map(user => 
      <div key={user.id}>{user.username}</div> 
     )} 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.tsx</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App; 

(eine Schnittstelle für das Array-Objekt erstellen)

tat ich dies vorher versuchen aber hatte die Syntax falsch.