4.3: Intersection types.

.idea/workspace.xml

@@ -2,9 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="c6f02f4e-af06-43d1-8bc0-507af01d0573" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/course/src/app.d.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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" />
+      <change beforePath="$PROJECT_DIR$/course/src/app.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app.d.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" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -29,8 +29,8 @@
           <entry key="gitignore" value="2" />
           <entry key="groovy" value="1" />
           <entry key="html" value="1" />
-          <entry key="json" value="19" />
-          <entry key="ts" value="69" />
+          <entry key="json" value="21" />
+          <entry key="ts" value="71" />
           <entry key="txt" value="1" />
         </counts>
       </usages-collector>
@@ -41,21 +41,21 @@
           <entry key="JSON" value="4" />
           <entry key="PLAIN_TEXT" value="2" />
           <entry key="Scratch" value="3" />
-          <entry key="TypeScript" value="69" />
-          <entry key="tsconfig" value="15" />
+          <entry key="TypeScript" value="71" />
+          <entry key="tsconfig" value="17" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="json" value="62" />
-          <entry key="ts" value="4940" />
+          <entry key="json" value="72" />
+          <entry key="ts" value="5682" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="JSON" value="5" />
-          <entry key="TypeScript" value="4940" />
-          <entry key="tsconfig" value="57" />
+          <entry key="TypeScript" value="5682" />
+          <entry key="tsconfig" value="67" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.js.language.service.starts">
@@ -73,10 +73,19 @@
   <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">
+        <entry file="file://$PROJECT_DIR$/course/src/app.d.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="178">
-              <caret line="65" column="21" selection-start-line="65" selection-start-column="21" selection-end-line="65" selection-end-column="21" />
+            <state relative-caret-position="330">
+              <caret line="22" column="47" selection-start-line="22" selection-start-column="47" selection-end-line="22" selection-end-column="47" />
+            </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="459">
+              <caret line="37" column="33" selection-start-line="37" selection-start-column="33" selection-end-line="37" selection-end-column="33" />
             </state>
           </provider>
         </entry>
@@ -120,8 +129,6 @@
         <option value="$PROJECT_DIR$/tsconfig.json" />
         <option value="$PROJECT_DIR$/course/src/app/app-routing.module.ts" />
         <option value="$PROJECT_DIR$/course/src/app/app.module.ts" />
-        <option value="$PROJECT_DIR$/course/tsconfig.json" />
-        <option value="$PROJECT_DIR$/course/src/app/create-report.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/base-report.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/edit-report.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/services/messenger.service.ts" />
@@ -129,8 +136,11 @@
         <option value="$PROJECT_DIR$/course/src/app/services/reportItem.service.ts" />
         <option value="$PROJECT_DIR$/course/src/app/create-report-item.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/reports.component.ts" />
-        <option value="$PROJECT_DIR$/course/src/app.d.ts" />
         <option value="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" />
+        <option value="$PROJECT_DIR$/course/src/app/create-report.component.ts" />
+        <option value="$PROJECT_DIR$/course/src/app/app.d.ts" />
+        <option value="$PROJECT_DIR$/course/tsconfig.json" />
+        <option value="$PROJECT_DIR$/course/src/app.d.ts" />
       </list>
     </option>
   </component>
@@ -284,13 +294,14 @@
     <property name="ts.external.directory.path" value="$PROJECT_DIR$/course/node_modules/typescript/lib" />
   </component>
   <component name="RecentsManager">
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/resources" />
-    </key>
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src" />
       <recent name="$PROJECT_DIR$" />
     </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/course/src/app" />
+      <recent name="$PROJECT_DIR$/resources" />
+    </key>
   </component>
   <component name="RunDashboard">
     <option name="ruleStates">
@@ -328,12 +339,12 @@
       <updated>1535304175302</updated>
       <workItem from="1535304176395" duration="75000" />
       <workItem from="1535304274687" duration="6343000" />
-      <workItem from="1535393199806" duration="13442000" />
+      <workItem from="1535393199806" duration="14824000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="19860000" />
+    <option name="totallyTimeSpent" value="21242000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
@@ -429,13 +440,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/tsconfig.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="195">
-          <caret line="13" column="29" selection-start-line="13" selection-start-column="29" selection-end-line="13" 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="253">
@@ -450,13 +454,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="295">
-          <caret line="20" column="5" lean-forward="true" selection-start-line="20" selection-start-column="5" selection-end-line="20" selection-end-column="5" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/course/src/app/base-report.component.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="525">
@@ -555,13 +552,6 @@
         </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="195">
-          <caret line="13" lean-forward="true" selection-start-line="13" selection-end-line="13" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/04/demos/After/package.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="300">
@@ -583,17 +573,38 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/app.d.ts">
+    <entry file="file://$PROJECT_DIR$/course/src/app/services/reportData.service.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="30">
-          <caret line="2" column="78" lean-forward="true" selection-start-line="2" selection-start-column="78" selection-end-line="2" selection-end-column="78" />
+        <state relative-caret-position="178">
+          <caret line="65" column="21" selection-start-line="65" selection-start-column="21" selection-end-line="65" selection-end-column="21" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/app/services/reportData.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="178">
-          <caret line="65" column="21" selection-start-line="65" selection-start-column="21" selection-end-line="65" selection-end-column="21" />
+        <state relative-caret-position="459">
+          <caret line="37" column="33" selection-start-line="37" selection-start-column="33" selection-end-line="37" selection-end-column="33" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/tsconfig.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="360">
+          <caret line="24" column="3" lean-forward="true" selection-start-line="24" selection-start-column="3" selection-end-line="24" selection-end-column="3" />
+        </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="195">
+          <caret line="13" lean-forward="true" selection-start-line="13" selection-end-line="13" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/src/app.d.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="330">
+          <caret line="22" column="47" selection-start-line="22" selection-start-column="47" selection-end-line="22" selection-end-column="47" />
         </state>
       </provider>
     </entry>

course/src/app.d.ts

@@ -7,3 +7,21 @@
 interface Window {
     psExpenses: string;
 }
+
+type CustomDragEvent = {
+    posX: number;
+    posY: number;
+}
+
+// Intersection types. Main difference from using an interface extending Event:
+// the interface could be inherited later, while the type cannot (it's not a
+// class).
+type DragStartEvent = Event & { dragStart: CustomDragEvent };
+type DragStopEvent = Event & { dragStop: CustomDragEvent };
+
+// Interfaces are better for reusable signatures, while types aliases like those
+// above are better for final single-use cases.
+interface IDragStartEvent extends Event {
+    dragStart: CustomDragEvent;
+}
+interface Foo extends IDragStartEvent {}

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

@@ -30,4 +30,12 @@ export class CreateReportComponent extends BaseReportComponent {
         this.reportDataService.add(newReport);
         this.location.back();
     }
+
+    dragStart(event: DragStartEvent) {
+        event.dragStart.posX;
+    }
+
+    dragStop(event: DragStopEvent) {
+        event.dragStop.posY;
+    }
 }