docs(react): use type annotations instead of casting (#1417)

Author: harry-whorlow

docs/framework/react/guides/basic-concepts.md

@@ -12,12 +12,15 @@ You can create options for your form so that it can be shared between multiple f
 Example:
 
 ```tsx
+interface User {
+  firstName: string
+  lastName: string
+  hobbies: Array<string>
+}
+const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
+
 const formOpts = formOptions({
-  defaultValues: {
-    firstName: '',
-    lastName: '',
-    hobbies: [],
-  } as Person,
+  defaultValues: defaultUser,
 })
 ```
 
@@ -38,16 +41,19 @@ const form = useForm({
 You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
 
 ```tsx
+interface User {
+  firstName: string
+  lastName: string
+  hobbies: Array<string>
+}
+const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
+
 const form = useForm({
+  defaultValues: defaultUser,
   onSubmit: async ({ value }) => {
     // Do something with form data
     console.log(value)
   },
-  defaultValues: {
-    firstName: '',
-    lastName: '',
-    hobbies: [],
-  } as Person,
 })
 ```
 

docs/philosophy.md

@@ -52,11 +52,15 @@ useForm<MyForm>()
 You should do:
 
 ```typescript
+interface Person {
+  name: string
+  age: number
+}
+
+const defaultPerson: Person = { name: 'Bill Luo', age: 24 }
+
 useForm({
-  defaultValues: {
-    name: 'Bill Luo',
-    age: 24,
-  } as MyForm,
+  defaultValues: defaultPerson,
 })
 ```
 

examples/react/array/src/index.tsx

@@ -2,11 +2,16 @@ import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 import { useForm } from '@tanstack/react-form'
 
+interface Person {
+  name: string
+  age: number
+}
+
+const defaultPeople: { people: Array<Person> } = { people: [] }
+
 function App() {
   const form = useForm({
-    defaultValues: {
-      people: [] as Array<{ name: string; age: number }>,
-    },
+    defaultValues: defaultPeople,
     onSubmit({ value }) {
       alert(JSON.stringify(value))
     },