Switch example to TypeScript

README.md

@@ -27,7 +27,6 @@ Before you can use the hook, you must put your Redux store into `Context`:
 ```tsx
 // Store.js
 
-import React from 'react';
 import {createStore} from 'redux';
 import reducer from './reducer';
 
@@ -131,7 +130,6 @@ project specific wrappers for `useMappedState` and `useDispatch`:
 ```tsx
 // Store.js
 
-import React from 'react';
 import {
   useDispatch as useDispatchGeneric,
   useMappedState as useMappedStateGeneric,

example/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

example/package.json

@@ -5,17 +5,21 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "prop-types": "^15.6.2",
     "react": "^16.7.0-alpha.0",
     "react-dom": "^16.7.0-alpha.0",
-    "react-scripts": "^1.1.4",
+    "react-scripts-ts": "3.1.0",
     "redux": "^4.0.1",
     "redux-react-hook": "link:.."
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "start": "react-scripts-ts start",
+    "build": "react-scripts-ts build",
+    "test": "react-scripts-ts test --env=jsdom",
+    "eject": "react-scripts-ts eject"
+  },
+  "devDependencies": {
+    "@types/react": "^16.3.13",
+    "@types/react-dom": "^16.0.5",
+    "typescript": "^3.1.3"
   }
 }

example/src/App.react.js → example/src/App.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import TodoInput from './TodoInput.react';
-import TodoList from './TodoList.react';
+import * as React from 'react';
+import TodoInput from './TodoInput';
+import TodoList from './TodoList';
 
 export default function App() {
   return (

example/src/Store.js → example/src/Store.ts

@@ -1,10 +1,25 @@
-import React from 'react';
-import reducer from './reducer';
-import {createStore} from 'redux';
+import * as React from 'react';
+import {Action, createStore} from 'redux';
 import {
   useDispatch as useDispatchGeneric,
   useMappedState as useMappedStateGeneric,
 } from 'redux-react-hook';
+import reducer from './reducer';
+
+export interface IState {
+  lastUpdated: number;
+  todos: string[];
+}
+
+export type Action =
+  | {
+      type: 'add todo';
+      todo: string;
+    }
+  | {
+      type: 'delete todo';
+      index: number;
+    };
 
 export function makeStore() {
   return createStore(reducer, {
@@ -13,9 +28,9 @@ export function makeStore() {
   });
 }
 
-export const Context = React.createContext(null);
+export const Context = React.createContext(makeStore());
 
-export function useMappedState(mapState) {
+export function useMappedState<T>(mapState: (state: IState) => T): T {
   // Wrap the generic useMappedState so that you don't have to pass in the store Context all over
   // If you want to pass only a subset of state, this is also the place to do it. For example,
   // if your store schema has an undo stack, and you only want to pass the current state.

example/src/TodoInput.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useDispatch} from './Store';
+
+export default function TodoInput() {
+  const [newTodo, setNewTodo] = React.useState('');
+  const dispatch = useDispatch();
+
+  return (
+    <input
+      type="text"
+      onChange={e => setNewTodo(e.target.value)}
+      onKeyDown={e => {
+        if (e.key === 'Enter') {
+          dispatch({type: 'add todo', todo: newTodo});
+          setNewTodo('');
+        }
+      }}
+      value={newTodo}
+    />
+  );
+}

example/src/TodoItem.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {IState, useDispatch, useMappedState} from './Store';
+
+export default function TodoItem({index}: {index: number}) {
+  const mapState = React.useCallback((state: IState) => state.todos[index], [
+    index,
+  ]);
+  const todo = useMappedState(mapState);
+
+  const dispatch = useDispatch();
+  const deleteTodo = React.useCallback(
+    () => dispatch({type: 'delete todo', index}),
+    [index],
+  );
+
+  return (
+    <li>
+      <button onClick={deleteTodo}>x</button> {todo}
+    </li>
+  );
+}

example/src/TodoList.react.js → example/src/TodoList.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import {useMappedState} from './Store';
-import TodoItem from './TodoItem.react';
+import * as React from 'react';
+import {IState, useMappedState} from './Store';
+import TodoItem from './TodoItem';
 
-const mapState = state => ({
+const mapState = (state: IState) => ({
   lastUpdated: state.lastUpdated,
   todoCount: state.todos.length,
 });
@@ -13,7 +13,7 @@ export default function TodoList() {
     <div>
       <div>Count: {todoCount}</div>
       <ul>
-        {new Array(todoCount).fill().map((_, index) => (
+        {new Array(todoCount).fill(null).map((_, index) => (
           <TodoItem index={index} key={index} />
         ))}
       </ul>

example/src/index.js → example/src/index.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
-import './index.css';
-import App from './App.react';
+import App from './App';
 import {Context, makeStore} from './Store';
 
 const store = makeStore();

example/src/reducer.js → example/src/reducer.ts

@@ -1,4 +1,6 @@
-export default function reducer(state, action) {
+import {Action, IState} from './Store';
+
+export default function reducer(state: IState, action: Action) {
   switch (action.type) {
     case 'add todo': {
       return {

example/src/typings.d.ts

@@ -0,0 +1,15 @@
+// Add hooks to the react typings
+declare module 'react' {
+  export function useCallback<T>(callback: T, dependencies: Array<any>): T;
+  export function useContext<T>(context: React.Context<T>): T;
+  export function useEffect(
+    didUpdate: () => (() => void) | void,
+    dependencies?: Array<any>,
+  ): void;
+  export function useRef<T>(initialValue?: T): {current: T};
+  export function useState<T>(
+    initialState: T | (() => T),
+  ): [T, (newState: T | (() => T)) => void];
+}
+
+export {};

example/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  },
+  "exclude": [
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "node_modules"
+  ]
+}

example/tsconfig.prod.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}

example/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}

example/tslint.json

@@ -0,0 +1,13 @@
+{
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "linterOptions": {
+    "exclude": [
+      "config/**/*.js",
+      "node_modules/**/*.ts",
+      "coverage/lcov-report/*.js"
+    ]
+  },
+  "rules": {
+    "jsx-no-lambda": false
+  }
+}