feat: add type inference for the options prop

readme.md

@@ -441,20 +441,31 @@ The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutor
 
 ## 🦺   TypeScript
 
-TypeScript users can import the types used for internal type safety:
+The type of `options` is inferred automatically from the data you pass. E.g.
+
+```ts
+const options = [
+   { label: `foo`, value: 42 }
+   { label: `bar`, value: 69 }
+]
+// type Option = { label: string, value: number }
+const options = [`foo`, `bar`]
+// type Option = string
+const options = [42, 69]
+// type Option = number
+```
 
-```svelte
-<script lang="ts">
-  import MultiSelect from 'svelte-multiselect'
-  import type { Option, ObjectOption } from 'svelte-multiselect'
-
-  const myOptions: ObjectOption[] = [
-    { label: 'foo', value: 42 },
-    { label: 'bar', value: 69 },
-  ]
-  // an Option can be string | number | ObjectOption
-  const myNumbers: Option[] = [42, 69]
-</script>
+The inferred type of `Option` is used to enforce type-safety on derived props like `selected` as well as slot components. E.g. you'll get an error when trying to use a slot component that expects a string if your options are objects (see [this comment](https://github.com/janosh/svelte-multiselect/pull/189/files#r1058853697) for example screenshots).
+
+You can also import [the types this component uses](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for downstream applications:
+
+```ts
+import {
+  Option,
+  ObjectOption,
+  DispatchEvents,
+  MultiSelectEvents,
+} from 'svelte-multiselect'
 ```
 
 ## ✨ &nbsp; Styling

src/lib/MultiSelect.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher, tick } from 'svelte'
   import { flip } from 'svelte/animate'
-  import type { DispatchEvents, MultiSelectEvents, ObjectOption, Option } from './'
+  import type { DispatchEvents, MultiSelectEvents, Option as GenericOption } from './'
   import CircleSpinner from './CircleSpinner.svelte'
   import { CrossIcon, DisabledIcon, ExpandIcon } from './icons'
   import Wiggle from './Wiggle.svelte'
+  type Option = $$Generic<GenericOption>
 
   export let activeIndex: number | null = null
   export let activeOption: Option | null = null
@@ -60,7 +61,7 @@
   export let searchText: string = ``
   export let selected: Option[] =
     options
-      ?.filter((op) => (op as ObjectOption)?.preselected)
+      ?.filter((op) => op instanceof Object && op?.preselected)
       .slice(0, maxSelect ?? undefined) ?? []
   export let sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
   export let selectedOptionsDraggable: boolean = !sortSelected
@@ -69,7 +70,7 @@
   export let value: Option | Option[] | null = null
 
   // get the label key from an option object or the option itself if it's a string or number
-  const get_label = (op: Option) => (op instanceof Object ? op.label : op)
+  const get_label = (op: GenericOption) => (op instanceof Object ? op.label : op)
 
   // if maxSelect=1, value is the single item in selected (or null if selected is empty)
   // this solves both https://github.com/janosh/svelte-multiselect/issues/86 and