diff --git a/.changeset/spicy-clouds-tickle.md b/.changeset/spicy-clouds-tickle.md
new file mode 100644
index 00000000..01c4f86b
--- /dev/null
+++ b/.changeset/spicy-clouds-tickle.md
@@ -0,0 +1,5 @@
+---
+'@shopify/draggable': patch
+---
+
+Convert DroppableEvent to typescript
diff --git a/src/Droppable/DroppableEvent/DroppableEvent.js b/src/Droppable/DroppableEvent/DroppableEvent.ts
similarity index 62%
rename from src/Droppable/DroppableEvent/DroppableEvent.js
rename to src/Droppable/DroppableEvent/DroppableEvent.ts
index 72b305a4..eacba6ec 100644
--- a/src/Droppable/DroppableEvent/DroppableEvent.js
+++ b/src/Droppable/DroppableEvent/DroppableEvent.ts
@@ -1,14 +1,31 @@
 import AbstractEvent from 'shared/AbstractEvent';
 
+import {DragEvent, DragEventData} from '../../Draggable/DragEvent';
+
+interface DroppableEventData {
+  dragEvent: DragEvent<DragEventData>;
+}
+
 /**
  * Base droppable event
  * @class DroppableEvent
  * @module DroppableEvent
  * @extends AbstractEvent
  */
-export class DroppableEvent extends AbstractEvent {
+export class DroppableEvent<
+  T extends DroppableEventData,
+> extends AbstractEvent<DroppableEventData> {
   static type = 'droppable';
 
+  /**
+   * DroppableEvent constructor.
+   * @constructs DroppableEvent
+   * @param {DroppableEventData} data - Event data
+   */
+  constructor(public data: T) {
+    super(data);
+  }
+
   /**
    * Original drag event that triggered this droppable event
    * @property dragEvent
@@ -20,13 +37,17 @@ export class DroppableEvent extends AbstractEvent {
   }
 }
 
+interface DroppableStartEventData extends DroppableEventData {
+  dropzone: HTMLElement;
+}
+
 /**
  * Droppable start event
  * @class DroppableStartEvent
  * @module DroppableStartEvent
  * @extends DroppableEvent
  */
-export class DroppableStartEvent extends DroppableEvent {
+export class DroppableStartEvent extends DroppableEvent<DroppableStartEventData> {
   static type = 'droppable:start';
   static cancelable = true;
 
@@ -41,13 +62,17 @@ export class DroppableStartEvent extends DroppableEvent {
   }
 }
 
+interface DroppableDroppedEventData extends DroppableEventData {
+  dropzone: HTMLElement;
+}
+
 /**
  * Droppable dropped event
  * @class DroppableDroppedEvent
  * @module DroppableDroppedEvent
  * @extends DroppableEvent
  */
-export class DroppableDroppedEvent extends DroppableEvent {
+export class DroppableDroppedEvent extends DroppableEvent<DroppableDroppedEventData> {
   static type = 'droppable:dropped';
   static cancelable = true;
 
@@ -62,13 +87,17 @@ export class DroppableDroppedEvent extends DroppableEvent {
   }
 }
 
+interface DroppableReturnedEventData extends DroppableEventData {
+  dropzone: HTMLElement;
+}
+
 /**
  * Droppable returned event
  * @class DroppableReturnedEvent
  * @module DroppableReturnedEvent
  * @extends DroppableEvent
  */
-export class DroppableReturnedEvent extends DroppableEvent {
+export class DroppableReturnedEvent extends DroppableEvent<DroppableReturnedEventData> {
   static type = 'droppable:returned';
   static cancelable = true;
 
@@ -83,13 +112,17 @@ export class DroppableReturnedEvent extends DroppableEvent {
   }
 }
 
+interface DroppableStopEventData extends DroppableEventData {
+  dropzone: HTMLElement;
+}
+
 /**
  * Droppable stop event
  * @class DroppableStopEvent
  * @module DroppableStopEvent
  * @extends DroppableEvent
  */
-export class DroppableStopEvent extends DroppableEvent {
+export class DroppableStopEvent extends DroppableEvent<DroppableStopEventData> {
   static type = 'droppable:stop';
   static cancelable = true;
 
diff --git a/src/Droppable/DroppableEvent/index.js b/src/Droppable/DroppableEvent/index.ts
similarity index 100%
rename from src/Droppable/DroppableEvent/index.js
rename to src/Droppable/DroppableEvent/index.ts