|
| 1 | +## Type-Safe Queries |
| 2 | + |
| 3 | +ArrayQuery provides type safety for query parameters, ensuring that you can only use valid keys for sorting, searching, and filtering. This feature helps catch errors at compile-time and provides excellent autocompletion support in your IDE. |
| 4 | + |
| 5 | +### Sorting |
| 6 | + |
| 7 | +When specifying the `key` for sorting, you'll get type-safe suggestions based on the properties of your data: |
| 8 | + |
| 9 | +```ts twoslash |
| 10 | +// @noErrors |
| 11 | +import { query } from '@chronicstone/array-query' |
| 12 | + |
| 13 | +const users = [ |
| 14 | + { id: 1, name: 'Alice', age: 30, email: 'alice@example.com' }, |
| 15 | + { id: 2, name: 'Bob', age: 25, email: 'bob@example.com' }, |
| 16 | +] |
| 17 | + |
| 18 | +const result = query(users, { |
| 19 | + sort: { key: '' } |
| 20 | +// ^| |
| 21 | +}) |
| 22 | +``` |
| 23 | + |
| 24 | +Hovering over the empty string will show a popover with valid options: `"id" | "name" | "age" | "email"`. |
| 25 | + |
| 26 | +### Searching |
| 27 | + |
| 28 | +The `keys` array in the search options is also type-safe: |
| 29 | + |
| 30 | +```ts twoslash |
| 31 | +// @noErrors |
| 32 | +import { query } from '@chronicstone/array-query' |
| 33 | + |
| 34 | +const products = [ |
| 35 | + { id: 1, name: 'Laptop', price: 1000, description: 'Powerful laptop' }, |
| 36 | + { id: 2, name: 'Phone', price: 500, description: 'Smart phone' }, |
| 37 | +] |
| 38 | + |
| 39 | +const result = query(products, { |
| 40 | + search: { |
| 41 | + value: 'laptop', |
| 42 | + keys: [''] |
| 43 | + // ^| |
| 44 | + } |
| 45 | +}) |
| 46 | +``` |
| 47 | + |
| 48 | +The popover for the empty string will show: `"id" | "name" | "price" | "description"`. |
| 49 | + |
| 50 | +### Filtering |
| 51 | + |
| 52 | +Filter keys are also type-safe, including for nested properties: |
| 53 | + |
| 54 | +```ts twoslash |
| 55 | +// @noErrors |
| 56 | +import { query } from '@chronicstone/array-query' |
| 57 | + |
| 58 | +const employees = [ |
| 59 | + { id: 1, name: 'Alice', department: { name: 'IT', location: 'New York' } }, |
| 60 | + { id: 2, name: 'Bob', department: { name: 'HR', location: 'London' } }, |
| 61 | +] |
| 62 | + |
| 63 | +const result = query(employees, { |
| 64 | + filter: [ |
| 65 | + { key: '' } |
| 66 | + // ^| |
| 67 | + ] |
| 68 | +}) |
| 69 | +``` |
| 70 | + |
| 71 | +### Complex Nested Structures |
| 72 | + |
| 73 | +ArrayQuery handles complex nested structures with ease: |
| 74 | + |
| 75 | +```typescript twoslash |
| 76 | +// @noErrors |
| 77 | +import { query } from '@chronicstone/array-query' |
| 78 | + |
| 79 | +const data = [ |
| 80 | + { |
| 81 | + id: 1, |
| 82 | + info: { |
| 83 | + personal: { name: 'Alice', age: 30 }, |
| 84 | + professional: { title: 'Developer', skills: ['JavaScript', 'TypeScript'] } |
| 85 | + }, |
| 86 | + contacts: [ |
| 87 | + { type: 'email', value: 'alice@example.com' }, |
| 88 | + { type: 'phone', value: '123-456-7890' } |
| 89 | + ] |
| 90 | + } |
| 91 | +] |
| 92 | + |
| 93 | +const result = query(data, { |
| 94 | + sort: { key: '', dir: 'asc' }, |
| 95 | +// ^| |
| 96 | +}) |
| 97 | +``` |
| 98 | + |
| 99 | +These type-safe queries ensure that you're always using valid property paths, reducing errors and improving the developer experience when working with ArrayQuery. |
0 commit comments