diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index c7b9dad7363a..f5f8145c2d65 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -20,7 +20,6 @@
 /// <reference path="./modal/index.d.ts" />
 /// <reference path="./observer/mutation_observer/index.d.ts" />
 /// <reference path="./observer/resize_observer/index.d.ts" />
-/// <reference path="./overlay_mask/index.d.ts" />
 /// <reference path="./page/index.d.ts" />
 /// <reference path="./pagination/index.d.ts" />
 /// <reference path="./panel/index.d.ts" />
diff --git a/src/components/overlay_mask/index.d.ts b/src/components/overlay_mask/index.d.ts
deleted file mode 100644
index f449081d291d..000000000000
--- a/src/components/overlay_mask/index.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { CommonProps } from '../common';
-
-import { FunctionComponent, HTMLAttributes } from 'react';
-
-declare module '@elastic/eui' {
-
-  /**
-   * EuiOverlayMask type defs
-   *
-   * @see './overlay_mask.js'
-   */
-  export interface EuiOverlayMaskProps {
-    onClick?: () => void;
-  }
-
-  export const EuiOverlayMask: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiOverlayMaskProps
-    >;
-
-}
diff --git a/src/components/overlay_mask/index.js b/src/components/overlay_mask/index.js
deleted file mode 100644
index bd249edd4b5d..000000000000
--- a/src/components/overlay_mask/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export {
-  EuiOverlayMask,
-} from './overlay_mask';
diff --git a/src/components/overlay_mask/index.ts b/src/components/overlay_mask/index.ts
new file mode 100644
index 000000000000..23c5c1e1ada7
--- /dev/null
+++ b/src/components/overlay_mask/index.ts
@@ -0,0 +1 @@
+export { EuiOverlayMask } from './overlay_mask';
diff --git a/src/components/overlay_mask/overlay_mask.js b/src/components/overlay_mask/overlay_mask.js
deleted file mode 100644
index 4032f639dce5..000000000000
--- a/src/components/overlay_mask/overlay_mask.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * NOTE: We can't test this component because Enzyme doesn't support rendering
- * into portals.
- */
-
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-
-export class EuiOverlayMask extends Component {
-  constructor(props) {
-    super(props);
-
-    const {
-      className,
-      children, // eslint-disable-line no-unused-vars
-      onClick,
-      ...rest
-    } = this.props;
-
-    this.overlayMaskNode = document.createElement('div');
-    this.overlayMaskNode.className = classNames(
-      'euiOverlayMask',
-      className
-    );
-    if (onClick) {
-      this.overlayMaskNode.addEventListener('click', onClick);
-    }
-    Object.keys(rest).forEach((key) => {
-      if (typeof rest[key] !== 'string') {
-        throw new Error(`Unhandled property type. EuiOverlayMask property ${key} is not a string.`);
-      }
-      this.overlayMaskNode.setAttribute(key, rest[key]);
-    });
-
-    document.body.appendChild(this.overlayMaskNode);
-  }
-
-  componentDidMount() {
-    document.body.classList.add('euiBody-hasOverlayMask');
-  }
-
-  componentWillUnmount() {
-    document.body.classList.remove('euiBody-hasOverlayMask');
-
-    if (this.props.onClick) {
-      this.overlayMaskNode.removeEventListener('click', this.props.onClick);
-    }
-    document.body.removeChild(this.overlayMaskNode);
-    this.overlayMaskNode = null;
-  }
-
-  render() {
-    return createPortal(
-      this.props.children,
-      this.overlayMaskNode
-    );
-  }
-}
-
-EuiOverlayMask.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-};
diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx
new file mode 100644
index 000000000000..71f68c5ce777
--- /dev/null
+++ b/src/components/overlay_mask/overlay_mask.tsx
@@ -0,0 +1,64 @@
+/**
+ * NOTE: We can't test this component because Enzyme doesn't support rendering
+ * into portals.
+ */
+
+import { Component, HTMLAttributes } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export interface EuiOverlayMaskProps {
+  onClick?: () => void;
+}
+
+export type Props = CommonProps &
+  HTMLAttributes<HTMLDivElement> &
+  EuiOverlayMaskProps;
+
+export class EuiOverlayMask extends Component<Props> {
+  private overlayMaskNode?: HTMLDivElement;
+
+  constructor(props: Props) {
+    super(props);
+
+    const { className, children, onClick, ...rest } = this.props;
+
+    this.overlayMaskNode = document.createElement('div');
+    this.overlayMaskNode.className = classNames('euiOverlayMask', className);
+    if (onClick) {
+      this.overlayMaskNode.addEventListener('click', onClick);
+    }
+    interface RestType {
+      [key: string]: any;
+    }
+    Object.keys(rest).forEach((key: string) => {
+      if (typeof (rest as RestType)[key] !== 'string') {
+        throw new Error(
+          `Unhandled property type. EuiOverlayMask property ${key} is not a string.`
+        );
+      }
+      this.overlayMaskNode!.setAttribute(key, (rest as RestType)[key]);
+    });
+
+    document.body.appendChild(this.overlayMaskNode);
+  }
+
+  componentDidMount() {
+    document.body.classList.add('euiBody-hasOverlayMask');
+  }
+
+  componentWillUnmount() {
+    document.body.classList.remove('euiBody-hasOverlayMask');
+
+    if (this.props.onClick) {
+      this.overlayMaskNode!.removeEventListener('click', this.props.onClick);
+    }
+    document.body.removeChild(this.overlayMaskNode!);
+    this.overlayMaskNode = undefined;
+  }
+
+  render() {
+    return createPortal(this.props.children, this.overlayMaskNode!);
+  }
+}