diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e066c2161e..9526526e34a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Converted observer utility components to TypeScript ([#2009](https://github.com/elastic/eui/pull/2009))
 - Converted tool tip components to TypeScript ([#2013](https://github.com/elastic/eui/pull/2013))
 - Converted `EuiCopy` to TypeScript ([#2016](https://github.com/elastic/eui/pull/2016))
+- Convert badge and token components to TypeScript ([#2026](https://github.com/elastic/eui/pull/2026))
 
 **Bug fixes**
 
diff --git a/src/components/badge/__snapshots__/badge.test.js.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap
similarity index 100%
rename from src/components/badge/__snapshots__/badge.test.js.snap
rename to src/components/badge/__snapshots__/badge.test.tsx.snap
diff --git a/src/components/badge/badge.test.js b/src/components/badge/badge.test.tsx
similarity index 100%
rename from src/components/badge/badge.test.js
rename to src/components/badge/badge.test.tsx
diff --git a/src/components/badge/badge.js b/src/components/badge/badge.tsx
similarity index 63%
rename from src/components/badge/badge.js
rename to src/components/badge/badge.tsx
index f5a66790fdc..d67469e785a 100644
--- a/src/components/badge/badge.js
+++ b/src/components/badge/badge.tsx
@@ -1,13 +1,68 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FunctionComponent,
+  MouseEventHandler,
+  HTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
-import { EuiPropTypes } from '../../utils';
+import { CommonProps, ExclusiveUnion, keysOf, PropsOf, Omit } from '../common';
 
 import { isColorDark, hexToRgb } from '../../services/color';
 
-import { IconPropType, EuiIcon } from '../icon';
+import { EuiIcon, IconColor, IconType } from '../icon';
 
-const colorToClassNameMap = {
+type IconSide = 'left' | 'right';
+
+type WithButtonProps = {
+  /**
+   * Will apply an onclick to the badge itself
+   */
+  onClick: MouseEventHandler<HTMLButtonElement>;
+
+  /**
+   * Aria label applied to the iconOnClick button
+   */
+  onClickAriaLabel: string;
+} & Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'color'>;
+
+type WithSpanProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick' | 'color'>;
+
+interface WithIconOnClick {
+  /**
+   * Will apply an onclick to icon within the badge
+   */
+  iconOnClick: MouseEventHandler<HTMLButtonElement>;
+
+  /**
+   * Aria label applied to the iconOnClick button
+   */
+  iconOnClickAriaLabel: string;
+}
+
+export type EuiBadgeProps = {
+  /**
+   * Accepts any string from our icon library
+   */
+  iconType?: IconType;
+
+  /**
+   * The side of the badge the icon should sit
+   */
+  iconSide?: IconSide;
+
+  /**
+   * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`.
+   */
+  color?: IconColor;
+
+  /**
+   * Props passed to the close button.
+   */
+  closeButtonProps?: PropsOf<EuiIcon>;
+} & CommonProps &
+  ExclusiveUnion<WithIconOnClick, {}> &
+  ExclusiveUnion<WithSpanProps, WithButtonProps>;
+
+const colorToClassNameMap: { [color in IconColor]: string } = {
   default: 'euiBadge--default',
   primary: 'euiBadge--primary',
   secondary: 'euiBadge--secondary',
@@ -17,20 +72,20 @@ const colorToClassNameMap = {
   hollow: 'euiBadge--hollow',
 };
 
-export const COLORS = Object.keys(colorToClassNameMap);
+export const COLORS = keysOf(colorToClassNameMap);
 
-const iconSideToClassNameMap = {
+const iconSideToClassNameMap: { [side in IconSide]: string } = {
   left: 'euiBadge--iconLeft',
   right: 'euiBadge--iconRight',
 };
 
-export const ICON_SIDES = Object.keys(iconSideToClassNameMap);
+export const ICON_SIDES = keysOf(iconSideToClassNameMap);
 
-export const EuiBadge = ({
+export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   children,
-  color,
+  color = 'default',
   iconType,
-  iconSide,
+  iconSide = 'left',
   className,
   onClick,
   iconOnClick,
@@ -39,8 +94,10 @@ export const EuiBadge = ({
   closeButtonProps,
   ...rest
 }) => {
+  checkValidColor(color);
+
   let optionalColorClass = null;
-  let optionalCustomStyles = null;
+  let optionalCustomStyles = undefined;
   let textColor = null;
 
   if (COLORS.indexOf(color) > -1) {
@@ -73,6 +130,11 @@ export const EuiBadge = ({
   let optionalIcon = null;
   if (iconType) {
     if (iconOnClick) {
+      if (!iconOnClickAriaLabel) {
+        console.warn(
+          'When passing the iconOnClick props to EuiBadge, you must also provide iconOnClickAriaLabel'
+        );
+      }
       optionalIcon = (
         <button
           className="euiBadge__iconButton"
@@ -93,6 +155,12 @@ export const EuiBadge = ({
     }
   }
 
+  if (onClick && !onClickAriaLabel) {
+    console.warn(
+      'Whe passing onClick to EuiBadge, you must also provide onClickAriaLabel'
+    );
+  }
+
   if (onClick && iconOnClick) {
     return (
       <span className={classes} style={optionalCustomStyles}>
@@ -134,69 +202,13 @@ export const EuiBadge = ({
   }
 };
 
-function checkValidColor(props, propName, componentName) {
-  const validHex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color);
-  if (props.color != null && !validHex && !COLORS.includes(props.color)) {
-    throw new Error(
-      `${componentName} needs to pass a valid color. This can either be a three ` +
+function checkValidColor(color: null | IconColor | string) {
+  const validHex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;
+
+  if (color != null && !validHex.test(color) && !COLORS.includes(color)) {
+    console.warn(
+      'EuiBadge expects a valid color. This can either be a three ' +
         `or six character hex value or one of the following: ${COLORS}`
     );
   }
 }
-
-EuiBadge.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-
-  /**
-   * Accepts any string from our icon library
-   */
-  iconType: IconPropType,
-
-  /**
-   * The side of the badge the icon should sit
-   */
-  iconSide: PropTypes.string,
-  /**
-   * Will apply an onclick to icon within the badge
-   */
-  iconOnClick: EuiPropTypes.withRequiredProp(
-    PropTypes.func,
-    'iconOnClickAriaLabel',
-    'Please provide an aria label to complement your iconOnClick'
-  ),
-
-  /**
-   * Aria label applied to the iconOnClick button
-   */
-  iconOnClickAriaLabel: PropTypes.string,
-
-  /**
-   * Will apply an onclick to the badge itself
-   */
-  onClick: EuiPropTypes.withRequiredProp(
-    PropTypes.func,
-    'onClickAriaLabel',
-    'Please provide an aria label to complement your onClick'
-  ),
-
-  /**
-   * Aria label applied to the onClick button
-   */
-  onClickAriaLabel: PropTypes.string,
-
-  /**
-   * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`.
-   */
-  color: checkValidColor,
-
-  /**
-   * Props passed to the close button.
-   */
-  closeButtonProps: PropTypes.object,
-};
-
-EuiBadge.defaultProps = {
-  color: 'default',
-  iconSide: 'left',
-};
diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
similarity index 100%
rename from src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap
rename to src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
diff --git a/src/components/badge/beta_badge/beta_badge.js b/src/components/badge/beta_badge/beta_badge.js
deleted file mode 100644
index b9d00bc4064..00000000000
--- a/src/components/badge/beta_badge/beta_badge.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiToolTip } from '../../tool_tip';
-
-import { IconPropType, EuiIcon } from '../../icon';
-
-export const EuiBetaBadge = ({
-  className,
-  label,
-  tooltipContent,
-  tooltipPosition,
-  title,
-  iconType,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiBetaBadge',
-    {
-      'euiBetaBadge--iconOnly': iconType,
-    },
-    className
-  );
-
-  let icon;
-  if (iconType) {
-    icon = (
-      <EuiIcon
-        className="euiBetaBadge__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
-    );
-  }
-
-  if (tooltipContent) {
-    return (
-      <EuiToolTip
-        position={tooltipPosition}
-        content={tooltipContent}
-        title={title || label}>
-        <span className={classes} {...rest}>
-          {icon || label}
-        </span>
-      </EuiToolTip>
-    );
-  } else {
-    return (
-      <span className={classes} title={title || label} {...rest}>
-        {icon || label}
-      </span>
-    );
-  }
-};
-
-EuiBetaBadge.propTypes = {
-  className: PropTypes.string,
-
-  /**
-   * One word label like "Beta" or "Lab"
-   */
-  label: PropTypes.node.isRequired,
-
-  /**
-   * Supply an icon type if the badge should just be an icon
-   */
-  iconType: IconPropType,
-
-  /**
-   * Content for the tooltip
-   */
-  tooltipContent: PropTypes.node,
-
-  /**
-   * Custom position of the tooltip
-   */
-  tooltipPosition: PropTypes.string,
-
-  /**
-   * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used
-   */
-  title: PropTypes.string,
-};
-
-EuiBetaBadge.defaultProps = {
-  tooltipPosition: 'top',
-};
diff --git a/src/components/badge/beta_badge/beta_badge.test.js b/src/components/badge/beta_badge/beta_badge.test.tsx
similarity index 100%
rename from src/components/badge/beta_badge/beta_badge.test.js
rename to src/components/badge/beta_badge/beta_badge.test.tsx
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
new file mode 100644
index 00000000000..a84ce337a45
--- /dev/null
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -0,0 +1,117 @@
+import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+import classNames from 'classnames';
+import { CommonProps, ExclusiveUnion } from '../../common';
+
+import { EuiToolTip, ToolTipPositions } from '../../tool_tip';
+
+import { EuiIcon, IconType } from '../../icon';
+
+// `label` prop can be a `ReactNode` only if `title` or `tooltipContent` is provided
+type LabelAsNode = (
+  | {
+      title: string;
+      tooltipContent?: ReactNode;
+    }
+  | {
+      tooltipContent: ReactNode;
+      title?: string;
+    }) & {
+  label: ReactNode;
+};
+
+interface LabelAsString {
+  /**
+   * One word label like "Beta" or "Lab"
+   */
+  label: string;
+}
+
+type BadgeProps = {
+  /**
+   * Supply an icon type if the badge should just be an icon
+   */
+  iconType?: IconType;
+
+  /**
+   * One word label like "Beta" or "Lab"
+   */
+  label: ReactNode;
+
+  /**
+   * Content for the tooltip
+   */
+  tooltipContent?: ReactNode;
+
+  /**
+   * Custom position of the tooltip
+   */
+  tooltipPosition?: ToolTipPositions;
+
+  /**
+   * Optional title will be supplied as tooltip title or title attribute
+   * otherwise the label will be used
+   */
+  title?: string;
+} & ExclusiveUnion<LabelAsNode, LabelAsString>;
+
+type EuiBetaBadgeProps = CommonProps &
+  HTMLAttributes<HTMLSpanElement> &
+  BadgeProps;
+
+export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
+  className,
+  label,
+  tooltipContent,
+  tooltipPosition = 'top',
+  title,
+  iconType,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiBetaBadge',
+    {
+      'euiBetaBadge--iconOnly': iconType,
+    },
+    className
+  );
+
+  let icon;
+  if (iconType) {
+    icon = (
+      <EuiIcon
+        className="euiBetaBadge__icon"
+        type={iconType}
+        size="m"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  if (tooltipContent) {
+    return (
+      <EuiToolTip
+        position={tooltipPosition}
+        content={tooltipContent}
+        title={title || label}>
+        <span className={classes} {...rest}>
+          {icon || label}
+        </span>
+      </EuiToolTip>
+    );
+  } else {
+    const spanTitle = title || label;
+    if (spanTitle && typeof spanTitle !== 'string') {
+      console.warn(
+        `Only string titles are permitted on badges that do not use tooltips. Found: ${typeof spanTitle}`
+      );
+    }
+    return (
+      <span
+        className={classes}
+        title={spanTitle as string | undefined}
+        {...rest}>
+        {icon || label}
+      </span>
+    );
+  }
+};
diff --git a/src/components/badge/beta_badge/index.js b/src/components/badge/beta_badge/index.ts
similarity index 100%
rename from src/components/badge/beta_badge/index.js
rename to src/components/badge/beta_badge/index.ts
diff --git a/src/components/badge/index.d.ts b/src/components/badge/index.d.ts
deleted file mode 100644
index e034e2ffaec..00000000000
--- a/src/components/badge/index.d.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { IconType } from '../icon';
-import { ToolTipPositions } from '../tool_tip/tool_tip';
-
-import {
-  HTMLAttributes,
-  MouseEventHandler,
-  FunctionComponent,
-  ReactNode,
-} from 'react';
-import { CommonProps, Omit } from '../common';
-
-declare module '@elastic/eui' {
-  type IconSide = 'left' | 'right';
-
-  export interface EuiBadgeProps {
-    iconType?: IconType;
-    iconSide?: IconSide;
-    iconOnClick?: MouseEventHandler<HTMLButtonElement>;
-    iconOnClickAriaLabel?: string;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    onClickAriaLabel?: string;
-    color?: string;
-    closeButtonProps?: object;
-  }
-
-  export const EuiBadge: FunctionComponent<
-    CommonProps &
-      Omit<HTMLAttributes<HTMLSpanElement>, 'color'> &
-      Omit<HTMLAttributes<HTMLButtonElement>, 'color'> &
-      EuiBadgeProps
-  >;
-
-  export interface EuiBetaBadgeProps {
-    iconType?: IconType;
-    label: ReactNode;
-    tooltipContent?: ReactNode;
-    tooltipPosition?: ToolTipPositions;
-    title?: string;
-  }
-
-  export const EuiBetaBadge: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLSpanElement> & EuiBetaBadgeProps
-  >;
-}
diff --git a/src/components/badge/index.js b/src/components/badge/index.ts
similarity index 100%
rename from src/components/badge/index.js
rename to src/components/badge/index.ts
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index fadcac60c2f..5a0136e4d88 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -1,5 +1,4 @@
 /// <reference path="./accordion/index.d.ts" />
-/// <reference path="./badge/index.d.ts" />
 /// <reference path="./button/index.d.ts" />
 /// <reference path="./call_out/index.d.ts" />
 /// <reference path="./code/index.d.ts" />
diff --git a/src/components/token/__snapshots__/token.test.js.snap b/src/components/token/__snapshots__/token.test.tsx.snap
similarity index 100%
rename from src/components/token/__snapshots__/token.test.js.snap
rename to src/components/token/__snapshots__/token.test.tsx.snap
diff --git a/src/components/token/index.d.ts b/src/components/token/index.d.ts
deleted file mode 100644
index dcc8f824540..00000000000
--- a/src/components/token/index.d.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FunctionComponent, HTMLAttributes } from 'react';
-import { CommonProps } from '../common';
-import { IconType } from '../icon';
-import {
-  EuiTokenMapDisplayOptions as DisplayOptions,
-  TokenShape as TkShape,
-  TokenColor as TkColor,
-  EuiTokenMapType as TkMapType,
-} from './token_map';
-
-declare module '@elastic/eui' {
-  /**
-   * token type defs
-   *
-   * @see './token.js'
-   */
-  export type TokenSize = 's' | 'm' | 'l';
-  export interface EuiTokenProps {
-    iconType: IconType;
-    size?: TokenSize;
-    displayOptions?: DisplayOptions;
-  }
-
-  export type TokenShape = TkShape;
-  export type TokenColor = TkColor;
-  export type TokenType = TkMapType;
-  export interface EuiTokenMapDisplayOptions extends DisplayOptions {}
-
-  export const EuiToken: FunctionComponent<
-    CommonProps & EuiTokenProps & HTMLAttributes<HTMLDivElement>
-  >;
-}
diff --git a/src/components/token/index.js b/src/components/token/index.ts
similarity index 100%
rename from src/components/token/index.js
rename to src/components/token/index.ts
diff --git a/src/components/token/token.test.js b/src/components/token/token.test.tsx
similarity index 95%
rename from src/components/token/token.test.js
rename to src/components/token/token.test.tsx
index 51e35edeb14..b8eccac15a7 100644
--- a/src/components/token/token.test.js
+++ b/src/components/token/token.test.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { render } from 'enzyme';
 
 import { EuiToken, SHAPES, SIZES } from './token';
+import { TokenColor } from './token_map';
 
-const tokenColors = [
+const tokenColors: TokenColor[] = [
   'tokenTint01',
   'tokenTint02',
   'tokenTint03',
diff --git a/src/components/token/token.js b/src/components/token/token.tsx
similarity index 60%
rename from src/components/token/token.js
rename to src/components/token/token.tsx
index 23a865ce0c7..bc7a7326b1b 100644
--- a/src/components/token/token.js
+++ b/src/components/token/token.tsx
@@ -1,26 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { IconPropType, EuiIcon } from '../icon';
-import { TOKEN_MAP } from './token_map';
+import { IconType, EuiIcon } from '../icon';
+import {
+  EuiTokenMapType,
+  EuiTokenMapDisplayOptions,
+  TokenColor,
+  TokenShape,
+  TOKEN_MAP,
+} from './token_map';
+import { CommonProps, keysOf } from '../common';
 
-const sizeToClassMap = {
+type TokenSize = 's' | 'm' | 'l';
+
+const sizeToClassMap: { [size in TokenSize]: string } = {
   s: 'euiToken--small',
   m: 'euiToken--medium',
   l: 'euiToken--large',
 };
 
-export const SIZES = Object.keys(sizeToClassMap);
+export const SIZES = keysOf(sizeToClassMap);
 
-const shapeToClassMap = {
+const shapeToClassMap: { [shape in TokenShape]: string } = {
   circle: 'euiToken--circle',
   square: 'euiToken--square',
   rectangle: 'euiToken--rectangle',
 };
 
-export const SHAPES = Object.keys(shapeToClassMap);
+export const SHAPES = keysOf(shapeToClassMap);
 
-const colorToClassMap = {
+const colorToClassMap: { [color in TokenColor]: string } = {
   tokenTint01: 'euiToken--tokenTint01',
   tokenTint02: 'euiToken--tokenTint02',
   tokenTint03: 'euiToken--tokenTint03',
@@ -35,12 +43,33 @@ const colorToClassMap = {
   tokenTint12: 'euiToken--tokenTint12',
 };
 
-export const COLORS = Object.keys(colorToClassMap);
+export const COLORS = keysOf(colorToClassMap);
 
-export const EuiToken = ({
+interface EuiTokenProps {
+  /**
+   * An EUI icon type
+   */
+  iconType: IconType;
+  /**
+   * Size of the token
+   */
+  size?: TokenSize;
+  /**
+   * By default EUI will auto color tokens. You can can however control it
+   * - `color`: can be `tokenTint01` thru `tokenTint10`
+   * - `shape`: square, circle, rectangle as options
+   * - `fill`: makes it a solid color
+   * - `hideBorder`: disables the outer border
+   */
+  displayOptions?: EuiTokenMapDisplayOptions;
+}
+
+type Props = CommonProps & EuiTokenProps & HTMLAttributes<HTMLDivElement>;
+
+export const EuiToken: FunctionComponent<Props> = ({
   iconType,
-  displayOptions,
-  size,
+  displayOptions = {},
+  size = 's',
   className,
   ...rest
 }) => {
@@ -49,17 +78,20 @@ export const EuiToken = ({
     Object.keys(displayOptions).length === 0 &&
     displayOptions.constructor === Object;
 
-  let tokenShape;
-  let tokenColor;
-  let fill;
-  let tokenHidesBorder;
+  let tokenShape: TokenShape;
+  let tokenColor: TokenColor;
+  let fill: boolean;
+  let tokenHidesBorder: boolean;
 
   // Check if this has a mapping, and doesn't have custom displayOptions
   if (iconType in TOKEN_MAP && displayOptionsIsEmpty) {
-    tokenShape = TOKEN_MAP[iconType].shape;
-    tokenColor = TOKEN_MAP[iconType].color;
-    fill = TOKEN_MAP[iconType].fill ? true : false;
-    tokenHidesBorder = TOKEN_MAP[iconType].hideBorder ? true : false;
+    const mapping = TOKEN_MAP[iconType as EuiTokenMapType];
+    // These should be found in the standard mappings, but apply defaults
+    // just in case.
+    tokenShape = mapping.shape || 'square';
+    tokenColor = mapping.color || 'tokenTint01';
+    fill = mapping.fill ? true : false;
+    tokenHidesBorder = mapping.hideBorder ? true : false;
   } else {
     // Use the displayOptions passed or use some defaults
     tokenShape = displayOptions.shape ? displayOptions.shape : 'square';
@@ -86,32 +118,3 @@ export const EuiToken = ({
     </div>
   );
 };
-
-EuiToken.propTypes = {
-  /**
-   * An EUI icon type
-   */
-  iconType: IconPropType.isRequired,
-  /**
-   * Size of the token
-   */
-  size: PropTypes.oneOf(SIZES),
-  /**
-   * By default EUI will auto color tokens. You can can however control it
-   * - `color`: can be `tokenTint01` thru `tokenTint10`
-   * - `shape`: square, circle, rectangle as options
-   * - `fill`: makes it a solid color
-   * - `hideBorder`: disables the outer border
-   */
-  displayOptions: PropTypes.shape({
-    color: PropTypes.oneOf(COLORS),
-    shape: PropTypes.oneOf(SHAPES),
-    fill: PropTypes.boolean,
-    hideBorder: PropTypes.boolean,
-  }),
-};
-
-EuiToken.defaultProps = {
-  size: 's',
-  displayOptions: {},
-};
diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts
index e9617f0cf59..46c669cd679 100644
--- a/src/components/token/token_map.ts
+++ b/src/components/token/token_map.ts
@@ -25,7 +25,7 @@ export interface EuiTokenMapDisplayOptions {
   color?: TokenColor;
   shape?: TokenShape;
   fill?: boolean;
-  hasBorder?: boolean;
+  hideBorder?: boolean;
 }
 
 export type EuiTokenMapType =
@@ -60,7 +60,9 @@ export type EuiTokenMapType =
   | 'tokenNamespace'
   | 'tokenModule';
 
-export const TOKEN_MAP: Record<EuiTokenMapType, EuiTokenMapDisplayOptions> = {
+export const TOKEN_MAP: {
+  [mapType in EuiTokenMapType]: EuiTokenMapDisplayOptions
+} = {
   tokenClass: {
     shape: 'circle',
     color: 'tokenTint01',
diff --git a/src/components/tool_tip/index.ts b/src/components/tool_tip/index.ts
index e1e3df79ff8..aa3a3a08803 100644
--- a/src/components/tool_tip/index.ts
+++ b/src/components/tool_tip/index.ts
@@ -1,3 +1,3 @@
-export { EuiToolTip } from './tool_tip';
+export { EuiToolTip, ToolTipPositions } from './tool_tip';
 
 export { EuiIconTip } from './icon_tip';
diff --git a/src/utils/index.js b/src/utils/index.ts
similarity index 100%
rename from src/utils/index.js
rename to src/utils/index.ts
diff --git a/src/utils/prop_types/__snapshots__/with_required_prop.test.js.snap b/src/utils/prop_types/__snapshots__/with_required_prop.test.ts.snap
similarity index 100%
rename from src/utils/prop_types/__snapshots__/with_required_prop.test.js.snap
rename to src/utils/prop_types/__snapshots__/with_required_prop.test.ts.snap
diff --git a/src/utils/prop_types/index.js b/src/utils/prop_types/index.ts
similarity index 100%
rename from src/utils/prop_types/index.js
rename to src/utils/prop_types/index.ts
diff --git a/src/utils/prop_types/is.js b/src/utils/prop_types/is.ts
similarity index 69%
rename from src/utils/prop_types/is.js
rename to src/utils/prop_types/is.ts
index 8b7581d5d89..ef48b5765a3 100644
--- a/src/utils/prop_types/is.js
+++ b/src/utils/prop_types/is.ts
@@ -1,17 +1,21 @@
 import { isNil } from '../../services/predicate';
 
-export const is = expectedValue => {
-  const validator = (props, propName, componentName) => {
+export const is = <T>(expectedValue: any) => {
+  const validator = (props: T, propName: keyof T, componentName: string) => {
     const compName = componentName || 'ANONYMOUS';
     const value = props[propName];
     if (value !== expectedValue) {
-      return new Error(`[${propName}] property in [${compName}] component is expected to equal [${expectedValue}] but 
+      return new Error(`[${propName}] property in [${compName}] component is expected to equal [${expectedValue}] but
          [${value}] was provided instead.`);
     }
     return null;
   };
 
-  validator.isRequired = (props, propName, componentName) => {
+  validator.isRequired = (
+    props: T,
+    propName: keyof T,
+    componentName: string
+  ) => {
     const compName = componentName || 'ANONYMOUS';
     const value = props[propName];
     if (isNil(value)) {
diff --git a/src/utils/prop_types/with_required_prop.test.js b/src/utils/prop_types/with_required_prop.test.ts
similarity index 100%
rename from src/utils/prop_types/with_required_prop.test.js
rename to src/utils/prop_types/with_required_prop.test.ts
diff --git a/src/utils/prop_types/with_required_prop.js b/src/utils/prop_types/with_required_prop.ts
similarity index 90%
rename from src/utils/prop_types/with_required_prop.js
rename to src/utils/prop_types/with_required_prop.ts
index c4127b5f613..e6b2ef59175 100644
--- a/src/utils/prop_types/with_required_prop.js
+++ b/src/utils/prop_types/with_required_prop.ts
@@ -11,11 +11,11 @@
  * this validator warns if ExampleComponent is passed an `items` prop but not `itemId`
  */
 export const withRequiredProp = (
-  proptype,
-  requiredPropName,
-  messageDescription
+  proptype: any,
+  requiredPropName: string,
+  messageDescription?: string
 ) => {
-  const validator = (...args) => {
+  const validator = (...args: any[]) => {
     const [props, propName] = args;
 
     // run the proptype for this property