docs: Improve TypeScript docs

Add syntax highlighting and tweak docs on TypeScript usage
boardgameio · Aug 23, 2021 · 8bfc360 · 8bfc360
1 parent 6dbd9b6
commit 8bfc360
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/docs/documentation/api/Client.md b/docs/documentation/api/Client.md
@@ -248,7 +248,7 @@ 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
+  // When using TypeScript, type the component's properties as
   // extending BoardProps.
   board: Board,
 

diff --git a/docs/documentation/api/Game.md b/docs/documentation/api/Game.md
@@ -1,6 +1,6 @@
 # Game
 
-When using Typescript, type your Game as `Game<MyGameState>`.
+?> Using TypeScript? Check out [the TypeScript docs](typescript.md) on how to type your game object.
 
 ```js
 {

diff --git a/docs/documentation/index.html b/docs/documentation/index.html
@@ -92,6 +92,9 @@
 <script src="//unpkg.com/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
 <script src="//unpkg.com/docsify-tabs@1"></script>
 <script src="//unpkg.com/docsify-edit-on-github@1/index.js"></script>
+<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-jsx.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js"></script>
 <script>
   window.$docsify.plugins.push(EditOnGithubPlugin.create(
     'https://github.com/boardgameio/boardgame.io/blob/main/docs/documentation/',

diff --git a/docs/documentation/sidebar.md b/docs/documentation/sidebar.md
@@ -17,7 +17,7 @@
   - [Testing](testing.md)
   - [Deployment](deployment.md)
   - [Chat](chat.md)
-  - [Typescript](typescript.md)
+  - [TypeScript](typescript.md)
 - **Reference**
   - [Game](api/Game.md)
   - [Client](api/Client.md)

diff --git a/docs/documentation/typescript.md b/docs/documentation/typescript.md
@@ -1,29 +1,33 @@
-# Typescript
+# TypeScript
 
-boardgame.io includes type definitions for Typescript.
+boardgame.io includes type definitions for TypeScript.
 
-Basic boardgame.io game:
+### Basic usage
 
 ```typescript
-// Game.tsx
-import { Game } from 'boardgame.io';
+// Game.ts
+import type { Game, Move } from "boardgame.io";
 
 export interface MyGameState {
   // aka 'G', your game's state
 }
 
+const move: Move<MyGameState> = (G, ctx) => {};
+
 export const MyGame: Game<MyGameState> = {
   // ...
-}
+};
 ```
 
-## React
+[Open this snippet in the TypeScript Playground ↗︎](https://www.typescriptlang.org/play?#code/PTAEHEEMFsFMDoAuBnAUAS2gBwPYCdFREBPLWUAbwhlgBpQBZHAN3IF9QAzPHaUAcgBGOSHgAmAcxrx0OfgG5UqWAA9cBUOgB2iWHk6QAxuQbEocAMqJIuyqlCgQoSAGtIA8P3rEcAVzygUnD8yKDI1rqobEqGOFrhoNAssABcjMkAPKbmsFY2sAB8oAC8oAAU4PSGiCoAlCVFFGyKymr4hLHxhNk0aTlZZjR5ukWlFPaOYPDTUUA)
+
+### React
 
 React components must include boardgame.io-specific properties, so extend your props from `BoardProps`:
 
 ```typescript
 // Board.tsx
-import { BoardProps } from 'boardgame.io/react';
+import type { BoardProps } from 'boardgame.io/react';
 
 interface MyGameProps extends BoardProps {
   // Custom properties for your component
@@ -49,3 +53,7 @@ const App = Client({
 });
 export default App;
 ```
+
+?> Want to see a more complete example? Check out a TypeScript–React implementation of the Tic-Tac-Toe tutorial on CodeSandbox:
+<br/><br/>
+[![Edit boardgame.io React-TypeScript demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/boardgame-io-react-typescript-demo-u5uvm?fontsize=14&hidenavigation=1&theme=dark)