title: Yup conditionally extend Object Schema with other Schema
body: <p>For a Project I use <a href="https://www.npmjs.com/package/yup" rel="nofollow noreferrer">yup</a> and I have some trouble extending a Schema when a property is set.</p>
  <p>I build a <a href="https://codesandbox.io/s/gracious-johnson-njli8q?file=/index.ts" rel="nofollow noreferrer">Codesandbox</a> to show my Problem but the basics are the following.</p>
  <pre><code>// Schema I want to extend by, I use it in other places which is why I want to spread it into the baseSchema
  const baseSchema = yup.object({
    firstName: yup.string().required()
  }).required();
  
  const extendedSchema = yup
    .object({
      hasOtherFields: yup
        .mixed()
        .required()
        .oneOf([...TRUE_FLASE])
    })
    .when(&quot;hasOtherFields&quot;, {
      is: (value?: typeof TRUE_FLASE[number]) =&gt;
        value != null &amp;&amp; value === &quot;true&quot;,
      then: (schema) =&gt;
        schema
          .shape({
            ...baseSchema.fields
          })
          .required()
    })
    .required();
  </code></pre>
  <p>So the property <code>hasOtherFields</code> needs to be set and needs to be either <code>&quot;true&quot;</code> or <code>&quot;false&quot;</code>. If it is <code>&quot;true&quot;</code>, I extend the <code>extendedSchema</code> with <code>shape</code> and pass in the fields from another the <code>baseSchema</code> which has a required string field.</p>
  <p>Sadly this doesn't work ... If I create a nested <code>object</code> property inside the <code>object</code> declaration like so</p>
  <pre><code>const extendedSchema = yup
    .object({
      hasOtherFields: yup
        .mixed()
        .required()
        .oneOf([...TRUE_FLASE]),
      extendedFields: yup.object({}).when(&quot;hasOtherFields&quot;, {
        is: (value?: typeof TRUE_FLASE[number]) =&gt;
          value != null &amp;&amp; value === &quot;true&quot;,
        then: (schema) =&gt;
          schema
            .shape({
              ...baseSchema.fields
            })
            .required()
      })
    })
  </code></pre>
  <p>it works, but that doesn't really work for my use case.</p>
  <p>So my question is, is there a way ? I basically want the type to look like this</p>
  <pre><code>type Schema = {hasCoApplicant: &quot;false&quot;} | {hasCoApplicant: &quot;true&quot;; firstName: string};
  </code></pre>