docs: Document usage with Typescript (#988)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

docs/documentation/api/Client.md

@@ -248,6 +248,8 @@ const App = Client({
 
   // Your React component representing the game board.
   // The props that this component receives are listed below.
+  // When using Typescript, type the component's properties as
+  // extending BoardProps.
   board: Board,
 
   // Optional: React component to display while the client

docs/documentation/api/Game.md

@@ -1,5 +1,7 @@
 # Game
 
+When using Typescript, type your Game as `Game<MyGameState>`.
+
 ```js
 {
   // The name of the game.
@@ -126,7 +128,7 @@
 
   // Disable undo feature for all the moves in the game
   disableUndo: true,
-    
+
   // Transfer delta state with JSON Patch in multiplayer
   deltaState: true,
 }

docs/documentation/sidebar.md

@@ -17,6 +17,7 @@
   - [Testing](testing.md)
   - [Deployment](deployment.md)
   - [Chat](chat.md)
+  - [Typescript](typescript.md)
 - **Reference**
   - [Game](api/Game.md)
   - [Client](api/Client.md)
@@ -30,4 +31,4 @@
   <a href="https://opencollective.com/boardgameio/donate" target="_blank">
     <img src="https://opencollective.com/boardgameio/donate/button@2x.png?color=blue" width="270" />
   </a>
-</p>
+</p>

docs/documentation/typescript.md

@@ -0,0 +1,51 @@
+# Typescript
+
+boardgame.io includes type definitions for Typescript.
+
+Basic boardgame.io game:
+
+```typescript
+// Game.tsx
+import { Game } from 'boardgame.io';
+
+export interface MyGameState {
+  // aka 'G', your game's state
+}
+
+export const MyGame: Game<MyGameState> = {
+  // ...
+}
+```
+
+## React
+
+React components must include boardgame.io-specific properties, so extend your props from `BoardProps`:
+
+```typescript
+// Board.tsx
+import { BoardProps } from 'boardgame.io/react';
+
+interface MyGameProps extends BoardProps {
+  // Custom properties for your component
+}
+
+export class MyGameBoard extends React.Component<MyGameProps> {
+  // Your game board
+}
+```
+
+Read more about [Client](api/Client.md) in the reference. No special typing should be required.
+
+```typescript
+// App.tsx
+import { Client } from 'boardgame.io/react';
+
+import { MyGame } from './Game';
+import { MyGameBoard } from './Board';
+
+const App = Client({
+  game: MyGame,
+  board: MyGameBoard,
+});
+export default App;
+```