title: How to pass in a value of a prop defined using the "this | that | other thing" syntax?
body: <p>I have the following mapper function in which I'm trying to specify an value in a JSX prop, but the type definition won't allow me to pass in the value. Below is the code ...</p>
  <pre><code>function mapper(notification: NotificationMessageType) {
    let style = &quot;info&quot;;
  
    switch (notification.icon) {
      case NotificationIconEnum.Error:
        style = &quot;error&quot;;
        break;
  
      case NotificationIconEnum.Warning:
        style = &quot;warning&quot;;
        break;
    }
  
    return (
      &lt;Notification
        key={notification.id}
        type={{ style: style }}
        closable={true}
        onClose={() =&gt; notificationContext.close(notification.id)}&gt;
        &lt;span&gt;{notification.message}&lt;/span&gt;
      &lt;/Notification&gt;
    );
  }
  </code></pre>
  <p>The prop that is complaining is the <code>type</code> prop of the <code>Notification</code> component at the bottom of the snippet. The <code>type</code> prop is defined as ...</p>
  <pre><code>type?: {
    style?: 'none' | 'success' | 'error' | 'warning' | 'info';
    icon?: boolean;
  };
  </code></pre>
  <p>But me passing in a <code>string</code> there causes TypeScript to say it's not a compatible type.</p>
  <p>Since I can't import that type definition from <code>Notification</code>, how do I pass in the value?</p>
  <p>Edit:</p>
  <p>By the way, the error message says ...</p>
  <blockquote>
  <p>Type 'string' is not assignable to type '&quot;info&quot; | &quot;error&quot; | &quot;warning&quot;
  | &quot;none&quot; | &quot;success&quot;'.ts(2322) Notification.d.ts(57, 9): The expected
  type comes from property 'style' which is declared here on type '{
  style?: &quot;info&quot; | &quot;error&quot; | &quot;warning&quot; | &quot;none&quot; | &quot;success&quot;; icon?:
  boolean; }'</p>
  </blockquote>