docs(example): add typescript example

README.md

@@ -617,6 +617,7 @@ Instead of returning an object, you should directly mutate the received stores.
 - [TodoMVC](https://risingstack.github.io/react-easy-state/examples/todo-mvc/build) ([source](/examples/todo-mvc/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/todo-mvc)): a classic TodoMVC implementation with a lot of computed data and implicit reactivity.
 - [Contacts Table](https://risingstack.github.io/react-easy-state/examples/contacts/build) ([source](/examples/contacts/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/contacts)): a data grid implementation with a mix of global and local state.
 - [Beer Finder](https://risingstack.github.io/react-easy-state/examples/beer-finder/build) ([source](/examples/beer-finder/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/beer-finder)) ([tutorial](https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c)): an app with async actions and a mix of local and global state, which finds matching beers for your meal.
+- [Using it with TypeScript](https://risingstack.github.io/react-easy-state/examples/typescript-usage/build) ([source](/examples/typescript-usage/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/typescript-usage)) showcasing how to use react-easy-state with typescript
 
 ## Articles
 

__tests__/UsingTypeScript.test.tsx

@@ -0,0 +1,53 @@
+import React, { StrictMode, ChangeEvent, forwardRef } from 'react';
+import { view as v, store as s } from 'react-easy-state';
+import { render, cleanup } from '@testing-library/react/pure';
+
+const store = s({
+  name: 'Peter',
+  setNameEvent(ev: ChangeEvent<HTMLInputElement>) {
+    if (ev.target) {
+      this.name = ev.target.value;
+    }
+  },
+});
+
+// properly retain these props for the views
+type AppProps = {
+  greeting: string;
+};
+
+const App = v(
+  forwardRef<HTMLLabelElement, AppProps>(
+    ({ greeting, children }, ref) => (
+      <div>
+        <h1>
+          {greeting} {store.name}!
+        </h1>
+        <label ref={ref} htmlFor="name">
+          Name:
+        </label>
+        <input
+          id="name"
+          value={store.name}
+          onChange={store.setNameEvent.bind(store)}
+        />
+        {children}
+      </div>
+    ),
+  ),
+);
+
+describe('Using TypeScript App', () => {
+  afterAll(() => {
+    cleanup();
+  });
+
+  test('should render without warnings', () => {
+    const { container } = render(
+      <StrictMode>
+        <App greeting="Hello" />
+      </StrictMode>,
+    );
+    expect(container).toHaveTextContent('Hello');
+  });
+});

examples/using-typescript/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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*

examples/using-typescript/README.md

@@ -0,0 +1,3 @@
+# TypeScript usage example · [Live Demo](https://RisingStack.github.io/react-easy-state/examples/typescript-usage/build)
+
+An example that shows how to use react-easy-state with TypeScript. Simple input field which uses a global store to persist its state. Showcases how stores and views both retain their shape of objects and parameters when wrapped with react-easy-state.