diff --git a/docs/documentation/typescript.md b/docs/documentation/typescript.md index b5a2a38b9..b4547c2f8 100644 --- a/docs/documentation/typescript.md +++ b/docs/documentation/typescript.md @@ -2,26 +2,29 @@ boardgame.io includes type definitions for TypeScript. -### Basic usage +## Basic usage ```typescript // Game.ts -import type { Game, Move } from "boardgame.io"; +import type { Game, Move, Ctx } from 'boardgame.io'; -export interface MyGameState { +interface MyGameState { // aka 'G', your game's state } -const move: Move = ({ G, ctx }) => {}; +export interface GameArgs { + G: MyGameState; + ctx: Ctx; +} + +const move: Move = ({G, ctx}: GameArgs) => { /* ... */ }; -export const MyGame: Game = { - // ... -}; +export const MyGame: Game = { /* ... */ } ``` -[Open this snippet in the TypeScript Playground ↗︎](https://www.typescriptlang.org/play?#code/PTAEHEEMFsFMDoAuBnAUAS2gBwPYCdFREBPLWUAbwhlgBpQBZHAN3IF9QAzPHaUAcgBGOSHgAmAcxrx0OfgG5UqWAA9cBUOgB2iWHk6QAxuQbEocAMqJIuyqlCgQoSAGtIA8P3rEcAVzygUnD8yKDI1rqobEqGOFrhoNAssABcjMkAPKbmsFY2sAB8oAC8oAAU4PSGiCoAlCVFFGyKymr4hLHxhNk0aTlZZjR5ukWlFPaOYPDTUUA) +[Open this snippet in the TypeScript Playground ↗︎](https://www.typescriptlang.org/play/?#code/PTAEHEEMFsFMDoAuBnAUAS2gBwPYCdFREBPLWUAbwhlgBpQBZHANztAGFEAPUAX1ABmeHNFAByAEY5IeACYBzGvHQ4xAblQYAdolh4BkAMbkGxKHADKiSLsqpQoEKEgBrSOPBj6xHAFc8oIpwYsigyNa6qLyasFy4BKDoOnoGxtRwAIJ48qEU9hAAXIxmNFY2sBoOhtxFnFwa0aiGOFrhoNAssEVMrAA8puawZboAfKAAvKAAFBTg9NVcvEWDWTkAlBNjVMAAVKDwB6A7YLwaqLHxhM2thAM0yzT9JZYRsGOT23sH8EcnqEA) -### React +## React React components must include boardgame.io-specific properties, so extend your props from `BoardProps`. By passing your game state type to `BoardProps`, @@ -59,4 +62,4 @@ export default App; ?> Want to see a more complete example? Check out a TypeScript–React implementation of the Tic-Tac-Toe tutorial on CodeSandbox:

-[![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) +[![Edit boardgame.io React-TypeScript demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/boardgame-io-react-typescript-demo-forked-vq6sll)