3.5: refactoring using mapped types to avoid optional properties.

.idea/workspace.xml

@@ -2,7 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="c6f02f4e-af06-43d1-8bc0-507af01d0573" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/course/src/app/services/reportItem.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/services/reportItem.service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/course/src/app/create-report.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/create-report.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -27,7 +28,7 @@
           <entry key="gitignore" value="2" />
           <entry key="groovy" value="1" />
           <entry key="json" value="16" />
-          <entry key="ts" value="33" />
+          <entry key="ts" value="37" />
           <entry key="txt" value="1" />
         </counts>
       </usages-collector>
@@ -37,20 +38,20 @@
           <entry key="JSON" value="3" />
           <entry key="PLAIN_TEXT" value="2" />
           <entry key="Scratch" value="3" />
-          <entry key="TypeScript" value="33" />
+          <entry key="TypeScript" value="37" />
           <entry key="tsconfig" value="13" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="json" value="62" />
-          <entry key="ts" value="2389" />
+          <entry key="ts" value="2482" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="JSON" value="5" />
-          <entry key="TypeScript" value="2389" />
+          <entry key="TypeScript" value="2482" />
           <entry key="tsconfig" value="57" />
         </counts>
       </usages-collector>
@@ -69,10 +70,28 @@
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/course/src/app/services/reportData.service.ts">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="193">
+              <caret line="47" column="76" lean-forward="true" selection-start-line="47" selection-start-column="76" selection-end-line="47" selection-end-column="76" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/course/src/app/create-report.component.ts">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="24">
+              <caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="3" selection-end-column="27" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/course/src/app/services/reportItem.service.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="110">
-              <caret line="20" column="7" selection-start-line="20" selection-start-column="7" selection-end-line="20" selection-end-column="7" />
+            <state relative-caret-position="318">
+              <caret line="38" column="29" selection-start-line="38" selection-start-column="29" selection-end-line="38" selection-end-column="29" />
             </state>
           </provider>
         </entry>
@@ -83,6 +102,7 @@
     <findStrings>
       <find>beha</find>
       <find>beh</find>
+      <find>.id!</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -92,17 +112,17 @@
     <option name="CHANGED_PATHS">
       <list>
         <option value="$PROJECT_DIR$/tsconfig.json" />
-        <option value="$PROJECT_DIR$/course/src/app/create-report.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/create-report-item.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/app-routing.module.ts" />
         <option value="$PROJECT_DIR$/course/src/app/services/messenger.service.ts" />
         <option value="$PROJECT_DIR$/course/src/app/app.module.ts" />
         <option value="$PROJECT_DIR$/course/src/app/base-report.component.ts" />
-        <option value="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" />
         <option value="$PROJECT_DIR$/course/src/app/edit-report.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/reports.component.ts" />
         <option value="$PROJECT_DIR$/course/tsconfig.json" />
         <option value="$PROJECT_DIR$/course/src/app/services/reportItem.service.ts" />
+        <option value="$PROJECT_DIR$/course/src/app/create-report.component.ts" />
+        <option value="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" />
       </list>
     </option>
   </component>
@@ -265,6 +285,9 @@
       <method v="2" />
     </configuration>
   </component>
+  <component name="StructureViewFactory">
+    <option name="ACTIVE_ACTIONS" value=",ALPHA_COMPARATOR,HIDE_INHERITED_FROM_OBJECT" />
+  </component>
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
       <changelist id="c6f02f4e-af06-43d1-8bc0-507af01d0573" name="Default Changelist" comment="" />
@@ -274,19 +297,19 @@
       <updated>1535304175302</updated>
       <workItem from="1535304176395" duration="75000" />
       <workItem from="1535304274687" duration="6343000" />
-      <workItem from="1535393199806" duration="4896000" />
+      <workItem from="1535393199806" duration="6198000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="11314000" />
+    <option name="totallyTimeSpent" value="12616000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
     <editor active="true" />
     <layout>
       <window_info id="Favorites" order="0" side_tool="true" />
-      <window_info id="Structure" order="1" side_tool="true" visible="true" weight="0.1795422" />
+      <window_info active="true" id="Structure" order="1" side_tool="true" visible="true" weight="0.1795422" />
       <window_info id="npm" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Event Log" order="0" sideWeight="0.5007153" side_tool="true" weight="0.3299363" />
       <window_info anchor="bottom" id="Version Control" order="1" />
@@ -309,7 +332,7 @@
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="4" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Project" order="5" sideWeight="0.49582636" visible="true" weight="0.27110156" />
       <window_info anchor="right" id="Remote Host" order="6" show_stripe_button="false" />
