From 37191e46e600cd9ac2839f0687efb347fc4ef7c1 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Thu, 27 Aug 2020 22:01:17 -0400
Subject: [PATCH] feat(redux-devtools): convert todomvc example to TypeScript
 (#618)

---
 package.json                                  |  3 +
 .../react-json-tree/examples/tsconfig.json    |  3 -
 .../examples/counter/tsconfig.json            |  3 -
 .../redux-devtools/examples/todomvc/.babelrc  |  7 +-
 .../examples/todomvc/.eslintrc.js             | 21 +++++
 .../examples/todomvc/actions/TodoActions.js   | 42 ----------
 .../examples/todomvc/actions/TodoActions.ts   | 82 +++++++++++++++++++
 .../components/{Footer.js => Footer.tsx}      | 23 ++++--
 .../components/{Header.js => Header.tsx}      | 12 ++-
 .../{MainSection.js => MainSection.tsx}       | 50 +++++++----
 .../components/{TodoItem.js => TodoItem.tsx}  | 34 +++++---
 .../{TodoTextInput.js => TodoTextInput.tsx}   | 50 +++++++----
 .../{ActionTypes.js => ActionTypes.ts}        |  0
 .../{TodoFilters.js => TodoFilters.ts}        |  5 ++
 .../containers/{DevTools.js => DevTools.tsx}  |  0
 .../containers/{Root.dev.js => Root.dev.tsx}  |  9 +-
 .../examples/todomvc/containers/Root.js       |  5 --
 .../{Root.prod.js => Root.prod.tsx}           |  9 +-
 .../examples/todomvc/containers/Root.ts       | 15 ++++
 .../containers/{TodoApp.js => TodoApp.tsx}    | 20 ++++-
 .../examples/todomvc/{index.js => index.tsx}  |  1 +
 .../examples/todomvc/package.json             | 49 ++++++-----
 .../todomvc/reducers/{index.js => index.ts}   |  6 +-
 .../todomvc/reducers/{todos.js => todos.ts}   | 13 ++-
 .../todomvc/store/configureStore.dev.js       | 21 -----
 .../todomvc/store/configureStore.dev.ts       | 29 +++++++
 .../examples/todomvc/store/configureStore.js  |  5 --
 .../todomvc/store/configureStore.prod.js      |  6 --
 .../todomvc/store/configureStore.prod.ts      |  8 ++
 .../examples/todomvc/store/configureStore.ts  | 13 +++
 .../examples/todomvc/tsconfig.json            |  4 +
 .../examples/todomvc/tsconfig.webpack.json    |  4 +
 .../{webpack.config.js => webpack.config.ts}  | 13 +--
 yarn.lock                                     | 15 ----
 34 files changed, 382 insertions(+), 198 deletions(-)
 create mode 100644 packages/redux-devtools/examples/todomvc/.eslintrc.js
 delete mode 100644 packages/redux-devtools/examples/todomvc/actions/TodoActions.js
 create mode 100644 packages/redux-devtools/examples/todomvc/actions/TodoActions.ts
 rename packages/redux-devtools/examples/todomvc/components/{Footer.js => Footer.tsx} (74%)
 rename packages/redux-devtools/examples/todomvc/components/{Header.js => Header.tsx} (72%)
 rename packages/redux-devtools/examples/todomvc/components/{MainSection.js => MainSection.tsx} (65%)
 rename packages/redux-devtools/examples/todomvc/components/{TodoItem.js => TodoItem.tsx} (70%)
 rename packages/redux-devtools/examples/todomvc/components/{TodoTextInput.js => TodoTextInput.tsx} (52%)
 rename packages/redux-devtools/examples/todomvc/constants/{ActionTypes.js => ActionTypes.ts} (100%)
 rename packages/redux-devtools/examples/todomvc/constants/{TodoFilters.js => TodoFilters.ts} (56%)
 rename packages/redux-devtools/examples/todomvc/containers/{DevTools.js => DevTools.tsx} (100%)
 rename packages/redux-devtools/examples/todomvc/containers/{Root.dev.js => Root.dev.tsx} (65%)
 delete mode 100644 packages/redux-devtools/examples/todomvc/containers/Root.js
 rename packages/redux-devtools/examples/todomvc/containers/{Root.prod.js => Root.prod.tsx} (59%)
 create mode 100644 packages/redux-devtools/examples/todomvc/containers/Root.ts
 rename packages/redux-devtools/examples/todomvc/containers/{TodoApp.js => TodoApp.tsx} (55%)
 rename packages/redux-devtools/examples/todomvc/{index.js => index.tsx} (90%)
 rename packages/redux-devtools/examples/todomvc/reducers/{index.js => index.ts} (58%)
 rename packages/redux-devtools/examples/todomvc/reducers/{todos.js => todos.ts} (78%)
 delete mode 100644 packages/redux-devtools/examples/todomvc/store/configureStore.dev.js
 create mode 100644 packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts
 delete mode 100644 packages/redux-devtools/examples/todomvc/store/configureStore.js
 delete mode 100644 packages/redux-devtools/examples/todomvc/store/configureStore.prod.js
 create mode 100644 packages/redux-devtools/examples/todomvc/store/configureStore.prod.ts
 create mode 100644 packages/redux-devtools/examples/todomvc/store/configureStore.ts
 create mode 100644 packages/redux-devtools/examples/todomvc/tsconfig.json
 create mode 100644 packages/redux-devtools/examples/todomvc/tsconfig.webpack.json
 rename packages/redux-devtools/examples/todomvc/{webpack.config.js => webpack.config.ts} (84%)

diff --git a/package.json b/package.json
index 4378d3b7..026a3bf7 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@typescript-eslint/eslint-plugin": "^3.9.0",
     "@typescript-eslint/parser": "^3.9.0",
     "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.1",
@@ -22,7 +23,9 @@
     "jest": "^26.2.2",
     "lerna": "^3.22.1",
     "prettier": "^2.0.5",
+    "raw-loader": "^4.0.1",
     "rimraf": "^3.0.2",
+    "style-loader": "^1.2.1",
     "ts-jest": "^26.2.0",
     "ts-node": "^9.0.0",
     "typescript": "^3.9.7",
diff --git a/packages/react-json-tree/examples/tsconfig.json b/packages/react-json-tree/examples/tsconfig.json
index 47fb1215..5463ab30 100644
--- a/packages/react-json-tree/examples/tsconfig.json
+++ b/packages/react-json-tree/examples/tsconfig.json
@@ -1,7 +1,4 @@
 {
   "extends": "../../../tsconfig.react.base.json",
-  "compilerOptions": {
-    "outDir": "lib"
-  },
   "include": ["src"]
 }
diff --git a/packages/redux-devtools/examples/counter/tsconfig.json b/packages/redux-devtools/examples/counter/tsconfig.json
index c640259b..45c3bc56 100644
--- a/packages/redux-devtools/examples/counter/tsconfig.json
+++ b/packages/redux-devtools/examples/counter/tsconfig.json
@@ -1,7 +1,4 @@
 {
   "extends": "../../../../tsconfig.react.base.json",
-  "compilerOptions": {
-    "outDir": "lib"
-  },
   "include": ["src"]
 }
diff --git a/packages/redux-devtools/examples/todomvc/.babelrc b/packages/redux-devtools/examples/todomvc/.babelrc
index 3c204230..a01c7adc 100644
--- a/packages/redux-devtools/examples/todomvc/.babelrc
+++ b/packages/redux-devtools/examples/todomvc/.babelrc
@@ -1,8 +1,11 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-function-bind",
     "react-hot-loader/babel"
   ]
 }
