<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/xxxx</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: Tagging <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ejose19/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ejose19">@ejose19</a> and <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/iansan5653/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/iansan5653">@iansan5653</a> for their input based on git blame. Also tagging library author <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jquense/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jquense">@jquense</a></li>
</ul>
</li>
</ul>
<p dir="auto"><strong>How should I resolve issue with providing correct predicate type</strong></p>
<ul dir="auto">
<li>Below is the example code which throws type errors after upgrading yup to <code class="notranslate">0.29.3</code> and @types/yup to <code class="notranslate">0.29.7</code></li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        code: Yup.string()
          .required('Code is required.')
          .test('duplicate-record', 'Code must be unique.', function (this: Yup.TestContext, code: string) {
            for (const [i, r] of allocationTable.records.entries()) {
              if (code === r.code &amp;&amp; `records[${i}].code` !== this.path) {
                return false;
              }
            }
            return true;
          }),"><pre class="notranslate"><code class="notranslate">        code: Yup.string()
          .required('Code is required.')
          .test('duplicate-record', 'Code must be unique.', function (this: Yup.TestContext, code: string) {
            for (const [i, r] of allocationTable.records.entries()) {
              if (code === r.code &amp;&amp; `records[${i}].code` !== this.path) {
                return false;
              }
            }
            return true;
          }),
</code></pre></div>
<p dir="auto">In this above example it looks if the <code class="notranslate">code</code> that user entered already exists in records entry and returns <code class="notranslate">true</code> if its unique else <code class="notranslate">false</code> if it already exists.</p>
<p dir="auto">Here I'm checking if code is unique or not and returning boolean and I'm not checking if the <code class="notranslate">code is string</code> which apparently resolves the issue and I'm not sure if this is the right usage.</p>
<p dir="auto">Type error that I get for above function is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Argument of type '(this: TestContext&lt;object&gt;, code: string) =&gt; boolean' is not assignable to parameter of type 'AssertingTestFunction&lt;any, object&gt;'.
  Signature '(this: TestContext&lt;object&gt;, code: string): boolean' must be a type predicate.ts(2345)"><pre class="notranslate"><code class="notranslate">Argument of type '(this: TestContext&lt;object&gt;, code: string) =&gt; boolean' is not assignable to parameter of type 'AssertingTestFunction&lt;any, object&gt;'.
  Signature '(this: TestContext&lt;object&gt;, code: string): boolean' must be a type predicate.ts(2345)
</code></pre></div>
<p dir="auto">AssertingTestFunction declaration looks like below in Yup Typings:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export type AssertingTestFunction&lt;T, C&gt; = (this: TestContext&lt;C&gt;, value: any) =&gt; value is T;"><pre class="notranslate"><code class="notranslate">export type AssertingTestFunction&lt;T, C&gt; = (this: TestContext&lt;C&gt;, value: any) =&gt; value is T;
</code></pre></div>
<p dir="auto"><strong>Another example code is:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    customerKey: Yup.object&lt;CustomerKey&gt;()
      .nullable(true)
      .shape({
        customerId: Yup.number(),
        customerCode: Yup.string().test('customerCodeTest', 'Customer is required', (value) =&gt; {
          return (
            formProps.eventType === TypeA ||
            (formProps.eventType === TypeB &amp;&amp; value) // &lt;------ Only required if eventType B is picked 
          );
        }),
      }),"><pre class="notranslate"><code class="notranslate">    customerKey: Yup.object&lt;CustomerKey&gt;()
      .nullable(true)
      .shape({
        customerId: Yup.number(),
        customerCode: Yup.string().test('customerCodeTest', 'Customer is required', (value) =&gt; {
          return (
            formProps.eventType === TypeA ||
            (formProps.eventType === TypeB &amp;&amp; value) // &lt;------ Only required if eventType B is picked 
          );
        }),
      }),
