title: How do I implement a function prop for the React-Selectize library in Typescript?
body: <p>I'm currently trying to implement the MultiSelect feature of the <a href="https://github.com/furqanZafar/react-selectize#readme" rel="nofollow noreferrer">React-Selectize</a> library, specifically using <strong>Typescript</strong>.</p>
  <p>The <code>MultiSelectProps</code> are defined as such:</p>
  <pre><code>export interface MultiSelectProps extends SimpleSelectProps {
    anchor?: OptionValue;
    createFromSearch?(items: OptionValue[], search: string): OptionValue;
    createFromSearch?(options: OptionValue[], values: OptionValue[], search: string): OptionValue;
    defaultValues?: OptionValue[];
    ...
  </code></pre>
  <p>In my code, I am attempting to use a MultiSelect element with the <code>createFromScratch</code> prop implemented so that users can add a new item to the list by typing in some text and then clicking enter. I'm unsure of how to program this in a way that the compiler will accept, as with the following code I receive the subsequent error:</p>
  <pre><code>                    &lt;MultiSelect
                        placeholder=&quot;Select fruits&quot;
                        options={['apple', 'mango', 'orange', 'banana'].map(
                          (fruit) =&gt; ({ label: fruit, value: fruit }),
                        )}
                        createFromSearch={(items: OptionValue[], search: string): OptionValue =&gt; {
                          return { label: search.trim(), value: search.trim() };
                        }}
                      /&gt;
  </code></pre>
  <p><code>Error: Type: (items: OptionValue[], search: string) =&gt; OptionValue' is not assignable to type '{ (items: OptionValue[], search: string): OptionValue; ...</code></p>
  <p>I have not been able to find any resources on how to account for syntax with Typescript, and <a href="http://furqanzafar.github.io/react-selectize/#/" rel="nofollow noreferrer">the guide I found here</a> hasn't done me any good so far. Additional attempts by myself to try and weasel the syntax into working haven't worked either, only producing some variation of the above error message.</p>
  <p>EDIT: Here's the full error message in VS.</p>
  <p><a href="https://i.stack.imgur.com/qlcQ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qlcQ0.png" alt="enter image description here" /></a></p>
  <p>EDIT 2: The only way I am currently able to get the syntax to stop throwing an error is to encapsulate the function (incorrectly) somewhere else and pass it in:</p>
  <pre><code>                    &lt;MultiSelect
                        placeholder=&quot;Select fruits&quot;
                        options={['apple', 'mango', 'orange', 'banana'].map(
                          (fruit) =&gt; ({ label: fruit, value: fruit }),
                        )}
                        createFromSearch={this.createFromSearch}
                      /&gt;
  </code></pre>
  <p>Where <code>this.createFromSearch</code> is defined as:</p>
  <pre><code>const createFromSearch = {
    (_items: OptionValue[], search: string): OptionValue =&gt; {
      return { value: search.trim(), label: search.trim() };
    };
  };
  </code></pre>
  <p>Which doesn't work, since you can't just surround an empty function with an object in Typescript. Naming the function brings the error back in the MultiSelect.</p>