Advanced TypeScript Programming Projects

Creating a tabbed user interface

Before we add in our navigation elements, we are going to create the components that we will link to when the user clicks on one of the links. We will start with AddAddress.tsx, which we will add code into to add an address. We start off by adding the class definition:

export class AddAddress extends React.Component<any, IAddress> {}

The default state for our component is an empty IAddress, so we add the definition for it, and set the component state to our default:

private defaultState: Readonly<IAddress>;constructor(props:any) {  super(props);  this.defaultState = {    Line1: '',    Line2: '',    Line3: '',    Line4: '',    PostalCode: '',    ServerID: '',  };  const address: IAddress = this.defaultState; this.state = address; ...