diff --git a/.changeset/grumpy-zebras-move.md b/.changeset/grumpy-zebras-move.md
new file mode 100644
index 0000000..b535f02
--- /dev/null
+++ b/.changeset/grumpy-zebras-move.md
@@ -0,0 +1,5 @@
+---
+'@shopify/draggable': patch
+---
+
+Convert SwappableEvent to typescript
diff --git a/src/Swappable/SwappableEvent/SwappableEvent.js b/src/Swappable/SwappableEvent/SwappableEvent.ts
similarity index 62%
rename from src/Swappable/SwappableEvent/SwappableEvent.js
rename to src/Swappable/SwappableEvent/SwappableEvent.ts
index 47c0212..09d6f4c 100644
--- a/src/Swappable/SwappableEvent/SwappableEvent.js
+++ b/src/Swappable/SwappableEvent/SwappableEvent.ts
@@ -1,14 +1,31 @@
 import AbstractEvent from 'shared/AbstractEvent';
 
+import {DragEvent, DragEventData} from '../../Draggable/DragEvent';
+
+interface SwappableEventData {
+  dragEvent: DragEvent<DragEventData>;
+}
+
 /**
  * Base swappable event
  * @class SwappableEvent
  * @module SwappableEvent
  * @extends AbstractEvent
  */
-export class SwappableEvent extends AbstractEvent {
+export class SwappableEvent<
+  T extends SwappableEventData,
+> extends AbstractEvent<SwappableEventData> {
   static type = 'swappable';
 
+  /**
+   * SwappableEvent constructor.
+   * @constructs SwappableEvent
+   * @param {SwappableEventData} data - Event data
+   */
+  constructor(public data: T) {
+    super(data);
+  }
+
   /**
    * Original drag event that triggered this swappable event
    * @property dragEvent
@@ -26,18 +43,23 @@ export class SwappableEvent extends AbstractEvent {
  * @module SwappableStartEvent
  * @extends SwappableEvent
  */
-export class SwappableStartEvent extends SwappableEvent {
+export class SwappableStartEvent extends SwappableEvent<SwappableEventData> {
   static type = 'swappable:start';
   static cancelable = true;
 }
 
+interface SwappableSwapEventData extends SwappableEventData {
+  over: HTMLElement;
+  overContainer: HTMLElement;
+}
+
 /**
  * Swappable swap event
  * @class SwappableSwapEvent
  * @module SwappableSwapEvent
  * @extends SwappableEvent
  */
-export class SwappableSwapEvent extends SwappableEvent {
+export class SwappableSwapEvent extends SwappableEvent<SwappableSwapEventData> {
   static type = 'swappable:swap';
   static cancelable = true;
 
@@ -62,13 +84,17 @@ export class SwappableSwapEvent extends SwappableEvent {
   }
 }
 
+interface SwappableSwappedEventData extends SwappableEventData {
+  swappedElement: HTMLElement;
+}
+
 /**
  * Swappable swapped event
  * @class SwappableSwappedEvent
  * @module SwappableSwappedEvent
  * @extends SwappableEvent
  */
-export class SwappableSwappedEvent extends SwappableEvent {
+export class SwappableSwappedEvent extends SwappableEvent<SwappableSwappedEventData> {
   static type = 'swappable:swapped';
 
   /**
@@ -88,6 +114,6 @@ export class SwappableSwappedEvent extends SwappableEvent {
  * @module SwappableStopEvent
  * @extends SwappableEvent
  */
-export class SwappableStopEvent extends SwappableEvent {
+export class SwappableStopEvent extends SwappableEvent<SwappableEventData> {
   static type = 'swappable:stop';
 }
diff --git a/src/Swappable/SwappableEvent/index.js b/src/Swappable/SwappableEvent/index.ts
similarity index 100%
rename from src/Swappable/SwappableEvent/index.js
rename to src/Swappable/SwappableEvent/index.ts