-      <window_info active="true" anchor="right" x="0" y="0" width="310" height="677" id="Documentation" order="7" sideWeight="0.50417364" side_tool="true" visible="true" weight="0.27110156" />
+      <window_info anchor="right" x="0" y="0" width="310" height="677" id="Documentation" order="7" sideWeight="0.50417364" side_tool="true" weight="0.27110156" />
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -354,13 +377,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/app/create-report.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="270">
-          <caret line="18" column="51" lean-forward="true" selection-start-line="18" selection-start-column="51" selection-end-line="18" selection-end-column="51" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/course/src/app/create-report-item.component.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="255">
@@ -417,13 +433,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/app/services/reportData.service.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="274">
-          <caret line="43" column="72" selection-start-line="43" selection-start-column="72" selection-end-line="43" selection-end-column="72" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/course/src/tsconfig.app.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="165">
@@ -438,17 +447,31 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/course/src/app/services/reportItem.service.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="318">
+          <caret line="38" column="29" selection-start-line="38" selection-start-column="29" selection-end-line="38" selection-end-column="29" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/course/node_modules/typescript/lib/lib.es5.d.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="348">
-          <caret line="1374" column="5" selection-start-line="1374" selection-start-column="5" selection-end-line="1374" selection-end-column="5" />
+        <state relative-caret-position="253">
+          <caret line="978" lean-forward="true" selection-start-line="978" selection-end-line="978" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/app/services/reportItem.service.ts">
+    <entry file="file://$PROJECT_DIR$/course/src/app/create-report.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="24">
+          <caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="3" selection-end-column="27" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/src/app/services/reportData.service.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="110">
-          <caret line="20" column="7" selection-start-line="20" selection-start-column="7" selection-end-line="20" selection-end-column="7" />
+        <state relative-caret-position="193">
+          <caret line="47" column="76" lean-forward="true" selection-start-line="47" selection-start-column="76" selection-end-line="47" selection-end-column="76" />
         </state>
       </provider>
     </entry>

course/src/app/create-report.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { Location } from '@angular/common';
 import { MatDialog } from '@angular/material';
-import { ReportDataService, Report } from './services/reportData.service';
+import {ReportDataService, NewReport} from './services/reportData.service';
 import 'rxjs/add/operator/switchMap';
 import { BaseReportComponent } from './base-report.component';
 
@@ -20,7 +20,7 @@ export class CreateReportComponent extends BaseReportComponent {
     }
 
     save(): void {
-        const newReport: Report = {
+        const newReport: NewReport = {
             date: new Date(),
             approved: false,
             description: this.description,

course/src/app/reports.component.ts

@@ -61,12 +61,12 @@ export class ReportsComponent {
 
     approve(report: Report) {
         this.toggleApproval(report, true);
-        this.toggleApprovedStyle(report.id!, true);
+        this.toggleApprovedStyle(report.id, true);
     }
 
     reject(report: Report) {
         this.toggleApproval(report, false);
-        this.toggleApprovedStyle(report.id!, false);
+        this.toggleApprovedStyle(report.id, false);
     }
 
 

course/src/app/services/reportData.service.ts

@@ -5,14 +5,16 @@ import { WindowService } from './window.service';
 import { Subject } from 'rxjs/Subject';
 
 export type Report = {
-    id?: number;
+    id: number;
     date: Date;
     approved: boolean;
     description: string;
     items: ReportItem[];
-    amount?: number;
+    amount: number;
 };
 
+export type NewReport = Pick<Report, 'date' | 'approved' | 'description' | 'items' >
+
 const psReportsKey = 'ps-reports';
 
 @Injectable()
@@ -36,13 +38,13 @@ export class ReportDataService {
         return Promise.resolve(this.data.find(r => r.id === reportId));
     }
 
-    add(report: Report) {
+    add(report: NewReport) {
         const newReport = {
             ...report,
             // Since this.data: Report[], rep is a Report, so it does have an id
             // property we can use, although Report.id is an optional number.
             // Which means we can tell the compiler it exists with a "!".
-            id: this.data.reduce((biggestId, rep) => biggestId > rep.id! ? biggestId : rep.id!, 0) + 1,
+            id: this.data.reduce((biggestId, rep) => biggestId > rep.id ? biggestId : rep.id, 0) + 1,
             amount: report.items.reduce((sum, item) => sum + item.amount, 0)
         };
         const newData = [...this.data, newReport];