chore: even better typing for multiple & selected/value props (thanks…

… to Hofer Ivan) ref: sveltejs/language-tools#442 (comment)
vnphanquang · Oct 17, 2022 · d271923 · d271923
1 parent e068bbb
commit d271923
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/apps/svelte-kit/src/routes/select/+page.svelte b/apps/svelte-kit/src/routes/select/+page.svelte
@@ -129,15 +129,17 @@
           <Select {options} placeholder="Please select" selected={options[2]} />
 
           <!-- this should cause ts error (selected must be array) -->
-          <!-- <Select {options} placeholder="Please select" multiple selected={options[2]} /> -->
+          <!-- <Select {options} placeholder="Please select" multiple selected={options[2]} />
+          <Select {options} placeholder="Please select" multiple={true} selected={options[2]} /> -->
         </div>
 
         <div>
           <h5>Multiple</h5>
           <Select {options} placeholder="Please select" multiple selected={options.slice(2, 5)} />
 
           <!-- this should cause ts error (selected must be single value) -->
-          <!-- <Select {options} placeholder="Please select" selected={options.slice(2, 5)} /> -->
+          <!-- <Select {options} placeholder="Please select" selected={options.slice(2, 5)} />
+          <Select {options} placeholder="Please select" multiple={false} selected={options.slice(2, 5)} /> -->
         </div>
 
       </article>

diff --git a/apps/svelte-kit/src/routes/select/Select.svelte b/apps/svelte-kit/src/routes/select/Select.svelte
@@ -8,8 +8,9 @@
 
   type Value = $$Generic;
   type Option = $$Generic<BaseOption<Value>>;
+  type Multiple = $$Generic<true | false | undefined>;
 
-  type $$Props = SelectProps<Option>;
+  type $$Props = SelectProps<Option, Multiple>;
   type SelectedOption = $$Props['selected'];
   type SelectedValue = $$Props['value'];
 

diff --git a/apps/svelte-kit/src/routes/select/Select.types.ts b/apps/svelte-kit/src/routes/select/Select.types.ts
@@ -32,7 +32,11 @@ export interface GroupConfig<Option> {
 
 export type GroupProp<Option> = boolean | Grouper<Option> | Partial<GroupConfig<Option>>;
 
-export interface SelectBaseProps<O extends BaseOption<V>, V = O['value']> {
+export interface SelectProps<
+  O extends BaseOption<V>,
+  M extends true | false | undefined,
+  V = O['value'],
+> {
   id?: string;
   placeholder?: string;
   open?: boolean;
@@ -48,20 +52,8 @@ export interface SelectBaseProps<O extends BaseOption<V>, V = O['value']> {
   clearable?: boolean;
   hideExpansionIndicator?: boolean;
   options: O[];
+  multiple?: M;
+  selected?: undefined extends M ? O : true extends M ? O[] : O;
+  // selected?: M extends undefined ? O : M extends true ? O[] : O;
+  value?: undefined extends M ? V : true extends M ? V[] : V;
 }
-
-export interface SingleSelectProps<O extends BaseOption<V>, V = O['value']> extends SelectBaseProps<O, V> {
-  multiple?: false;
-  selected?: O;
-  value?: V;
-}
-
-export interface MultipleSelectProps<O extends BaseOption<V>, V = O['value']> extends SelectBaseProps<O, V> {
-  multiple: true;
-  selected?: O[];
-  value?: V[];
-}
-
-export type SelectProps<O extends BaseOption<V>, V = O['value']> =
-  | SingleSelectProps<O, V>
-  | MultipleSelectProps<O, V>;