<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"> 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: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bczengel/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bczengel">@bczengel</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chrootsu/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/chrootsu">@chrootsu</a>  <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/stepancar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/stepancar">@stepancar</a></li>
</ul>
</li>
</ul>
<p dir="auto">The following code:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const filterStepsByPrograms = (educationalProgramSteps: EducationalProgramStep[], programs: EducationalProgram[]): EducationalProgramStep[] =&gt; {
  return filter(educationalProgramSteps, (step: EducationalProgramStep) =&gt; {
    return find(programs, { name: getValue(step, 'program.name') });
  });
};"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">filterStepsByPrograms</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">educationalProgramSteps</span>: <span class="pl-smi">EducationalProgramStep</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">programs</span>: <span class="pl-smi">EducationalProgram</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span>: <span class="pl-smi">EducationalProgramStep</span><span class="pl-kos">[</span><span class="pl-kos">]</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-s1">educationalProgramSteps</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">step</span>: <span class="pl-smi">EducationalProgramStep</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s1">programs</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-en">getValue</span><span class="pl-kos">(</span><span class="pl-s1">step</span><span class="pl-kos">,</span> <span class="pl-s">'program.name'</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Generates the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type 'number' is not assignable to type 'EducationalProgramStep'."><pre class="notranslate"><code class="notranslate">Type 'number' is not assignable to type 'EducationalProgramStep'.
</code></pre></div>
<p dir="auto"><strong>But this should be valid and shouldn't throw an error</strong></p>
<blockquote>
<p dir="auto">Using <code class="notranslate">| any</code> fixes the error</p>
</blockquote>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const filterStepsByPrograms = (educationalProgramSteps: EducationalProgramStep[], programs: EducationalProgram[]): EducationalProgramStep[] =&gt; {
  return filter(educationalProgramSteps, (step: EducationalProgramStep | any) =&gt; {
    return find(programs, { name: getValue(step, 'program.name') });
  });
};"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">filterStepsByPrograms</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">educationalProgramSteps</span>: <span class="pl-smi">EducationalProgramStep</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">programs</span>: <span class="pl-smi">EducationalProgram</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span>: <span class="pl-smi">EducationalProgramStep</span><span class="pl-kos">[</span><span class="pl-kos">]</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-s1">educationalProgramSteps</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">step</span>: <span class="pl-smi">EducationalProgramStep</span> <span class="pl-c1">|</span> <span class="pl-smi">any</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s1">programs</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-en">getValue</span><span class="pl-kos">(</span><span class="pl-s1">step</span><span class="pl-kos">,</span> <span class="pl-s">'program.name'</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Doc: <a href="https://lodash.com/docs/4.17.15#filter" rel="nofollow">https://lodash.com/docs/4.17.15#filter</a></p>
<hr>
<p dir="auto">index.d.ts</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Type definitions for lodash.filter 4.6
// Project: https://lodash.com
// Definitions by: Brian Zengel &lt;https://github.com/bczengel&gt;, Ilya Mochalov &lt;https://github.com/chrootsu&gt;, Stepan Mikhaylyuk &lt;https://github.com/stepancar&gt;
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8

// Generated from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/lodash/scripts/generate-modules.ts

import { filter } from &quot;lodash&quot;;
export = filter;

"><pre class="notranslate"><span class="pl-c">// Type definitions for lodash.filter 4.6</span>
<span class="pl-c">// Project: https://lodash.com</span>
<span class="pl-c">// Definitions by: Brian Zengel &lt;https://github.com/bczengel&gt;, Ilya Mochalov &lt;https://github.com/chrootsu&gt;, Stepan Mikhaylyuk &lt;https://github.com/stepancar&gt;</span>
<span class="pl-c">// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped</span>
<span class="pl-c">// TypeScript Version: 2.8</span>

<span class="pl-c">// Generated from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/lodash/scripts/generate-modules.ts</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">filter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"lodash"</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-c1">=</span> <span class="pl-s1">filter</span><span class="pl-kos">;</span>
</pre></div>
<p dir="auto">@types/lodash/common/collection.d.ts</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="     interface LoDashStatic {
        /**
         * Iterates over elements of collection, returning an array of all elements predicate returns truthy for. The
         * predicate is invoked with three arguments: (value, index|key, collection).
         *
         * @param collection The collection to iterate over.
         * @param predicate The function invoked per iteration.
         * @return Returns the new filtered array.
         */
        filter(
            collection: string | null | undefined,
            predicate?: StringIterator&lt;boolean&gt;
        ): string[];

        /**
         * @see _.filter
         */
        filter&lt;T, S extends T&gt;(
            collection: List&lt;T&gt; | null | undefined,
            predicate: ListIteratorTypeGuard&lt;T, S&gt;
        ): S[];

        /**
         * @see _.filter
         */
        filter&lt;T&gt;(
            collection: List&lt;T&gt; | null | undefined,
            predicate?: ListIterateeCustom&lt;T, boolean&gt;
        ): T[];

        /**
         * @see _.filter
         */
        filter&lt;T extends object, S extends T[keyof T]&gt;(
            collection: T | null | undefined,
            predicate: ObjectIteratorTypeGuard&lt;T, S&gt;
        ): S[];

        /**
         * @see _.filter
         */
        filter&lt;T extends object&gt;(
            collection: T | null | undefined,
            predicate?: ObjectIterateeCustom&lt;T, boolean&gt;
        ): Array&lt;T[keyof T]&gt;;
    }"><pre class="notranslate">     <span class="pl-k">interface</span> <span class="pl-smi">LoDashStatic</span> <span class="pl-kos">{</span>
        <span class="pl-c">/**</span>
<span class="pl-c">         * Iterates over elements of collection, returning an array of all elements predicate returns truthy for. The</span>
<span class="pl-c">         * predicate is invoked with three arguments: (value, index|key, collection).</span>
<span class="pl-c">         *</span>
<span class="pl-c">         * <span class="pl-k">@param</span> collection The collection to iterate over.</span>
<span class="pl-c">         * <span class="pl-k">@param</span> predicate The function invoked per iteration.</span>
<span class="pl-c">         * <span class="pl-k">@return</span> Returns the new filtered array.</span>
<span class="pl-c">         */</span>
        <span class="pl-c1">filter</span><span class="pl-kos">(</span>
            <span class="pl-s1">collection</span>: <span class="pl-smi">string</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
            <span class="pl-s1">predicate</span>?: <span class="pl-smi">StringIterator</span><span class="pl-kos">&lt;</span><span class="pl-smi">boolean</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">)</span>: <span class="pl-smi">string</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

        <span class="pl-c">/**</span>
<span class="pl-c">         * <span class="pl-k">@see</span> _.filter</span>
<span class="pl-c">         */</span>
        <span class="pl-c1">filter</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">S</span> <span class="pl-k">extends</span> <span class="pl-smi">T</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
            <span class="pl-s1">collection</span>: <span class="pl-smi">List</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
            <span class="pl-s1">predicate</span>: <span class="pl-smi">ListIteratorTypeGuard</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">S</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">)</span>: <span class="pl-smi">S</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

        <span class="pl-c">/**</span>
<span class="pl-c">         * <span class="pl-k">@see</span> _.filter</span>
<span class="pl-c">         */</span>
        <span class="pl-c1">filter</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
            <span class="pl-s1">collection</span>: <span class="pl-smi">List</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
            <span class="pl-s1">predicate</span>?: <span class="pl-smi">ListIterateeCustom</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">boolean</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">)</span>: <span class="pl-smi">T</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

        <span class="pl-c">/**</span>
<span class="pl-c">         * <span class="pl-k">@see</span> _.filter</span>
<span class="pl-c">         */</span>
        <span class="pl-c1">filter</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-smi">object</span><span class="pl-kos">,</span> <span class="pl-smi">S</span> <span class="pl-k">extends</span> <span class="pl-smi">T</span><span class="pl-kos">[</span><span class="pl-k">keyof</span> <span class="pl-smi">T</span><span class="pl-kos">]</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
            <span class="pl-s1">collection</span>: <span class="pl-smi">T</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
            <span class="pl-s1">predicate</span>: <span class="pl-smi">ObjectIteratorTypeGuard</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">S</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">)</span>: <span class="pl-smi">S</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

        <span class="pl-c">/**</span>
<span class="pl-c">         * <span class="pl-k">@see</span> _.filter</span>
<span class="pl-c">         */</span>
        <span class="pl-c1">filter</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-smi">object</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
            <span class="pl-s1">collection</span>: <span class="pl-smi">T</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
            <span class="pl-s1">predicate</span>?: <span class="pl-smi">ObjectIterateeCustom</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">boolean</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">)</span>: <span class="pl-smi">Array</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">[</span><span class="pl-k">keyof</span> <span class="pl-smi">T</span><span class="pl-kos">]</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<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" 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/Igorbek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igorbek">@Igorbek</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igmat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igmat">@Igmat</a> @lavoaster @Kovensky</li>
