diff --git a/addons/knobs/src/KnobStore.ts b/addons/knobs/src/KnobStore.ts
index 0ba53a7bc58f..5ee42ffd8e8a 100644
--- a/addons/knobs/src/KnobStore.ts
+++ b/addons/knobs/src/KnobStore.ts
@@ -48,7 +48,7 @@ export default class KnobStore {
 
   callbacks: Callback[] = [];
 
-  timer: number;
+  timer: NodeJS.Timeout;
 
   has(key: string) {
     return this.store[key] !== undefined;
diff --git a/addons/options/tsconfig.json b/addons/options/tsconfig.json
index 266f855ff1a3..1d10f46e8b7f 100644
--- a/addons/options/tsconfig.json
+++ b/addons/options/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "types": ["webpack-env"]
   },
   "include": [
     "src/**/*"
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
index cae5deca1852..94367ee4014b 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
@@ -166,7 +166,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           onClick={[Function]}
         >
           <button
-            onClick={[Function]}
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -273,7 +272,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
                 "textDecoration": "none",
               }
             }
-            target="_blank"
           >
             Writing Stories
           </a>
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
index dd98d76c66d5..6d4d44b1d92a 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
@@ -139,7 +139,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <p>
     See these sample 
     <button
-      onClick={[Function]}
       style={
         Object {
           "backgroundColor": "transparent",
@@ -234,7 +233,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           "textDecoration": "none",
         }
       }
-      target="_blank"
     >
       Writing Stories
     </a>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
index 1fda01fe66a0..ea703ee7dac7 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
@@ -43,7 +43,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <p>
     See these sample 
     <button
-      onClick={[Function]}
       style={
         Object {
           "backgroundColor": "transparent",
@@ -138,7 +137,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           "textDecoration": "none",
         }
       }
-      target="_blank"
     >
       Writing Stories
     </a>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
index 1fda01fe66a0..ea703ee7dac7 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
@@ -43,7 +43,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <p>
     See these sample 
     <button
-      onClick={[Function]}
       style={
         Object {
           "backgroundColor": "transparent",
@@ -138,7 +137,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           "textDecoration": "none",
         }
       }
-      target="_blank"
     >
       Writing Stories
     </a>
diff --git a/addons/storyshots/storyshots-core/stories/storyshot.test.js b/addons/storyshots/storyshots-core/stories/storyshot.test.js
index ab1b16b78258..8cfdf6c7a357 100644
--- a/addons/storyshots/storyshots-core/stories/storyshot.test.js
+++ b/addons/storyshots/storyshots-core/stories/storyshot.test.js
@@ -1,6 +1,8 @@
 import path from 'path';
 import initStoryshots, { multiSnapshotWithOptions } from '../src';
 
