From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 24 Jul 2022 16:08:35 +0000 (+0200)
Subject: docs: ts examples for state
X-Git-Tag: @pinia/nuxt@0.3.1~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2db62aff964f3bc50ae4c493ce04592eb1a59157;p=thirdparty%2Fvuejs%2Fpinia.git

docs: ts examples for state

Close #1466
---

diff --git a/packages/docs/core-concepts/state.md b/packages/docs/core-concepts/state.md
index 143cbeee..39e832ac 100644
--- a/packages/docs/core-concepts/state.md
+++ b/packages/docs/core-concepts/state.md
@@ -27,6 +27,51 @@ const useStore = defineStore('storeId', {
 If you are using Vue 2, the data you create in `state` follows the same rules as the `data` in a Vue instance, i.e. the state object must be plain and you need to call `Vue.set()` when **adding new** properties to it. **See also: [Vue#data](https://v2.vuejs.org/v2/api/#data)**.
 :::
 
+## TypeScript
+
+You don't need to do much in order to make your state compatible with TS. Pinia will infer the type of your state automatically but there are a few cases where you should give it a hand with some casting:
+
+```ts
+const useStore = defineStore('storeId', {
+  state: () => {
+    return {
+      // for initially empty lists
+      userList: [] as UserInfo[],
+      // for data that is not yet loaded
+      user: null as UserInfo | null,
+    }
+  },
+})
+
+interface UserInfo {
+  name: string
+  age: number
+}
+```
+
+If you prefer, you can define the state with an interface and type the return value of `state()`:
+
+```ts
+interface State {
+  userList: UserInfo[]
+  user: UserInfo | null
+}
+
+const useStore = defineStore('storeId', {
+  state: (): State => {
+    return {
+      userList: [],
+      user: null,
+    }
+  },
+})
+
+interface UserInfo {
+  name: string
+  age: number
+}
+```
+
 ## Accessing the `state`
 
 By default, you can directly read and write to the state by accessing it through the `store` instance: