TypeScript

TypeScript

The library is written in TypeScript and includes full type definitions for all components, composables, and utilities.

Type Definitions

All types are automatically available when you import from the library:

import {
  useForm,
  DButton,
  type FieldDefinition,
  type UseFormReturn,
  type ValidationErrors
} from '@omnitend/dashboard-for-laravel'

Component Props

All components have full TypeScript prop definitions:

<script setup lang="ts">
import { DButton } from '@omnitend/dashboard-for-laravel'
import type { ButtonVariant, Size } from 'bootstrap-vue-next'

// TypeScript knows about all valid props
const variant: ButtonVariant = 'primary'
const size: Size = 'lg'
</script>

<template>
  <DButton :variant="variant" :size="size">
    Click Me
  </DButton>
</template>

Form Types

UseFormReturn

import type { UseFormReturn } from '@omnitend/dashboard-for-laravel'

interface UserForm {
  name: string
  email: string
  password: string
}

const form: UseFormReturn<UserForm> = useForm({
  name: '',
  email: '',
  password: ''
})

// TypeScript knows about form fields
form.name // ✓ OK
form.email // ✓ OK
form.invalid // ✗ Error

FieldDefinition

import type { FieldDefinition } from '@omnitend/dashboard-for-laravel'

const fields: FieldDefinition[] = [
  {
    key: 'name',
    label: 'Name',
    type: 'text', // Type-checked
    required: true
  },
  {
    key: 'country',
    label: 'Country',
    type: 'select',
    options: [
      { value: 'UK', text: 'United Kingdom' }
    ]
  }
]

ValidationErrors

import type { ValidationErrors } from '@omnitend/dashboard-for-laravel'

const errors: ValidationErrors = {
  email: ['The email field is required.'],
  password: ['The password must be at least 8 characters.']
}

// Access errors
const emailError = errors.email?.[0] // string | undefined

Available Types

Form Types

import type {
  FieldType,
  FieldOption,
  FieldDefinition,
  ValidationErrors,
  FormError,
  FormSubmitOptions,
  FormState,
  UseFormReturn
} from '@omnitend/dashboard-for-laravel'

Component Types

import type {
  TableField,
  PaginationData,
  NavigationItem,
  NavigationGroup,
  Navigation
} from '@omnitend/dashboard-for-laravel'

API Types

import type {
  ApiError,
  ApiResponse
} from '@omnitend/dashboard-for-laravel'

Type Inference

The library uses TypeScript’s type inference extensively:

// Form data types are inferred
const form = useForm({
  name: '',          // inferred as string
  age: 0,           // inferred as number
  active: false      // inferred as boolean
})

// TypeScript knows the types
form.name = 'John'    // ✓ OK
form.name = 123       // ✗ Error: Type 'number' is not assignable to type 'string'

Generic Types

Some utilities use generics for maximum type safety:

interface User {
  id: number
  name: string
  email: string
}

const form = useForm<User>({
  id: 0,
  name: '',
  email: ''
})

// TypeScript enforces the User interface
form.name = 'John'   // ✓ OK
form.invalid = true  // ✗ Error: Property 'invalid' does not exist

Component Slot Types

Slots are typed with their bindings:

<script setup lang="ts">
import { DDropdown } from '@omnitend/dashboard-for-laravel'

interface User {
  name: string
  email: string
}

const user: User = {
  name: 'John Doe',
  email: 'john@example.com'
}
</script>

<template>
  <DDropdown>
    <!-- Slot props are typed -->
    <template #button-content>
      {{ user.name }}
    </template>
  </DDropdown>
</template>

Usage Patterns

Define Interfaces

For complex forms, define interfaces for your data structures:

interface Customer {
  id: number
  business_name: string
  contact_name: string
  email: string
  phone: string
}

const form = useForm<Customer>({
  id: 0,
  business_name: '',
  contact_name: '',
  email: '',
  phone: ''
})

Type Field Definitions

You can type your field definitions for better IDE support:

import type { FieldDefinition } from '@omnitend/dashboard-for-laravel'

const fields: FieldDefinition[] = [
  // Fields here are type-checked
]

Type Imports

Using import type keeps type imports separate from value imports:

import { useForm } from '@omnitend/dashboard-for-laravel'
import type { ValidationErrors } from '@omnitend/dashboard-for-laravel'

Strict Mode

The library works best with TypeScript strict mode enabled:

{
  "compilerOptions": {
    "strict": true
  }
}

IDE Support

The library works great with:

  • VS Code - Full IntelliSense and autocomplete
  • WebStorm - Type checking and refactoring
  • Volar - Vue 3 + TypeScript support
  • Vue - Official (Volar) - Vue 3 language support
  • TypeScript Vue Plugin - TypeScript support in .vue files
  • ESLint - Linting

Troubleshooting

Types not available

Make sure the package is installed:

npm install @omnitend/dashboard-for-laravel

Circular dependency errors

This usually means types aren’t properly imported. Use import type:

// Good
import type { UseFormReturn } from '@omnitend/dashboard-for-laravel'

// Avoid
import { UseFormReturn } from '@omnitend/dashboard-for-laravel'

Volar not working

Restart the Vue Language Server in VS Code:

  1. Open Command Palette (Cmd/Ctrl + Shift + P)
  2. Type “Restart Vue Server”
  3. Select “Vue: Restart Vue Server”

Next Steps