+jest.mock('@storybook/node-logger');
+
 // with react-test-renderer
 initStoryshots({
   framework: 'react',
diff --git a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js
index 272375b3ea03..4bac493cc6f2 100644
--- a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js
+++ b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js
@@ -1,5 +1,7 @@
 import { constructUrl } from '../url';
 
+jest.mock('@storybook/node-logger');
+
 describe('Construct URL for Storyshots', () => {
   it('can use a url without path and without query params', () => {
     expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(
diff --git a/app/angular/src/server/create-fork-ts-checker-plugin.test.js b/app/angular/src/server/create-fork-ts-checker-plugin.test.js
index bb1c869b5f9f..6eaf4cd6cfc2 100644
--- a/app/angular/src/server/create-fork-ts-checker-plugin.test.js
+++ b/app/angular/src/server/create-fork-ts-checker-plugin.test.js
@@ -7,6 +7,7 @@ jest.mock('fs', () => require('../../../../__mocks__/fs'));
 jest.mock('path', () => ({
   resolve: () => 'tsconfig.json',
 }));
+jest.mock('@storybook/node-logger');
 
 const setupFiles = files => {
   // eslint-disable-next-line no-underscore-dangle, global-require
diff --git a/app/angular/src/server/ts_config.test.js b/app/angular/src/server/ts_config.test.js
index b8e42921a23d..0e9ba6d1fc7a 100644
--- a/app/angular/src/server/ts_config.test.js
+++ b/app/angular/src/server/ts_config.test.js
@@ -5,6 +5,7 @@ jest.mock('fs', () => require('../../../../__mocks__/fs'));
 jest.mock('path', () => ({
   resolve: () => 'tsconfig.json',
 }));
+jest.mock('@storybook/node-logger');
 
 const setupFiles = files => {
   // eslint-disable-next-line no-underscore-dangle, global-require
diff --git a/app/react/package.json b/app/react/package.json
index 64585f9f67d8..809f3b495a8a 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -16,7 +16,7 @@
   },
   "license": "MIT",
   "main": "dist/client/index.js",
-  "jsnext:main": "src/client/index.js",
+  "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
@@ -29,6 +29,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@storybook/addons": "5.2.0-alpha.38",
     "@storybook/core": "5.2.0-alpha.38",
     "@storybook/node-logger": "5.2.0-alpha.38",
     "@svgr/webpack": "^4.0.3",
@@ -49,9 +50,15 @@
   },
   "peerDependencies": {
     "babel-loader": "^7.0.0 || ^8.0.0",
+    "@babel/core": "^7.0.1",
     "react": "*",
     "react-dom": "*"
   },
+  "devDependencies": {
+    "@types/mini-css-extract-plugin": "^0.2.1",
+    "@types/node": "^12.0.8",
+    "@types/webpack": "^4.4.32"
+  },
   "engines": {
     "node": ">=8.0.0"
   },
diff --git a/app/react/src/client/index.js b/app/react/src/client/index.ts
similarity index 100%
rename from app/react/src/client/index.js
rename to app/react/src/client/index.ts
diff --git a/app/react/src/client/preview/element_check.test.js b/app/react/src/client/preview/element_check.test.tsx
similarity index 97%
rename from app/react/src/client/preview/element_check.test.js
rename to app/react/src/client/preview/element_check.test.tsx
index 293446612a64..862eee2a548e 100644
--- a/app/react/src/client/preview/element_check.test.js
+++ b/app/react/src/client/preview/element_check.test.tsx
@@ -60,10 +60,11 @@ describe('element_check.isReactRenderable', () => {
   const number = 1337;
   const element = <span>what's up</span>;
   const array = [string, number, element];
-  const object = { key: null };
+  const object = { key: null } as any;
 
   it('allows rendering React elements only prior to React Fiber', () => {
     // mutate version for the purpose of the test
+    // @ts-ignore
     React.version = '15.5.4';
 
     expect(isReactRenderable(string)).toBe(false);
@@ -75,6 +76,7 @@ describe('element_check.isReactRenderable', () => {
 
   it('allows rendering string, numbers, arrays and React elements with React Fiber', () => {
     // mutate version for the purpose of the test
+    // @ts-ignore
     React.version = '16.0.0-alpha.13';
 
     expect(isReactRenderable(string)).toBe(true);
diff --git a/app/react/src/client/preview/element_check.js b/app/react/src/client/preview/element_check.ts
similarity index 86%
rename from app/react/src/client/preview/element_check.js
rename to app/react/src/client/preview/element_check.ts
index 185281bb3b36..42f6b551c453 100644
--- a/app/react/src/client/preview/element_check.js
+++ b/app/react/src/client/preview/element_check.ts
@@ -2,17 +2,17 @@ import React from 'react';
 import flattenDeep from 'lodash/flattenDeep';
 
 // return true if the element is renderable with react fiber
-export const isValidFiberElement = element =>
+export const isValidFiberElement = (element: React.ReactElement) =>
   typeof element === 'string' || typeof element === 'number' || React.isValidElement(element);
 
-export const isPriorToFiber = version => {
+export const isPriorToFiber = (version: string) => {
   const [majorVersion] = version.split('.');
 
   return Number(majorVersion) < 16;
 };
 
 // accepts an element and return true if renderable else return false
-const isReactRenderable = element => {
+const isReactRenderable = (element: React.ReactElement): boolean => {
   // storybook is running with a version prior to fiber,
   // run a simple check on the element
   if (isPriorToFiber(React.version)) {
diff --git a/app/react/src/client/preview/globals.js b/app/react/src/client/preview/globals.ts
similarity index 100%
rename from app/react/src/client/preview/globals.js
rename to app/react/src/client/preview/globals.ts
diff --git a/app/react/src/client/preview/index.js b/app/react/src/client/preview/index.js
deleted file mode 100644
index 43a5688e3f7c..000000000000
--- a/app/react/src/client/preview/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { start } from '@storybook/core/client';
-
-import './globals';
-import render from './render';
-
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
-
-export const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
-  raw,
-} = clientApi;
-
-const framework = 'react';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
-
-export const { configure } = configApi;
-export { forceReRender };
diff --git a/app/react/src/client/preview/index.test.js b/app/react/src/client/preview/index.test.ts
similarity index 73%
rename from app/react/src/client/preview/index.test.js
rename to app/react/src/client/preview/index.test.ts
index cba87bb5e2d4..bd25fc3ca828 100644
--- a/app/react/src/client/preview/index.test.js
+++ b/app/react/src/client/preview/index.test.ts
@@ -4,7 +4,7 @@ describe('preview', () => {
     jest.resetModules();
   });
 
-  const isFunction = value => typeof value === 'function';
+  const isFunction = (value: unknown) => typeof value === 'function';
 
   it('should return the client api in a browser environment', () => {
     const api = require('.');
@@ -13,10 +13,14 @@ describe('preview', () => {
   });
 
   it('should return the client api in a node.js environment', () => {
-    jest.mock('global', () => ({
-      document: undefined,
-      window: undefined,
-    }));
+    jest.mock(
+      'global',
+      () =>
+        ({
+          document: undefined,
+          window: undefined,
+        } as any)
+    );
     const api = require('.');
     expect(Object.keys(api).length).toBeGreaterThan(0);
     expect(Object.values(api).every(isFunction)).toEqual(true);
diff --git a/app/react/src/client/preview/index.ts b/app/react/src/client/preview/index.ts
new file mode 100644
index 000000000000..b9279263812b
--- /dev/null
+++ b/app/react/src/client/preview/index.ts
@@ -0,0 +1,37 @@
+/* eslint-disable prefer-destructuring */
+import { start } from '@storybook/core/client';
+import { ClientStoryApi } from '@storybook/addons';
+
+import './globals';
+import render from './render';
+import { IStorybookSection, StoryFnReactReturnType } from './types';
+
+const framework = 'react';
+
+interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
+  setAddon(addon: any): void;
+  configure(loaders: () => void, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (...args: any[]) => void;
+}
+
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
+export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
+export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
+export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
+export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
+export const configure: ClientApi['configure'] = api.configApi.configure;
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;
diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.tsx
similarity index 93%
rename from app/react/src/client/preview/render.js
rename to app/react/src/client/preview/render.tsx
index 5abc55c35728..429e81ab2341 100644
--- a/app/react/src/client/preview/render.js
+++ b/app/react/src/client/preview/render.tsx
@@ -3,10 +3,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { stripIndents } from 'common-tags';
 import isReactRenderable from './element_check';
+import { RenderMainArgs } from './types';
 
 const rootEl = document ? document.getElementById('root') : null;
 
-function render(node, el) {
+function render(node: React.ReactElement, el: Element) {
   ReactDOM.render(
     process.env.STORYBOOK_EXAMPLE_APP ? <React.StrictMode>{node}</React.StrictMode> : node,
     el
@@ -20,7 +21,7 @@ export default function renderMain({
   showMain,
   showError,
   forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   if (!element) {
diff --git a/app/react/src/client/preview/types.ts b/app/react/src/client/preview/types.ts
new file mode 100644
index 000000000000..5c5cbfab3744
--- /dev/null
+++ b/app/react/src/client/preview/types.ts
@@ -0,0 +1,31 @@
+import React from 'react';
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => React.ReactElement | undefined;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+}
+
+export type StoryFnReactReturnType = React.ReactElement<unknown>;
+
+export interface ICollection {
+  [p: string]: any;
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
diff --git a/app/react/src/demo/Button.js b/app/react/src/demo/Button.tsx
similarity index 78%
rename from app/react/src/demo/Button.js
rename to app/react/src/demo/Button.tsx
index 901d0e8aa7ee..33811af2d287 100644
--- a/app/react/src/demo/Button.js
+++ b/app/react/src/demo/Button.tsx
@@ -11,7 +11,13 @@ const styles = {
   margin: 10,
 };
 
-const Button = ({ children, onClick }) => (
+const Button = ({
+  children,
+  onClick,
+}: {
+  children: React.ReactChildren;
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+}) => (
   <button onClick={onClick} style={styles} type="button">
     {children}
   </button>
diff --git a/app/react/src/demo/Welcome.js b/app/react/src/demo/Welcome.tsx
similarity index 74%
rename from app/react/src/demo/Welcome.js
rename to app/react/src/demo/Welcome.tsx
index 0c5a4cafaf5f..78c87898d66f 100644
--- a/app/react/src/demo/Welcome.js
+++ b/app/react/src/demo/Welcome.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Main = props => (
+const Main = (props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>) => (
   <article
     {...props}
     style={{
@@ -13,7 +13,13 @@ const Main = props => (
   />
 );
 
-const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
+const Title = ({
+  children,
+  ...props
+}: {
+  children: string;
+  props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+}) => <h1 {...props}>{children}</h1>;
 Title.propTypes = {
   children: PropTypes.node,
 };
@@ -21,7 +27,9 @@ Title.defaultProps = {
   children: undefined,
 };
 
-const Note = props => (
+const Note = (
+  props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
+) => (
   <p
     {...props}
     style={{
@@ -30,7 +38,9 @@ const Note = props => (
   />
 );
 
-const InlineCode = props => (
+const InlineCode = (
+  props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+) => (
   <code
     {...props}
     style={{
@@ -45,7 +55,18 @@ const InlineCode = props => (
   />
 );
 
-const Link = ({ children, href, ...props }) => (
+const Link = ({
+  children,
+  href,
+  target,
+  ...props
+}: {
+  children: string;
+  href: string;
+  target: string;
+  rel: string;
+  props?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+}) => (
   <a
     href={href}
     {...props}
@@ -68,7 +89,15 @@ Link.defaultProps = {
   children: undefined,
 };
 
-const NavButton = ({ children, ...props }) => (
+const NavButton = ({
+  children,
+  onClick,
+  ...props
+}: {
+  children: string;
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+  props?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+}) => (
   <button
     {...props}
     type="button"
@@ -97,7 +126,7 @@ NavButton.defaultProps = {
   children: undefined,
 };
 
-const Welcome = ({ showApp }) => (
+const Welcome = ({ showApp }: { showApp: () => void }) => (
   <Main>
     <Title>Welcome to storybook</Title>
     <p>This is a UI component dev environment for your app.</p>
diff --git a/app/react/src/server/__mocks__/mockConfig.js b/app/react/src/server/__mocks__/mockConfig.ts
similarity index 100%
rename from app/react/src/server/__mocks__/mockConfig.js
rename to app/react/src/server/__mocks__/mockConfig.ts
diff --git a/app/react/src/server/__mocks__/mockRules.js b/app/react/src/server/__mocks__/mockRules.ts
similarity index 100%
rename from app/react/src/server/__mocks__/mockRules.js
rename to app/react/src/server/__mocks__/mockRules.ts
diff --git a/app/react/src/server/__snapshots__/cra-config.test.js.snap b/app/react/src/server/__snapshots__/cra-config.test.ts.snap
similarity index 100%
rename from app/react/src/server/__snapshots__/cra-config.test.js.snap
rename to app/react/src/server/__snapshots__/cra-config.test.ts.snap
diff --git a/app/react/src/server/build.js b/app/react/src/server/build.ts
old mode 100755
new mode 100644
similarity index 100%
rename from app/react/src/server/build.js
rename to app/react/src/server/build.ts
diff --git a/app/react/src/server/cra-config.test.js b/app/react/src/server/cra-config.test.ts
similarity index 95%
rename from app/react/src/server/cra-config.test.js
rename to app/react/src/server/cra-config.test.ts
index f7afea9a12e8..35eb39a0db03 100644
--- a/app/react/src/server/cra-config.test.js
+++ b/app/react/src/server/cra-config.test.ts
@@ -18,7 +18,7 @@ jest.mock('mini-css-extract-plugin', () => {});
 
 const SCRIPT_PATH = '.bin/react-scripts';
 
-const stripCwd = loaderPath => loaderPath.replace(process.cwd(), '');
+const stripCwd = (loaderPath: string) => loaderPath.replace(process.cwd(), '');
 
 describe('cra-config', () => {
   describe('when used with the default react-scripts package', () => {
@@ -92,7 +92,9 @@ exit $ret`
     // Allows using TypeScript in the `.storybook` (or config) folder.
     it('should add the Storybook config directory to `include`', () => {
       const rules = getTypeScriptRules(mockRules, './.storybook');
-      expect(rules[0].include.findIndex(string => string.includes('.storybook'))).toEqual(1);
+      expect(rules[0].include.findIndex((string: string) => string.includes('.storybook'))).toEqual(
+        1
+      );
     });
 
     it('should get the baseUrl from a tsconfig.json', () => {
diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.ts
similarity index 90%
rename from app/react/src/server/cra-config.js
rename to app/react/src/server/cra-config.ts
index 15be0ff52571..330cc7f9738c 100644
--- a/app/react/src/server/cra-config.js
+++ b/app/react/src/server/cra-config.ts
@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import semver from 'semver';
+import { Configuration, Plugin, RuleSetRule } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { normalizeCondition } from 'webpack/lib/RuleSet';
 import { logger } from '@storybook/node-logger';
@@ -13,9 +14,9 @@ const cssExtensions = ['.css', '.scss', '.sass'];
 const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass'];
 const typeScriptExtensions = ['.ts', '.tsx'];
 
-let reactScriptsPath;
+let reactScriptsPath: string;
 
-export function getReactScriptsPath({ noCache } = {}) {
+export function getReactScriptsPath({ noCache }: { noCache?: boolean } = {}) {
   if (reactScriptsPath && !noCache) return reactScriptsPath;
 
   let reactScriptsScriptPath = fs.realpathSync(
@@ -69,8 +70,8 @@ export function isReactScriptsInstalled(requiredVersion = '2.0.0') {
   }
 }
 
-export const getRules = extensions => rules =>
-  rules.reduce((craRules, rule) => {
+export const getRules = (extensions: string[]) => (rules: RuleSetRule[]) =>
+  rules.reduce((craRules: any, rule: any) => {
     // If at least one extension satisfies the rule test, the rule is one
     // we want to extract
     if (rule.test && extensions.some(normalizeCondition(rule.test))) {
@@ -93,7 +94,7 @@ export const getRules = extensions => rules =>
 
 const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions));
 
-export const getTypeScriptRules = (webpackConfigRules, configDir) => {
+export const getTypeScriptRules = (webpackConfigRules: RuleSetRule[], configDir: string) => {
   const rules = getRules(typeScriptExtensions)(webpackConfigRules);
   // We know CRA only has one rule targetting TS for now, which is the first rule.
   const babelRule = rules[0];
@@ -126,7 +127,7 @@ export const getModulePath = () => {
   return false;
 };
 
-function mergePlugins(basePlugins, additionalPlugins) {
+function mergePlugins(basePlugins: Plugin[], additionalPlugins: Plugin[]) {
   return [...basePlugins, ...additionalPlugins].reduce((plugins, plugin) => {
     if (
       plugins.some(includedPlugin => includedPlugin.constructor.name === plugin.constructor.name)
@@ -137,7 +138,7 @@ function mergePlugins(basePlugins, additionalPlugins) {
   }, []);
 }
 
-export function getCraWebpackConfig(mode) {
+export function getCraWebpackConfig(mode: 'development' | 'production' | 'none') {
   const pathToReactScripts = getReactScriptsPath();
 
   const craWebpackConfig =
@@ -159,7 +160,7 @@ export function getCraWebpackConfig(mode) {
   return webpackConfig;
 }
 
-export function applyCRAWebpackConfig(baseConfig, configDir) {
+export function applyCRAWebpackConfig(baseConfig: Configuration, configDir: string): Configuration {
   // Check if the user can use TypeScript (react-scripts version 2.1+).
   const hasTsSupport = isReactScriptsInstalled('2.1.0');
 
diff --git a/app/react/src/server/framework-preset-cra.js b/app/react/src/server/framework-preset-cra.ts
similarity index 81%
rename from app/react/src/server/framework-preset-cra.js
rename to app/react/src/server/framework-preset-cra.ts
index c742566d92a9..18c075f7c874 100644
--- a/app/react/src/server/framework-preset-cra.js
+++ b/app/react/src/server/framework-preset-cra.ts
@@ -1,8 +1,9 @@
 import path from 'path';
+import { Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { applyCRAWebpackConfig, getReactScriptsPath, isReactScriptsInstalled } from './cra-config';
 
-export function webpackFinal(config, { configDir }) {
+export function webpackFinal(config: Configuration, { configDir }: { configDir: string }) {
   if (!isReactScriptsInstalled()) {
     logger.info('=> Using base config because react-scripts is not installed.');
     return config;
@@ -12,7 +13,7 @@ export function webpackFinal(config, { configDir }) {
   return applyCRAWebpackConfig(config, configDir);
 }
 
-export function managerWebpack(config) {
+export function managerWebpack(config: Configuration) {
   if (!isReactScriptsInstalled()) {
     return config;
   }
@@ -25,7 +26,7 @@ export function managerWebpack(config) {
   };
 }
 
-export function babelDefault(config) {
+export function babelDefault(config: Configuration) {
   if (!isReactScriptsInstalled()) {
     return config;
   }
diff --git a/app/react/src/server/framework-preset-react-docgen.test.js b/app/react/src/server/framework-preset-react-docgen.test.ts
similarity index 93%
rename from app/react/src/server/framework-preset-react-docgen.test.js
rename to app/react/src/server/framework-preset-react-docgen.test.ts
index 359f27689de9..1b1f0e27ca87 100644
--- a/app/react/src/server/framework-preset-react-docgen.test.js
+++ b/app/react/src/server/framework-preset-react-docgen.test.ts
@@ -1,3 +1,4 @@
+import { TransformOptions } from '@babel/core';
 import * as preset from './framework-preset-react-docgen';
 
 describe('framework-preset-react-docgen', () => {
@@ -28,10 +29,10 @@ describe('framework-preset-react-docgen', () => {
   });
 
   it('should return the config with the extra plugins when `plugins` is not an array.', () => {
-    const babelConfig = {
+    const babelConfig: TransformOptions = {
       babelrc: false,
       presets: ['env', 'foo-preset'],
-      plugins: 'bar-plugin',
+      plugins: ['bar-plugin'],
     };
 
     const config = preset.babel(babelConfig);
diff --git a/app/react/src/server/framework-preset-react-docgen.js b/app/react/src/server/framework-preset-react-docgen.ts
similarity index 84%
rename from app/react/src/server/framework-preset-react-docgen.js
rename to app/react/src/server/framework-preset-react-docgen.ts
index 5d344f6cf927..08a8fecc07f0 100644
--- a/app/react/src/server/framework-preset-react-docgen.js
+++ b/app/react/src/server/framework-preset-react-docgen.ts
@@ -1,4 +1,6 @@
-export function babel(config) {
+import { TransformOptions } from '@babel/core';
+
+export function babel(config: TransformOptions) {
   // Ensure plugins are defined or fallback to an array to avoid empty values.
   const babelConfigPlugins = config.plugins || [];
 
diff --git a/app/react/src/server/framework-preset-react.js b/app/react/src/server/framework-preset-react.ts
similarity index 77%
rename from app/react/src/server/framework-preset-react.js
rename to app/react/src/server/framework-preset-react.ts
index c0be957bc4f5..23d9151b636b 100644
--- a/app/react/src/server/framework-preset-react.js
+++ b/app/react/src/server/framework-preset-react.ts
@@ -1,4 +1,6 @@
-export function babelDefault(config) {
+import { TransformOptions } from '@babel/core';
+
+export function babelDefault(config: TransformOptions) {
   return {
     ...config,
     presets: [
diff --git a/app/react/src/server/index.js b/app/react/src/server/index.ts
old mode 100755
new mode 100644
similarity index 100%
rename from app/react/src/server/index.js
rename to app/react/src/server/index.ts
diff --git a/app/react/src/server/options.js b/app/react/src/server/options.ts
similarity index 81%
rename from app/react/src/server/options.js
rename to app/react/src/server/options.ts
index dd787ee58788..04dc76219b38 100644
--- a/app/react/src/server/options.js
+++ b/app/react/src/server/options.ts
@@ -1,4 +1,4 @@
-import packageJson from '../../package.json';
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,
diff --git a/app/react/src/typings.d.ts b/app/react/src/typings.d.ts
new file mode 100644
index 000000000000..10c6c8e3f99c
--- /dev/null
+++ b/app/react/src/typings.d.ts
@@ -0,0 +1,4 @@
+declare module '@storybook/core/*';
+declare module 'global';
+// todo check for correct types
+declare module 'webpack/lib/RuleSet';
diff --git a/app/react/tsconfig.json b/app/react/tsconfig.json
new file mode 100644
index 000000000000..29fcd6ad6a26
--- /dev/null
+++ b/app/react/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"],
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.test.*"
+  ]
+}
diff --git a/jest.config.js b/jest.config.js
index 64bded141437..139bc97ae3b9 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -68,6 +68,7 @@ module.exports = {
     '/generators/',
     '/dll/',
     '/__mocks__ /',
+    '/__testfixtures__/',
   ],
   globals: {
     DOCS_MODE: false,
diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts
index 5e4843cbaf17..06f3ef859171 100644
--- a/lib/addons/src/index.ts
+++ b/lib/addons/src/index.ts
@@ -3,8 +3,8 @@ import global from 'global';
 import { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
 import { API } from '@storybook/api';
-import logger from '@storybook/client-logger';
-import { types, Types, isSupportedType } from './types';
+import { logger } from '@storybook/client-logger';
+import { types, Types } from './types';
 
 export interface RenderOptions {
   active: boolean;
@@ -29,8 +29,6 @@ export interface Addon {
 
 export type Loader = (api: API) => void;
 
-export { types, Types, isSupportedType };
-
 interface Loaders {
   [key: string]: Loader;
 }
diff --git a/lib/addons/src/make-decorator.test.ts b/lib/addons/src/make-decorator.test.ts
index 0fef08cc9108..6501f5832267 100644
--- a/lib/addons/src/make-decorator.test.ts
+++ b/lib/addons/src/make-decorator.test.ts
@@ -1,5 +1,6 @@
 import deprecate from 'util-deprecate';
-import { makeDecorator, StoryContext, StoryGetter } from './make-decorator';
+import { StoryContext, StoryGetter } from './types';
+import { makeDecorator } from './make-decorator';
 
 // Copy & paste from internal api: client-api/src/client_api
 type DecoratorFn = (fn: StoryGetter, context: StoryContext) => any;
diff --git a/lib/addons/src/make-decorator.ts b/lib/addons/src/make-decorator.ts
index a826201ec4e4..912f69ab387f 100644
--- a/lib/addons/src/make-decorator.ts
+++ b/lib/addons/src/make-decorator.ts
@@ -1,45 +1,5 @@
 import deprecate from 'util-deprecate';
-
-export interface Parameters {
-  fileName?: string;
-  options?: OptionsParameter;
-  [key: string]: any;
-}
-
-export interface StoryContext {
-  id: string;
-  name: string;
-  kind: string;
-  [key: string]: any;
-  parameters: Parameters;
-}
-
-export interface WrapperSettings {
-  options: OptionsParameter;
-  parameters: {
-    [key: string]: any;
-  };
-}
-
-export interface OptionsParameter extends Object {
-  storySort?: any;
-  hierarchyRootSeparator?: string;
-  hierarchySeparator?: RegExp;
-  theme?: {
-    base: string;
-    brandTitle?: string;
-  };
-  [key: string]: any;
-}
-
-export type StoryGetter = (context: StoryContext) => any;
-export type StoryFn = (p?: StoryContext) => any;
-
-export type StoryWrapper = (
-  getStory: StoryGetter,
-  context: StoryContext,
-  settings: WrapperSettings
-) => any;
+import { StoryWrapper, StoryGetter, StoryContext } from './types';
 
 type MakeDecoratorResult = (...args: any) => any;
 
diff --git a/lib/addons/src/public_api.ts b/lib/addons/src/public_api.ts
index a45518dec6cb..8a3b7347b610 100644
--- a/lib/addons/src/public_api.ts
+++ b/lib/addons/src/public_api.ts
@@ -7,5 +7,6 @@ import { addons } from './index';
 
 export * from './make-decorator';
 export * from './index';
+export * from './types';
 export * from './storybook-channel-mock';
 export default addons;
diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts
index 06ac6e0dfc7a..78126fa42330 100644
--- a/lib/addons/src/types.ts
+++ b/lib/addons/src/types.ts
@@ -1,3 +1,5 @@
+import { Addon } from './index';
+
 export enum types {
   TAB = 'tab',
   PANEL = 'panel',
@@ -11,3 +13,83 @@ export type Types = types | string;
 export function isSupportedType(type: Types): boolean {
   return !!Object.values(types).find(typeVal => typeVal === type);
 }
+
+export interface Parameters {
+  fileName?: string;
+  options?: OptionsParameter;
+  [key: string]: any;
+}
+
+export interface StoryContext {
+  id: string;
+  name: string;
+  kind: string;
+  [key: string]: any;
+  parameters: Parameters;
+}
+
+export interface WrapperSettings {
+  options: OptionsParameter;
+  parameters: {
+    [key: string]: any;
+  };
+}
+
+export interface OptionsParameter extends Object {
+  storySort?: any;
+  hierarchyRootSeparator?: string;
+  hierarchySeparator?: RegExp;
+  theme?: {
+    base: string;
+    brandTitle?: string;
+  };
+  [key: string]: any;
+}
+
+export type StoryGetter = (context: StoryContext) => any;
+export type StoryFn<ReturnType = unknown> = (p?: StoryContext) => ReturnType;
+
+export type StoryWrapper = (
+  getStory: StoryGetter,
+  context: StoryContext,
+  settings: WrapperSettings
+) => any;
+
+export type MakeDecoratorResult = (...args: any) => any;
+
+export interface AddStoryArgs<ReturnType = unknown> {
+  id: string;
+  kind: string;
+  name: string;
+  storyFn: StoryFn<ReturnType>;
+  parameters: Parameters;
+}
+
+export interface ClientApiAddon<TApi = unknown> extends Addon {
+  apply: (a: StoryApi<TApi>, b: any[]) => any;
+}
+export interface ClientApiAddons<TApi> {
+  [key: string]: ClientApiAddon<TApi>;
+}
+
+export type ClientApiReturnFn<TApi> = (...args: any[]) => StoryApi<TApi>;
+
+export interface StoryApi<StoryFnReturnType> {
+  kind: string;
+  add: (
+    storyName: string,
+    storyFn: StoryFn<StoryFnReturnType>,
+    parameters?: Parameters
+  ) => StoryApi<StoryFnReturnType>;
+  addDecorator: (decorator: DecoratorFunction) => StoryApi<StoryFnReturnType>;
+  addParameters: (parameters: Parameters) => StoryApi<StoryFnReturnType>;
+  [k: string]: string | ClientApiReturnFn<StoryFnReturnType>;
+}
+
+export type DecoratorFunction = (fn: StoryFn, c: StoryContext) => ReturnType<StoryFn>;
+
+export interface ClientStoryApi<TApi> {
+  storiesOf(kind: string, module: NodeModule): StoryApi<TApi>;
+  addDecorator(decorator: DecoratorFunction): StoryApi<TApi>;
+  addParameters(parameter: Parameters): StoryApi<TApi>;
+}
diff --git a/lib/client-api/src/client_api.test.ts b/lib/client-api/src/client_api.test.ts
index 18828725d0f4..95c9e2c58585 100644
--- a/lib/client-api/src/client_api.test.ts
+++ b/lib/client-api/src/client_api.test.ts
@@ -104,7 +104,6 @@ describe('preview.client_api', () => {
 
       clientApi.setAddon({
         aa() {
-          console.log(this);
           data = this.kind;
         },
       });
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index c3f1ddb2c05f..1f7cbecb0468 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -21,6 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/node-logger": "5.2.0-alpha.38",
     "core-js": "^3.0.1",
     "jscodeshift": "^0.6.3",
     "lodash": "^4.17.11",
diff --git a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
index 774a46824fee..8fddcc1c26aa 100644
--- a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
+++ b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
@@ -1,5 +1,7 @@
 import { defineTest } from 'jscodeshift/dist/testUtils';
 
+jest.mock('@storybook/node-logger');
+
 const testNames = [
   'basic',
   'decorators',
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
index 7ba932f71278..fc330b033df0 100644
--- a/lib/codemod/src/transforms/convert-to-module-format.js
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -1,5 +1,6 @@
 import prettier from 'prettier';
 import camelCase from 'lodash/camelCase';
+import { logger } from '@storybook/node-logger';
 
 /**
  * Convert a legacy story file to module format
@@ -153,8 +154,7 @@ export default function transformer(file, api, options) {
   // If there's already a default export
   if (defaultExports.size() > 0) {
     if (initialStoriesOf.size() > 0) {
-      // eslint-disable-next-line no-console
-      console.log(
+      logger.warn(
         `Found ${initialStoriesOf.size()} 'storiesOf' calls but existing default export, SKIPPING: '${
           file.path
         }'`
@@ -187,8 +187,7 @@ export default function transformer(file, api, options) {
 
   const source = root.toSource({ trailingComma: true, quote: 'single', tabWidth: 2 });
   if (initialStoriesOf.size() > 1) {
-    // eslint-disable-next-line no-console
-    console.log(
+    logger.warn(
       `Found ${initialStoriesOf.size()} 'storiesOf' calls, PLEASE FIX BY HAND: '${file.path}'`
     );
     return source;
diff --git a/scripts/prepare.js b/scripts/prepare.js
index c82c1eccf68e..d28363aa58ce 100644
--- a/scripts/prepare.js
+++ b/scripts/prepare.js
@@ -24,10 +24,8 @@ const ignore = [
   '__snapshots__',
   '__tests__',
   '/tests/',
-  // '/stories/',
   /.+\.test\..+/,
-  // /\/.+\.story\..+/,
-  // /\/.+\.stories\..+/,
+
 ];
 
 function cleanup() {
diff --git a/scripts/test.js b/scripts/test.js
index 5870525aa6af..fd29e7ac5cf7 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -174,7 +174,10 @@ selection
           ? ''
           : `--projects ${jestProjects.join(' ')}`;
 
-        spawn(`node --max_old_space_size=4096 ${jest} ${projectsParam} ${extraParams}`);
+        const cmd = `node --max_old_space_size=4096 ${jest} ${projectsParam} ${extraParams}`;
+
+        console.log(cmd);
+        spawn(cmd);
       }
 
       nonJestProjects.forEach(key =>
diff --git a/yarn.lock b/yarn.lock
index 7767eb88b37a..98fdb0dd709d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4118,6 +4118,13 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.135.tgz#d2607c35dd68f70c2b35ba020c667493dedd8447"
   integrity sha512-Ed+tSZ9qM1oYpi5kzdsBuOzcAIn1wDW+e8TFJ50IMJMlSopGdJgKAbhHzN6h1E1OfjlGOr2JepzEWtg9NIfoNg==
 
+"@types/mini-css-extract-plugin@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.2.1.tgz#f833abd67e8d6e40efb08a0455be252db063d475"
+  integrity sha512-KJOp7SZusMEGpiE5VprIUBcXtr3okLeVsJOykLGpcnrc7ivoWg9+5vGAANSIPrwn06HqXMruCYqzEZl3/uvwwg==
+  dependencies:
+    "@types/webpack" "*"
+
 "@types/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -4133,6 +4140,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.12.tgz#cc791b402360db1eaf7176479072f91ee6c6c7ca"
   integrity sha512-Uy0PN4R5vgBUXFoJrKryf5aTk3kJ8Rv3PdlHjl6UaX+Cqp1QE0yPQ68MPXGrZOfG7gZVNDIJZYyot0B9ubXUrQ==
 
+"@types/node@^12.0.8":
+  version "12.6.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.1.tgz#d5544f6de0aae03eefbb63d5120f6c8be0691946"
+  integrity sha512-rp7La3m845mSESCgsJePNL/JQyhkOJA6G4vcwvVgkDAwHhGdq5GCumxmPjEk1MZf+8p5ZQAUE7tqgQRQTXN7uQ==
+
 "@types/node@^6.0.0":
   version "6.14.6"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.14.6.tgz#31df045b4c7618ff74d84f542fc3d29445dd566b"
@@ -4372,7 +4384,7 @@
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/webpack@^4.4.25":
+"@types/webpack@*", "@types/webpack@^4.4.25", "@types/webpack@^4.4.32":
   version "4.4.34"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.4.34.tgz#e5f88b9a795da11683b4ec4a07d1c2b023b19810"
   integrity sha512-GnEBgjHsfO1M7DIQ0dAupSofcmDItE3Zsu3reK8SQpl/6N0rtUQxUmQzVFAS5ou/FGjsYKjXAWfItLZ0kNFTfQ==