Skip to main content

TypeScript - Define parameter types

// Define the types your modal will receive and return
interface UserModalParams {
userId: string
mode: 'view' | 'edit'
}

interface UserModalResult {
saved: boolean
user?: User
}

// Use the types in the modal
const UserModal = modal<UserModalParams, UserModalResult>()
.content((props) => {
// props now has complete typing!
const { userId, mode, request } = props

const saveUser = () => {
request.resolve({
saved: true,
user: { id: userId, name: 'John' }
})
}

return (
<div>
<h2>{mode === 'edit' ? 'Edit' : 'View'} User</h2>
<p>ID: {userId}</p>
{mode === 'edit' && (
<button onClick={saveUser}>Save</button>
)}
</div>
)
})

// Now has autocomplete and type checking
const result = await UserModal.request({
userId: '123',
mode: 'edit'
})

if (result.saved) {
console.log('User saved:', result.user)
}