diff --git a/packages/redux-devtools/examples/todomvc/.eslintrc.js b/packages/redux-devtools/examples/todomvc/.eslintrc.js
new file mode 100644
index 00000000..70e1445e
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  extends: '../../../../.eslintrc',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: '../../../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+    {
+      files: ['webpack.config.ts'],
+      extends: '../../../../eslintrc.ts.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.webpack.json'],
+      },
+    },
+  ],
+};
diff --git a/packages/redux-devtools/examples/todomvc/actions/TodoActions.js b/packages/redux-devtools/examples/todomvc/actions/TodoActions.js
deleted file mode 100644
index f0122846..00000000
--- a/packages/redux-devtools/examples/todomvc/actions/TodoActions.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as types from '../constants/ActionTypes';
-
-export function addTodo(text) {
-  return {
-    type: types.ADD_TODO,
-    text,
-  };
-}
-
-export function deleteTodo(id) {
-  return {
-    type: types.DELETE_TODO,
-    id,
-  };
-}
-
-export function editTodo(id, text) {
-  return {
-    type: types.EDIT_TODO,
-    id,
-    text,
-  };
-}
-
-export function markTodo(id) {
-  return {
-    type: types.MARK_TODO,
-    id,
-  };
-}
-
-export function markAll() {
-  return {
-    type: types.MARK_ALL,
-  };
-}
-
-export function clearMarked() {
-  return {
-    type: types.CLEAR_MARKED,
-  };
-}
diff --git a/packages/redux-devtools/examples/todomvc/actions/TodoActions.ts b/packages/redux-devtools/examples/todomvc/actions/TodoActions.ts
new file mode 100644
index 00000000..4169e9c1
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/actions/TodoActions.ts
@@ -0,0 +1,82 @@
+import * as types from '../constants/ActionTypes';
+
+interface AddTodoAction {
+  type: typeof types.ADD_TODO;
+  text: string;
+}
+export function addTodo(text: string): AddTodoAction {
+  return {
+    type: types.ADD_TODO,
+    text,
+  };
+}
+
+interface DeleteTodoAction {
+  type: typeof types.DELETE_TODO;
+  id: number;
+}
+export function deleteTodo(id: number): DeleteTodoAction {
+  return {
+    type: types.DELETE_TODO,
+    id,
+  };
+}
+
+interface EditTodoAction {
+  type: typeof types.EDIT_TODO;
+  id: number;
+  text: string;
+}
+export function editTodo(id: number, text: string): EditTodoAction {
+  return {
+    type: types.EDIT_TODO,
+    id,
+    text,
+  };
+}
+
+interface MarkTodoAction {
+  type: typeof types.MARK_TODO;
+  id: number;
+}
+export function markTodo(id: number): MarkTodoAction {
+  return {
+    type: types.MARK_TODO,
+    id,
+  };
+}
+
+interface MarkAllAction {
+  type: typeof types.MARK_ALL;
+}
+export function markAll(): MarkAllAction {
+  return {
+    type: types.MARK_ALL,
+  };
+}
+
+interface ClearMarkedAction {
+  type: typeof types.CLEAR_MARKED;
+}
+export function clearMarked(): ClearMarkedAction {
+  return {
+    type: types.CLEAR_MARKED,
+  };
+}
+
+export type TodoAction =
+  | AddTodoAction
+  | DeleteTodoAction
+  | EditTodoAction
+  | MarkTodoAction
+  | MarkAllAction
+  | ClearMarkedAction;
+
+export interface TodoActions {
+  addTodo(text: string): AddTodoAction;
+  deleteTodo(id: number): DeleteTodoAction;
+  editTodo(id: number, text: string): EditTodoAction;
+  markTodo(id: number): MarkTodoAction;
+  markAll(): MarkAllAction;
+  clearMarked(): ClearMarkedAction;
+}
diff --git a/packages/redux-devtools/examples/todomvc/components/Footer.js b/packages/redux-devtools/examples/todomvc/components/Footer.tsx
similarity index 74%
rename from packages/redux-devtools/examples/todomvc/components/Footer.js
rename to packages/redux-devtools/examples/todomvc/components/Footer.tsx
index e8914c4d..3c708eeb 100644
--- a/packages/redux-devtools/examples/todomvc/components/Footer.js
+++ b/packages/redux-devtools/examples/todomvc/components/Footer.tsx
@@ -1,7 +1,12 @@
-import React, { Component } from 'react';
+import React, { Component, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
+import {
+  SHOW_ALL,
+  SHOW_MARKED,
+  SHOW_UNMARKED,
+  TodoFilter,
+} from '../constants/TodoFilters';
 
 const FILTER_TITLES = {
   [SHOW_ALL]: 'All',
@@ -9,7 +14,15 @@ const FILTER_TITLES = {
   [SHOW_MARKED]: 'Completed',
 };
 
-export default class Footer extends Component {
+interface Props {
+  markedCount: number;
+  unmarkedCount: number;
+  filter: TodoFilter;
+  onClearMarked: MouseEventHandler<HTMLButtonElement>;
+  onShow: (filter: TodoFilter) => void;
+}
+
+export default class Footer extends Component<Props> {
   static propTypes = {
     markedCount: PropTypes.number.isRequired,
     unmarkedCount: PropTypes.number.isRequired,
@@ -23,7 +36,7 @@ export default class Footer extends Component {
       <footer className="footer">
         {this.renderTodoCount()}
         <ul className="filters">
-          {[SHOW_ALL, SHOW_UNMARKED, SHOW_MARKED].map((filter) => (
+          {([SHOW_ALL, SHOW_UNMARKED, SHOW_MARKED] as const).map((filter) => (
             <li key={filter}>{this.renderFilterLink(filter)}</li>
           ))}
         </ul>
@@ -43,7 +56,7 @@ export default class Footer extends Component {
     );
   }
 
-  renderFilterLink(filter) {
+  renderFilterLink(filter: TodoFilter) {
     const title = FILTER_TITLES[filter];
     const { filter: selectedFilter, onShow } = this.props;
 
diff --git a/packages/redux-devtools/examples/todomvc/components/Header.js b/packages/redux-devtools/examples/todomvc/components/Header.tsx
similarity index 72%
rename from packages/redux-devtools/examples/todomvc/components/Header.js
rename to packages/redux-devtools/examples/todomvc/components/Header.tsx
index 73e75b05..041a8721 100644
--- a/packages/redux-devtools/examples/todomvc/components/Header.js
+++ b/packages/redux-devtools/examples/todomvc/components/Header.tsx
@@ -2,16 +2,20 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import TodoTextInput from './TodoTextInput';
 
-export default class Header extends Component {
+interface Props {
+  addTodo: (text: string) => void;
+}
+
+export default class Header extends Component<Props> {
   static propTypes = {
     addTodo: PropTypes.func.isRequired,
   };
 
-  handleSave(text) {
+  handleSave = (text: string) => {
     if (text.length !== 0) {
       this.props.addTodo(text);
     }
-  }
+  };
 
   render() {
     return (
@@ -19,7 +23,7 @@ export default class Header extends Component {
         <h1>todos</h1>
         <TodoTextInput
           newTodo={true}
-          onSave={::this.handleSave}
+          onSave={this.handleSave}
           placeholder="What needs to be done?"
         />
       </header>
diff --git a/packages/redux-devtools/examples/todomvc/components/MainSection.js b/packages/redux-devtools/examples/todomvc/components/MainSection.tsx
similarity index 65%
rename from packages/redux-devtools/examples/todomvc/components/MainSection.js
rename to packages/redux-devtools/examples/todomvc/components/MainSection.tsx
index ded9a5a5..bb07e810 100644
--- a/packages/redux-devtools/examples/todomvc/components/MainSection.js
+++ b/packages/redux-devtools/examples/todomvc/components/MainSection.tsx
@@ -1,16 +1,32 @@
-import React, { Component } from 'react';
+import React, { Component, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import TodoItem from './TodoItem';
 import Footer from './Footer';
-import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
+import {
+  SHOW_ALL,
+  SHOW_MARKED,
+  SHOW_UNMARKED,
+  TodoFilter,
+} from '../constants/TodoFilters';
+import { Todo } from '../reducers/todos';
+import { TodoActions } from '../actions/TodoActions';
 
 const TODO_FILTERS = {
   [SHOW_ALL]: () => true,
-  [SHOW_UNMARKED]: (todo) => !todo.marked,
-  [SHOW_MARKED]: (todo) => todo.marked,
+  [SHOW_UNMARKED]: (todo: Todo) => !todo.marked,
+  [SHOW_MARKED]: (todo: Todo) => todo.marked,
 };
 
-export default class MainSection extends Component {
+interface State {
+  filter: TodoFilter;
+}
+
+interface Props {
+  todos: Todo[];
+  actions: TodoActions;
+}
+
+export default class MainSection extends Component<Props, State> {
   static propTypes = {
     todos: PropTypes.array.isRequired,
     actions: PropTypes.object.isRequired,
@@ -18,22 +34,19 @@ export default class MainSection extends Component {
   // Keep a counter that can be used to create an html `id` attribute.
   static mountCount = 0;
 
-  constructor(props, context) {
-    super(props, context);
-    this.state = { filter: SHOW_ALL };
-    this.htmlFormInputId = `toggle-all-${MainSection.mountCount++}`;
-  }
+  state: State = { filter: SHOW_ALL };
+  htmlFormInputId = `toggle-all-${MainSection.mountCount++}`;
 
-  handleClearMarked() {
+  handleClearMarked: MouseEventHandler<HTMLButtonElement> = () => {
     const atLeastOneMarked = this.props.todos.some((todo) => todo.marked);
     if (atLeastOneMarked) {
       this.props.actions.clearMarked();
     }
-  }
+  };
 
-  handleShow(filter) {
+  handleShow = (filter: TodoFilter) => {
     this.setState({ filter });
-  }
+  };
 
   render() {
     const { todos, actions } = this.props;
@@ -58,7 +71,7 @@ export default class MainSection extends Component {
     );
   }
 
-  renderToggleAll(markedCount) {
+  renderToggleAll(markedCount: number) {
     const { todos, actions } = this.props;
 
     if (todos.length > 0) {
@@ -69,6 +82,7 @@ export default class MainSection extends Component {
             className="toggle-all"
             type="checkbox"
             checked={markedCount === todos.length}
+            // eslint-disable-next-line @typescript-eslint/unbound-method
             onChange={actions.markAll}
           />
           <label htmlFor={this.htmlFormInputId}>Mark all as complete</label>
@@ -77,7 +91,7 @@ export default class MainSection extends Component {
     }
   }
 
-  renderFooter(markedCount) {
+  renderFooter(markedCount: number) {
     const { todos } = this.props;
     const { filter } = this.state;
     const unmarkedCount = todos.length - markedCount;
@@ -88,8 +102,8 @@ export default class MainSection extends Component {
           markedCount={markedCount}
           unmarkedCount={unmarkedCount}
           filter={filter}
-          onClearMarked={::this.handleClearMarked}
-          onShow={::this.handleShow}
+          onClearMarked={this.handleClearMarked}
+          onShow={this.handleShow}
         />
       );
     }
diff --git a/packages/redux-devtools/examples/todomvc/components/TodoItem.js b/packages/redux-devtools/examples/todomvc/components/TodoItem.tsx
similarity index 70%
rename from packages/redux-devtools/examples/todomvc/components/TodoItem.js
rename to packages/redux-devtools/examples/todomvc/components/TodoItem.tsx
index a16f2511..c9635c94 100644
--- a/packages/redux-devtools/examples/todomvc/components/TodoItem.js
+++ b/packages/redux-devtools/examples/todomvc/components/TodoItem.tsx
@@ -2,8 +2,23 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import TodoTextInput from './TodoTextInput';
+import { Todo } from '../reducers/todos';
 
-export default class TodoItem extends Component {
+interface State {
+  editing: boolean;
+}
+
+interface Props {
+  todo: Todo;
+  addTodo: (text: string) => void;
+  deleteTodo: (id: number) => void;
+  editTodo: (id: number, text: string) => void;
+  markTodo: (id: number) => void;
+  markAll: () => void;
+  clearMarked: () => void;
+}
+
+export default class TodoItem extends Component<Props, State> {
   static propTypes = {
     todo: PropTypes.object.isRequired,
     editTodo: PropTypes.func.isRequired,
@@ -11,18 +26,15 @@ export default class TodoItem extends Component {
     markTodo: PropTypes.func.isRequired,
   };
 
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      editing: false,
-    };
-  }
+  state: State = {
+    editing: false,
+  };
 
-  handleDoubleClick() {
+  handleDoubleClick = () => {
     this.setState({ editing: true });
-  }
+  };
 
-  handleSave(id, text) {
+  handleSave(id: number, text: string) {
     if (text.length === 0) {
       this.props.deleteTodo(id);
     } else {
@@ -52,7 +64,7 @@ export default class TodoItem extends Component {
             checked={todo.marked}
             onChange={() => markTodo(todo.id)}
           />
-          <label onDoubleClick={::this.handleDoubleClick}>{todo.text}</label>
+          <label onDoubleClick={this.handleDoubleClick}>{todo.text}</label>
           <button className="destroy" onClick={() => deleteTodo(todo.id)} />
         </div>
       );
diff --git a/packages/redux-devtools/examples/todomvc/components/TodoTextInput.js b/packages/redux-devtools/examples/todomvc/components/TodoTextInput.tsx
similarity index 52%
rename from packages/redux-devtools/examples/todomvc/components/TodoTextInput.js
rename to packages/redux-devtools/examples/todomvc/components/TodoTextInput.tsx
index d812bbf0..111051d6 100644
--- a/packages/redux-devtools/examples/todomvc/components/TodoTextInput.js
+++ b/packages/redux-devtools/examples/todomvc/components/TodoTextInput.tsx
@@ -1,8 +1,25 @@
-import React, { Component } from 'react';
+import React, {
+  ChangeEventHandler,
+  Component,
+  FocusEventHandler,
+  KeyboardEventHandler,
+} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-export default class TodoTextInput extends Component {
+interface State {
+  text: string;
+}
+
+interface Props {
+  onSave: (text: string) => void;
+  text?: string;
+  placeholder?: string;
+  editing?: boolean;
+  newTodo?: boolean;
+}
+
+export default class TodoTextInput extends Component<Props, State> {
   static propTypes = {
     onSave: PropTypes.func.isRequired,
     text: PropTypes.string,
@@ -11,32 +28,29 @@ export default class TodoTextInput extends Component {
     newTodo: PropTypes.bool,
   };
 
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      text: this.props.text || '',
-    };
-  }
+  state = {
+    text: this.props.text || '',
+  };
 
-  handleSubmit(e) {
-    const text = e.target.value.trim();
+  handleSubmit: KeyboardEventHandler<HTMLInputElement> = (e) => {
+    const text = e.currentTarget.value.trim();
     if (e.which === 13) {
       this.props.onSave(text);
       if (this.props.newTodo) {
         this.setState({ text: '' });
       }
     }
-  }
+  };
 
-  handleChange(e) {
+  handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     this.setState({ text: e.target.value });
-  }
+  };
 
-  handleBlur(e) {
+  handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
     if (!this.props.newTodo) {
       this.props.onSave(e.target.value);
     }
-  }
+  };
 
   render() {
     return (
@@ -49,9 +63,9 @@ export default class TodoTextInput extends Component {
         placeholder={this.props.placeholder}
         autoFocus={true}
         value={this.state.text}
-        onBlur={::this.handleBlur}
-        onChange={::this.handleChange}
-        onKeyDown={::this.handleSubmit}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        onKeyDown={this.handleSubmit}
       />
     );
   }
diff --git a/packages/redux-devtools/examples/todomvc/constants/ActionTypes.js b/packages/redux-devtools/examples/todomvc/constants/ActionTypes.ts
similarity index 100%
rename from packages/redux-devtools/examples/todomvc/constants/ActionTypes.js
rename to packages/redux-devtools/examples/todomvc/constants/ActionTypes.ts
diff --git a/packages/redux-devtools/examples/todomvc/constants/TodoFilters.js b/packages/redux-devtools/examples/todomvc/constants/TodoFilters.ts
similarity index 56%
rename from packages/redux-devtools/examples/todomvc/constants/TodoFilters.js
rename to packages/redux-devtools/examples/todomvc/constants/TodoFilters.ts
index 99d05d40..f814c76b 100644
--- a/packages/redux-devtools/examples/todomvc/constants/TodoFilters.js
+++ b/packages/redux-devtools/examples/todomvc/constants/TodoFilters.ts
@@ -1,3 +1,8 @@
 export const SHOW_ALL = 'show_all';
 export const SHOW_MARKED = 'show_marked';
 export const SHOW_UNMARKED = 'show_unmarked';
+
+export type TodoFilter =
+  | typeof SHOW_ALL
+  | typeof SHOW_MARKED
+  | typeof SHOW_UNMARKED;
diff --git a/packages/redux-devtools/examples/todomvc/containers/DevTools.js b/packages/redux-devtools/examples/todomvc/containers/DevTools.tsx
similarity index 100%
rename from packages/redux-devtools/examples/todomvc/containers/DevTools.js
rename to packages/redux-devtools/examples/todomvc/containers/DevTools.tsx
diff --git a/packages/redux-devtools/examples/todomvc/containers/Root.dev.js b/packages/redux-devtools/examples/todomvc/containers/Root.dev.tsx
similarity index 65%
rename from packages/redux-devtools/examples/todomvc/containers/Root.dev.js
rename to packages/redux-devtools/examples/todomvc/containers/Root.dev.tsx
index f2a3db3d..810a579e 100644
--- a/packages/redux-devtools/examples/todomvc/containers/Root.dev.js
+++ b/packages/redux-devtools/examples/todomvc/containers/Root.dev.tsx
@@ -3,8 +3,15 @@ import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import TodoApp from './TodoApp';
 import DevTools from './DevTools';
+import { Store } from 'redux';
+import { TodoState } from '../reducers';
+import { TodoAction } from '../actions/TodoActions';
 
-class Root extends Component {
+interface Props {
+  store: Store<TodoState, TodoAction>;
+}
+
+class Root extends Component<Props> {
   render() {
     const { store } = this.props;
     return (
diff --git a/packages/redux-devtools/examples/todomvc/containers/Root.js b/packages/redux-devtools/examples/todomvc/containers/Root.js
deleted file mode 100644
index 9cea0b22..00000000
--- a/packages/redux-devtools/examples/todomvc/containers/Root.js
+++ /dev/null
@@ -1,5 +0,0 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./Root.prod');
-} else {
-  module.exports = require('./Root.dev');
-}
diff --git a/packages/redux-devtools/examples/todomvc/containers/Root.prod.js b/packages/redux-devtools/examples/todomvc/containers/Root.prod.tsx
similarity index 59%
rename from packages/redux-devtools/examples/todomvc/containers/Root.prod.js
rename to packages/redux-devtools/examples/todomvc/containers/Root.prod.tsx
index f89e612d..1a80e74c 100644
--- a/packages/redux-devtools/examples/todomvc/containers/Root.prod.js
+++ b/packages/redux-devtools/examples/todomvc/containers/Root.prod.tsx
@@ -2,8 +2,15 @@ import { hot } from 'react-hot-loader/root';
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import TodoApp from './TodoApp';
+import { Store } from 'redux';
+import { TodoState } from '../reducers';
+import { TodoAction } from '../actions/TodoActions';
 
-class Root extends Component {
+interface Props {
+  store: Store<TodoState, TodoAction>;
+}
+
+class Root extends Component<Props> {
   render() {
     const { store } = this.props;
     return (
diff --git a/packages/redux-devtools/examples/todomvc/containers/Root.ts b/packages/redux-devtools/examples/todomvc/containers/Root.ts
new file mode 100644
index 00000000..31872b0a
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/containers/Root.ts
@@ -0,0 +1,15 @@
+import { Store } from 'redux';
+import { TodoState } from '../reducers';
+import { TodoAction } from '../actions/TodoActions';
+import { ComponentType } from 'react';
+
+interface Props {
+  store: Store<TodoState, TodoAction>;
+}
+const Root: ComponentType<Props> =
+  process.env.NODE_ENV === 'production'
+    ? // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('./Root.prod').default
+    : // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('./Root.dev').default;
+export default Root;
diff --git a/packages/redux-devtools/examples/todomvc/containers/TodoApp.js b/packages/redux-devtools/examples/todomvc/containers/TodoApp.tsx
similarity index 55%
rename from packages/redux-devtools/examples/todomvc/containers/TodoApp.js
rename to packages/redux-devtools/examples/todomvc/containers/TodoApp.tsx
index 63a4c274..c225553c 100644
--- a/packages/redux-devtools/examples/todomvc/containers/TodoApp.js
+++ b/packages/redux-devtools/examples/todomvc/containers/TodoApp.tsx
@@ -1,16 +1,28 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 import Header from '../components/Header';
 import MainSection from '../components/MainSection';
 import * as TodoActions from '../actions/TodoActions';
+import {
+  TodoAction,
+  TodoActions as TodoActionsType,
+} from '../actions/TodoActions';
+import { TodoState } from '../reducers';
+import { Todo } from '../reducers/todos';
 
-class TodoApp extends Component {
+interface Props {
+  todos: Todo[];
+  actions: TodoActionsType;
+}
+
+class TodoApp extends Component<Props> {
   render() {
     const { todos, actions } = this.props;
 
     return (
       <div>
+        {/* eslint-disable-next-line @typescript-eslint/unbound-method */}
         <Header addTodo={actions.addTodo} />
         <MainSection todos={todos} actions={actions} />
       </div>
@@ -18,13 +30,13 @@ class TodoApp extends Component {
   }
 }
 
-function mapState(state) {
+function mapState(state: TodoState) {
   return {
     todos: state.todos,
   };
 }
 
-function mapDispatch(dispatch) {
+function mapDispatch(dispatch: Dispatch<TodoAction>) {
   return {
     actions: bindActionCreators(TodoActions, dispatch),
   };
diff --git a/packages/redux-devtools/examples/todomvc/index.js b/packages/redux-devtools/examples/todomvc/index.tsx
similarity index 90%
rename from packages/redux-devtools/examples/todomvc/index.js
rename to packages/redux-devtools/examples/todomvc/index.tsx
index fc36f569..d1687945 100644
--- a/packages/redux-devtools/examples/todomvc/index.js
+++ b/packages/redux-devtools/examples/todomvc/index.tsx
@@ -16,6 +16,7 @@ render(
 
 if (module.hot) {
   module.hot.accept('./containers/Root', () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const RootContainer = require('./containers/Root').default;
     render(
       <AppContainer>
diff --git a/packages/redux-devtools/examples/todomvc/package.json b/packages/redux-devtools/examples/todomvc/package.json
index 998336df..902151b0 100644
--- a/packages/redux-devtools/examples/todomvc/package.json
+++ b/packages/redux-devtools/examples/todomvc/package.json
@@ -2,15 +2,6 @@
   "name": "todomvc",
   "version": "0.0.1",
   "description": "TodoMVC example for redux",
-  "private": true,
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server --open"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/reduxjs/redux-devtools.git"
-  },
   "keywords": [
     "react",
     "reactjs",
@@ -23,11 +14,22 @@
     "flux",
     "todomvc"
   ],
-  "license": "MIT",
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools/examples/todomvc",
   "bugs": {
     "url": "https://github.com/reduxjs/redux-devtools/issues"
   },
-  "homepage": "https://github.com/reduxjs/redux-devtools#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reduxjs/redux-devtools.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --open",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch"
+  },
   "dependencies": {
     "classnames": "^2.2.6",
     "prop-types": "^15.7.2",
@@ -36,21 +38,18 @@
     "react-hot-loader": "^4.12.21",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
-    "todomvc-app-css": "^2.3.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-function-bind": "^7.10.5",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "babel-loader": "^8.1.0",
-    "raw-loader": "^4.0.1",
     "redux-devtools": "^3.6.1",
     "redux-devtools-dock-monitor": "^1.1.4",
     "redux-devtools-log-monitor": "^2.0.1",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.44.1",
-    "webpack-dev-server": "^3.11.0"
-  }
+    "todomvc-app-css": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.10",
+    "@types/prop-types": "^15.7.3",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/webpack-env": "^1.15.2"
+  },
+  "private": true
 }
diff --git a/packages/redux-devtools/examples/todomvc/reducers/index.js b/packages/redux-devtools/examples/todomvc/reducers/index.ts
similarity index 58%
rename from packages/redux-devtools/examples/todomvc/reducers/index.js
rename to packages/redux-devtools/examples/todomvc/reducers/index.ts
index e59c909e..d7b67c58 100644
--- a/packages/redux-devtools/examples/todomvc/reducers/index.js
+++ b/packages/redux-devtools/examples/todomvc/reducers/index.ts
@@ -1,5 +1,9 @@
 import { combineReducers } from 'redux';
-import todos from './todos';
+import todos, { Todo } from './todos';
+
+export interface TodoState {
+  todos: Todo[];
+}
 
 const rootReducer = combineReducers({
   todos,
diff --git a/packages/redux-devtools/examples/todomvc/reducers/todos.js b/packages/redux-devtools/examples/todomvc/reducers/todos.ts
similarity index 78%
rename from packages/redux-devtools/examples/todomvc/reducers/todos.js
rename to packages/redux-devtools/examples/todomvc/reducers/todos.ts
index 522f81dd..4dcf300a 100644
--- a/packages/redux-devtools/examples/todomvc/reducers/todos.js
+++ b/packages/redux-devtools/examples/todomvc/reducers/todos.ts
@@ -6,8 +6,15 @@ import {
   MARK_ALL,
   CLEAR_MARKED,
 } from '../constants/ActionTypes';
+import { TodoAction } from '../actions/TodoActions';
 
-const initialState = [
+export interface Todo {
+  text: string;
+  marked: boolean;
+  id: number;
+}
+
+const initialState: Todo[] = [
   {
     text: 'Use Redux',
     marked: false,
@@ -15,7 +22,7 @@ const initialState = [
   },
 ];
 
-export default function todos(state = initialState, action) {
+export default function todos(state = initialState, action: TodoAction) {
   switch (action.type) {
     case ADD_TODO:
       return [
@@ -49,7 +56,7 @@ export default function todos(state = initialState, action) {
     }
 
     case CLEAR_MARKED:
-      return state.filter((todo) => todo.marked === false);
+      return state.filter((todo) => !todo.marked);
 
     default:
       return state;
diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.dev.js b/packages/redux-devtools/examples/todomvc/store/configureStore.dev.js
deleted file mode 100644
index f713d23e..00000000
--- a/packages/redux-devtools/examples/todomvc/store/configureStore.dev.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createStore, compose } from 'redux';
-import { persistState } from 'redux-devtools';
-import rootReducer from '../reducers';
-import DevTools from '../containers/DevTools';
-
-const enhancer = compose(
-  DevTools.instrument(),
-  persistState(window.location.href.match(/[?&]debug_session=([^&#]+)\b/))
-);
-
-export default function configureStore(initialState) {
-  const store = createStore(rootReducer, initialState, enhancer);
-
-  if (module.hot) {
-    module.hot.accept('../reducers', () =>
-      store.replaceReducer(require('../reducers').default)
-    );
-  }
-
-  return store;
-}
diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts b/packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts
new file mode 100644
index 00000000..e314d624
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts
@@ -0,0 +1,29 @@
+import { createStore, compose, PreloadedState } from 'redux';
+import { persistState } from 'redux-devtools';
+import rootReducer, { TodoState } from '../reducers';
+import DevTools from '../containers/DevTools';
+
+function getDebugSessionKey() {
+  const matches = /[?&]debug_session=([^&#]+)\b/.exec(window.location.href);
+  return matches && matches.length > 0 ? matches[1] : null;
+}
+
+const enhancer = compose(
+  DevTools.instrument(),
+  persistState(getDebugSessionKey())
+);
+
+export default function configureStore(
+  initialState?: PreloadedState<TodoState>
+) {
+  const store = createStore(rootReducer, initialState, enhancer);
+
+  if (module.hot) {
+    module.hot.accept('../reducers', () =>
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      store.replaceReducer(require('../reducers').default)
+    );
+  }
+
+  return store;
+}
diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.js b/packages/redux-devtools/examples/todomvc/store/configureStore.js
deleted file mode 100644
index 78c9ea1f..00000000
--- a/packages/redux-devtools/examples/todomvc/store/configureStore.js
+++ /dev/null
@@ -1,5 +0,0 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./configureStore.prod');
-} else {
-  module.exports = require('./configureStore.dev');
-}
diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.prod.js b/packages/redux-devtools/examples/todomvc/store/configureStore.prod.js
deleted file mode 100644
index 2872f85a..00000000
--- a/packages/redux-devtools/examples/todomvc/store/configureStore.prod.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createStore } from 'redux';
-import rootReducer from '../reducers';
-
-export default function configureStore(initialState) {
-  return createStore(rootReducer, initialState);
-}
diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.prod.ts b/packages/redux-devtools/examples/todomvc/store/configureStore.prod.ts
new file mode 100644
index 00000000..36871017
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/store/configureStore.prod.ts
@@ -0,0 +1,8 @@
+import { createStore, PreloadedState } from 'redux';
+import rootReducer, { TodoState } from '../reducers';
+
+export default function configureStore(
+  initialState?: PreloadedState<TodoState>
+) {
+  return createStore(rootReducer, initialState);
+}
diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.ts b/packages/redux-devtools/examples/todomvc/store/configureStore.ts
new file mode 100644
index 00000000..10b218a1
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/store/configureStore.ts
@@ -0,0 +1,13 @@
+import { PreloadedState, Store } from 'redux';
+import { TodoState } from '../reducers';
+import { TodoAction } from '../actions/TodoActions';
+
+const configureStore: (
+  initialState?: PreloadedState<TodoState>
+) => Store<TodoState, TodoAction> =
+  process.env.NODE_ENV === 'production'
+    ? // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('./configureStore.prod').default
+    : // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('./configureStore.dev').default;
+export default configureStore;
diff --git a/packages/redux-devtools/examples/todomvc/tsconfig.json b/packages/redux-devtools/examples/todomvc/tsconfig.json
new file mode 100644
index 00000000..0e4169ca
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../tsconfig.react.base.json",
+  "include": ["."]
+}
diff --git a/packages/redux-devtools/examples/todomvc/tsconfig.webpack.json b/packages/redux-devtools/examples/todomvc/tsconfig.webpack.json
new file mode 100644
index 00000000..1d04dfd1
--- /dev/null
+++ b/packages/redux-devtools/examples/todomvc/tsconfig.webpack.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "include": ["webpack.config.ts"]
+}
diff --git a/packages/redux-devtools/examples/todomvc/webpack.config.js b/packages/redux-devtools/examples/todomvc/webpack.config.ts
similarity index 84%
rename from packages/redux-devtools/examples/todomvc/webpack.config.js
rename to packages/redux-devtools/examples/todomvc/webpack.config.ts
index 402c5ac1..efb1bfb5 100644
--- a/packages/redux-devtools/examples/todomvc/webpack.config.js
+++ b/packages/redux-devtools/examples/todomvc/webpack.config.ts
@@ -1,9 +1,8 @@
-var path = require('path');
-var webpack = require('webpack');
+import * as path from 'path';
+import * as webpack from 'webpack';
 
 module.exports = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-  devtool: 'eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     'webpack/hot/only-dev-server',
@@ -14,11 +13,10 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: '/static/',
   },
-  plugins: [new webpack.HotModuleReplacementPlugin()],
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|ts)x?$/,
         loaders: ['babel-loader'],
         exclude: /node_modules/,
         include: __dirname,
@@ -37,9 +35,14 @@ module.exports = {
       },
     ],
   },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()],
   devServer: {
     historyApiFallback: true,
     hot: true,
     port: 3000,
   },
+  devtool: 'eval-source-map',
 };
diff --git a/yarn.lock b/yarn.lock
index 46d50aa9..4084ba87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -403,14 +403,6 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-function-bind@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-function-bind/-/plugin-proposal-function-bind-7.10.5.tgz#62acbdde1c43e7dfae6efc9ddd5bc60920cee719"
-  integrity sha512-1lYbE2ynV9yN0LCEYCdEBD5pR6GaNkRfjn1z1tWDdWMJgunTFcJBZDJUgiMPcTMqAc3D6Vrm8v2khxjjx6FrCg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-function-bind" "^7.10.4"
-
 "@babel/plugin-proposal-json-strings@^7.0.0", "@babel/plugin-proposal-json-strings@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
@@ -563,13 +555,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-function-bind@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-function-bind/-/plugin-syntax-function-bind-7.10.4.tgz#8378d94f3185ddd3008310c15fe0991cb0c85151"
-  integrity sha512-vF/K9yS0dpPNlT7mXSGhbdpb2f4DaLa/AYYbUqlxOggAug/oseIR1+LgAzwci4iJNlqWNmJ7aQ+llUMYjn9uhw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"