diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index 42db1fd06079..13e3a21b7ff2 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -25,11 +25,14 @@
     "register.js"
   ],
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/client-api": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2"
   },
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.js b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
similarity index 72%
rename from addons/ondevice-backgrounds/src/BackgroundPanel.js
rename to addons/ondevice-backgrounds/src/BackgroundPanel.tsx
index 379f8947028a..8d36e6491f94 100644
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.js
+++ b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
@@ -1,9 +1,14 @@
-/* eslint-disable react/prop-types, react/destructuring-assignment, import/no-extraneous-dependencies */
+/* eslint-disable react/destructuring-assignment, import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import Events from '@storybook/core-events';
+import { AddonStore } from '@storybook/addons';
+import { API } from '@storybook/api';
+import { StoryStore } from '@storybook/client-api';
+
 import Swatch from './Swatch';
 import BackgroundEvents, { PARAM_KEY } from './constants';
+import { Background } from './index';
 
 const codeSample = `
 import { storiesOf } from '@storybook/react-native';
@@ -36,7 +41,19 @@ const Instructions = () => (
   </View>
 );
 
-export default class BackgroundPanel extends Component {
+export type Channel = ReturnType<AddonStore['getChannel']>;
+type Selection = ReturnType<StoryStore['fromId']>;
+interface BackgroundPanelProps {
+  channel: Channel;
+  api: API;
+  active: boolean;
+}
+
+interface BackgroundPanelState {
+  selection: Selection;
+}
+
+export default class BackgroundPanel extends Component<BackgroundPanelProps, BackgroundPanelState> {
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -45,11 +62,11 @@ export default class BackgroundPanel extends Component {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
-  setBackgroundFromSwatch = background => {
+  setBackgroundFromSwatch = (background: string) => {
     this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
   };
 
-  onStorySelected = selection => {
+  onStorySelected = (selection: Selection) => {
     this.setState({ selection });
   };
 
@@ -63,7 +80,7 @@ export default class BackgroundPanel extends Component {
     const story = api
       .store()
       .getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
-    const backgrounds = story.parameters[PARAM_KEY];
+    const backgrounds: Background[] = story.parameters[PARAM_KEY];
 
     return (
       <View>
diff --git a/addons/ondevice-backgrounds/src/Swatch.js b/addons/ondevice-backgrounds/src/Swatch.tsx
similarity index 75%
rename from addons/ondevice-backgrounds/src/Swatch.js
rename to addons/ondevice-backgrounds/src/Swatch.tsx
index 6511ce77053e..cd55fe629b18 100644
--- a/addons/ondevice-backgrounds/src/Swatch.js
+++ b/addons/ondevice-backgrounds/src/Swatch.tsx
@@ -1,8 +1,14 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View, Text } from 'react-native';
 
-const Swatch = ({ name, value, setBackground }) => (
+interface SwatchProps {
+  name: string;
+  value: string;
+  setBackground: (background: string) => void;
+}
+
+const Swatch: FunctionComponent<SwatchProps> = ({ name, value, setBackground }) => (
   <TouchableOpacity
     style={{
       borderRadius: 4,
@@ -21,6 +27,7 @@ const Swatch = ({ name, value, setBackground }) => (
     </View>
   </TouchableOpacity>
 );
+
 Swatch.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
diff --git a/addons/ondevice-backgrounds/src/constants.js b/addons/ondevice-backgrounds/src/constants.ts
similarity index 100%
rename from addons/ondevice-backgrounds/src/constants.js
rename to addons/ondevice-backgrounds/src/constants.ts
diff --git a/addons/ondevice-backgrounds/src/container.js b/addons/ondevice-backgrounds/src/container.tsx
similarity index 61%
rename from addons/ondevice-backgrounds/src/container.js
rename to addons/ondevice-backgrounds/src/container.tsx
index 523e4ae4a31e..6bea7b30fc0c 100644
--- a/addons/ondevice-backgrounds/src/container.js
+++ b/addons/ondevice-backgrounds/src/container.tsx
@@ -1,10 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
-import PropTypes from 'prop-types';
 import Constants from './constants';
+import { Channel } from './BackgroundPanel';
 
-export default class Container extends React.Component {
-  constructor(props) {
+interface ContainerProps {
+  initialBackground: string;
+  channel: Channel;
+}
+
+interface ContainerState {
+  background: string;
+}
+
+export default class Container extends React.Component<ContainerProps, ContainerState> {
+  constructor(props: ContainerProps) {
     super(props);
     this.state = { background: props.initialBackground || '' };
   }
@@ -19,7 +28,7 @@ export default class Container extends React.Component {
     channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
   }
 
-  onBackgroundChange = background => {
+  onBackgroundChange = (background: string) => {
     this.setState({ background });
   };
 
@@ -32,18 +41,3 @@ export default class Container extends React.Component {
     );
   }
 }
-
-Container.propTypes = {
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }),
-  initialBackground: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-Container.defaultProps = {
-  channel: undefined,
-  initialBackground: '',
-};
diff --git a/addons/ondevice-backgrounds/src/index.js b/addons/ondevice-backgrounds/src/index.tsx
similarity index 83%
rename from addons/ondevice-backgrounds/src/index.js
rename to addons/ondevice-backgrounds/src/index.tsx
index 84056bfc9c47..f24ae28826a0 100644
--- a/addons/ondevice-backgrounds/src/index.js
+++ b/addons/ondevice-backgrounds/src/index.tsx
@@ -5,6 +5,12 @@ import addons, { makeDecorator } from '@storybook/addons';
 import Events from './constants';
 import Container from './container';
 
+export interface Background {
+  name: string;
+  value: string;
+  default?: boolean;
+}
+
 export const withBackgrounds = makeDecorator({
   name: 'withBackgrounds',
   parameterName: 'backgrounds',
@@ -12,7 +18,7 @@ export const withBackgrounds = makeDecorator({
   allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const data = parameters || options || [];
-    const backgrounds = Array.isArray(data) ? data : Object.values(data);
+    const backgrounds: Background[] = Array.isArray(data) ? data : Object.values(data);
 
     let background = 'transparent';
     if (backgrounds.length !== 0) {
diff --git a/addons/ondevice-backgrounds/src/register.js b/addons/ondevice-backgrounds/src/register.tsx
similarity index 89%
rename from addons/ondevice-backgrounds/src/register.js
rename to addons/ondevice-backgrounds/src/register.tsx
index 2714689abb25..f07741c2ffe5 100644
--- a/addons/ondevice-backgrounds/src/register.js
+++ b/addons/ondevice-backgrounds/src/register.tsx
@@ -8,7 +8,6 @@ addons.register(ADDON_ID, api => {
   const channel = addons.getChannel();
   addons.addPanel(PANEL_ID, {
     title: 'Backgrounds',
-    // eslint-disable-next-line react/prop-types
     render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
     paramKey: PARAM_KEY,
   });
diff --git a/addons/ondevice-backgrounds/tsconfig.json b/addons/ondevice-backgrounds/tsconfig.json
new file mode 100644
index 000000000000..8876bb6737a1
--- /dev/null
+++ b/addons/ondevice-backgrounds/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}