</code></pre></div>
<p dir="auto">For this code test I'm checking and returning value (truthy or falsy) only if <code class="notranslate">TypeB</code> is picked else returning <code class="notranslate">true</code>. Again I'm not checking if the <code class="notranslate">value is string</code> rather existence of the <code class="notranslate">value</code> itself for a certain eventType (separate field) selection.</p>
<p dir="auto">Here's typing error for above code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Argument of type '(this: TestContext&lt;object&gt;, value: string | null | undefined) =&gt; string | boolean | null | undefined' is not assignable to parameter of type 'AssertingTestFunction&lt;any, object&gt;'.
  Signature '(this: TestContext&lt;object&gt;, value: string | null | undefined): string | boolean | null | undefined' must be a type predicate.ts(2345)"><pre class="notranslate"><code class="notranslate">Argument of type '(this: TestContext&lt;object&gt;, value: string | null | undefined) =&gt; string | boolean | null | undefined' is not assignable to parameter of type 'AssertingTestFunction&lt;any, object&gt;'.
  Signature '(this: TestContext&lt;object&gt;, value: string | null | undefined): string | boolean | null | undefined' must be a type predicate.ts(2345)
</code></pre></div>
<p dir="auto">If you know how to fix the issue, make a pull request instead.</p>
<ul class="contains-task-list">
<li>[] I tried using the <code class="notranslate">@types/jQuery</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/leonard-thieu/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/leonard-thieu">@leonard-thieu</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/borisyankov/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/borisyankov">@borisyankov</a>  <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/choffmeister/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/choffmeister">@choffmeister</a></li>
</ul>
</li>
</ul>
<p dir="auto">How to extend the <code class="notranslate">JQuery</code> interface to support jQuery plugin methods where the <code class="notranslate">options</code> parameter has an <code class="notranslate">Enum</code> property.</p>
<p dir="auto">The problem with the below approach is, I have to create a separate module <code class="notranslate">EnumCircleShape.ts</code> and import it into my app.ts file.</p>
<p dir="auto">While this works, it duplicates code (Enum in d.ts and EnumCircleShape.ts) and an additional import is required, in order to use the plugin in <code class="notranslate">app.ts</code>.</p>
<p dir="auto">If I remove the <code class="notranslate">import</code> from <code class="notranslate">app.ts</code> I can successfully transpile with <code class="notranslate">tsc</code>, but then I get a runtime error:</p>
<p dir="auto"><a href="https://i.stack.imgur.com/yHvL5.png" rel="nofollow"><img src="https://camo.githubusercontent.com/f50767afaf6e65d2cdbedc4d6af44a0b647bce2aaf03f75df898bc062f2cdcc1/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f7948764c352e706e67" alt="enter image description here" data-canonical-src="https://i.stack.imgur.com/yHvL5.png" style="max-width: 100%;"></a></p>
<p dir="auto"><em>It works without importing if I remove the enum property of the <code class="notranslate">IOptions</code> interface. But this isn't a solution.</em></p>
<p dir="auto"><strong>Usage (app.ts):</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" import { CircleShape } from &quot;./EnumCircleShape&quot;;

    $(&quot;#slider&quot;).roundSlider({
        step: 20,
        circleShape: CircleShape.customQuarter
    });"><pre class="notranslate"><code class="notranslate"> import { CircleShape } from "./EnumCircleShape";

    $("#slider").roundSlider({
        step: 20,
        circleShape: CircleShape.customQuarter
    });
</code></pre></div>
<p dir="auto"><strong>jQueryInterfaceExtensions.d.ts</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="interface JQuery {
    roundSlider(options: IOptions | string): jQuery;
}

interface IOptions {
    circleShape?: CircleShape;   
}

 enum CircleShape {
    full = &quot;full&quot;,
    halfTop = &quot;half-top&quot;
}"><pre class="notranslate"><code class="notranslate">interface JQuery {
    roundSlider(options: IOptions | string): jQuery;
}

interface IOptions {
    circleShape?: CircleShape;   
}

 enum CircleShape {
    full = "full",
    halfTop = "half-top"
}
</code></pre></div>
<p dir="auto"><strong>EnumCircleShape.ts</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" enum CircleShape {
    full = &quot;full&quot;,
    halfTop = &quot;half-top&quot;
}"><pre class="notranslate"><code class="notranslate"> enum CircleShape {
    full = "full",
    halfTop = "half-top"
}
</code></pre></div>
<p dir="auto"><strong>It would be good to make a little advanced tutorial how to extend <code class="notranslate">JQuery</code> as many plugins don't have a <code class="notranslate">.d.ts</code> available.</strong></p>