TypeScript

by Terrance Smith

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

TypeScript

class AddressData {
  address1: string;
  address2: string;
  city: string;
  state: string;
  zip: string;
}
interface Address extends AddressData {
   /**
    * Maps an object to an Address
    * @param obj object to map to an Address
    */
   constructor(obj: any) {
     Object.assign(this, obj);
   }

  /**
   * Returns the city, state and zip as: "city, state zip".
   * Formats it correctly if parts are missing.
   */

  get cityStateZip(): string {
    const city = this.trimToEmpty(this.city);
    const state = this.trimToEmpty(this.state);
    const zip = this.trimToEmpty(this.zip);

     if (city || state || zip) {
       let csz = city;

       if (city && state) {
         csz += ',';
       }

       if (state) {
         csz += ' ' + state;
       }

       if (zip) {
         csz += ' ' + zip;
       }

       return csz;
     }

     return '';
   }
}

declare global {
  interface String {
    trimToEmpty(): string;
  }

  interface Address {
    isBlank(): boolean;
  }
}

String.prototype.trimToEmpty = function(): string {
  return this.str ? this.str.trim() : '';
};

Address.prototype.isBlank = function(): boolean {
  const address: Address = this;
  return !address.address1.trimToEmpty
    && !address.address2.trimToEmpty()
    && !address.city.trimToEmpty()
    && !address.state.trimToEmpty()
    && !address.zip.trimToEmpty();
};