</ul>
</li>
</ul>
<p dir="auto"><a href="https://www.styled-components.com/docs/api#typescript" rel="nofollow">One of the default examples</a> of how to use styled-components in Typescript seem to be broken.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import styled from 'styled-components';

interface LogoProps {
  /* This prop is optional, since TypeScript won't know that it's passed by the wrapper */
  className?: string;
}

class Logo extends React.Component&lt;LogoProps, {}&gt; {
  render() {
    return &lt;div className={this.props.className}&gt;Logo&lt;/div&gt;;
  }
}

const LogoStyled = styled(Logo)`
  font-family: 'Helvetica';
  font-weight: bold;
  font-size: 1.8rem;
`;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">styled</span> <span class="pl-k">from</span> <span class="pl-s">'styled-components'</span><span class="pl-kos">;</span>

<span class="pl-s1">interface</span> <span class="pl-v">LogoProps</span> <span class="pl-kos">{</span>
  <span class="pl-c">/* This prop is optional, since TypeScript won't know that it's passed by the wrapper */</span>
  <span class="pl-s1">className</span>?<span class="pl-s1"></span>: <span class="pl-s1">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">Logo</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-c1">&lt;</span><span class="pl-v">LogoProps</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Logo<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-v">LogoStyled</span> <span class="pl-c1">=</span> <span class="pl-en">styled</span><span class="pl-kos">(</span><span class="pl-v">Logo</span><span class="pl-kos">)</span><span class="pl-s">`</span>
<span class="pl-s">  font-family: 'Helvetica';</span>
<span class="pl-s">  font-weight: bold;</span>
<span class="pl-s">  font-size: 1.8rem;</span>
<span class="pl-s">`</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">It gives the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Argument of type 'typeof Logo' is not assignable to parameter of type 'ComponentType&lt;any&gt;'.
  Type 'typeof Logo' is not assignable to type 'ComponentClass&lt;any, any&gt;'.
    Types of property 'contextType' are incompatible.
      Type 'React.Context&lt;any&gt; | undefined' is not assignable to type 'import(&quot;/node_modules/@types/react-dom/node_modules/@types/react/index&quot;).Context&lt;any&gt; | undefined'.
        Type 'React.Context&lt;any&gt;' is not assignable to type 'import(&quot;/node_modules/@types/react-dom/node_modules/@types/react/index&quot;).Context&lt;any&gt;'.ts(2345)
class Logo"><pre class="notranslate"><code class="notranslate">Argument of type 'typeof Logo' is not assignable to parameter of type 'ComponentType&lt;any&gt;'.
  Type 'typeof Logo' is not assignable to type 'ComponentClass&lt;any, any&gt;'.
    Types of property 'contextType' are incompatible.
      Type 'React.Context&lt;any&gt; | undefined' is not assignable to type 'import("/node_modules/@types/react-dom/node_modules/@types/react/index").Context&lt;any&gt; | undefined'.
        Type 'React.Context&lt;any&gt;' is not assignable to type 'import("/node_modules/@types/react-dom/node_modules/@types/react/index").Context&lt;any&gt;'.ts(2345)
class Logo
</code></pre></div>
<p dir="auto">Dependencies:</p>
<ul dir="auto">
<li><code class="notranslate">@types/styled-components@4.1.4</code></li>
<li><code class="notranslate">@types/react@16.7.17</code></li>
</ul>