Typescript Property '' does not exist on type 'never'. in React NodeJs stack - node.js

Question

I am slowly teaching myself NodeJs, Express, React, monogoDB and Typescript.. (coming from a MVC C# SQL DB Background)
My very simple Hello world program just needs to communicate with the Express server to display a list of Users. My Express server is on Port 3001 and my Create-React-App Front end is on Port 3000.
my App Component is as follows:
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;
The error:
(21,28): error TS2339: Property 'id' does not exist on type 'never'.
I can see the problem is that I havent defined users to include properties users.id and users.username.. But I am unsure how to do this?

Answer 1

I may have posted this question a bit to quickly.
but I solved my answer
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;
(Creating an interface for the array object)
I did try this previously but had the syntax wrong.