<p dir="auto">If you know how to fix the issue, make a pull request instead.</p>
<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: <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 <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Jessidhia/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Jessidhia">@Jessidhia</a></li>
</ul>
</li>
</ul>
<p dir="auto">I initially asked on <a href="https://stackoverflow.com/questions/55912367/how-do-i-set-attributes-using-prop-values-in-styled-components-v4-typescript?" rel="nofollow">Stack Overflow</a>, but posting here with the hopes I can get a little more traction.</p>
<h1 dir="auto">Summary</h1>
<p dir="auto"><strong>Given:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const Link = styled.a`
  border: solid 1px black;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 5px;
`;

type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;;
const LinkAsButton = styled(Link).attrs&lt;ButtonProps&gt;
&gt;(({
  as: 'button',
  className: 'btn btn-primary'
})`
  border: solid 1px red;
`;"><pre class="notranslate"><code class="notranslate">const Link = styled.a`
  border: solid 1px black;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 5px;
`;

type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;;
const LinkAsButton = styled(Link).attrs&lt;ButtonProps&gt;
&gt;(({
  as: 'button',
  className: 'btn btn-primary'
})`
  border: solid 1px red;
`;
</code></pre></div>
<p dir="auto"><strong>How do I pass button specific props (e.g. disabled) to <code class="notranslate">LinkAsButton</code>?</strong></p>
<p dir="auto">Repo (includes branch for v3 and v4) demonstrating issue:  <a href="https://github.com/arteforme/v3-v4-styled-components-migration">https://github.com/arteforme/v3-v4-styled-components-migration</a></p>
<h1 dir="auto">Version 3</h1>
<p dir="auto">In v3, I'm able to do the following:</p>
<p dir="auto"><strong>package.json</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
    &quot;@types/react&quot;: &quot;^16.8.8&quot;,
    &quot;@types/react-dom&quot;: &quot;^16.8.2&quot;,
    &quot;react&quot;: &quot;^16.8.4&quot;,
    &quot;react-dom&quot;: &quot;^16.8.4&quot;,
    &quot;react-scripts&quot;: &quot;2.1.8&quot;,
    &quot;styled-components&quot;: &quot;^3.3.3&quot;,
    &quot;typescript&quot;: &quot;^3.3.3333&quot;
  }"><pre class="notranslate"><code class="notranslate">"dependencies": {
    "@types/react": "^16.8.8",
    "@types/react-dom": "^16.8.2",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8",
    "styled-components": "^3.3.3",
    "typescript": "^3.3.3333"
  }
</code></pre></div>
<p dir="auto"><strong>Component definition</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;;

const Link = styled.a`
  border: solid 1px black;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 5px;
`;

const LinkAsButton = Link.withComponent('button')
  .extend.attrs&lt;ButtonProps&gt;({
  className: 'btn btn-primary'
})`
  border: solid 1px red;
`;"><pre class="notranslate"><code class="notranslate">type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;;

const Link = styled.a`
  border: solid 1px black;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 5px;
`;

const LinkAsButton = Link.withComponent('button')
  .extend.attrs&lt;ButtonProps&gt;({
  className: 'btn btn-primary'
})`
  border: solid 1px red;
`;
</code></pre></div>
<p dir="auto">and in consuming code, I can specify button specific props (e.g. disabled, form, etc) on the <code class="notranslate">LinkAsButton</code> component.</p>
<h1 dir="auto">Version 4</h1>
<p dir="auto">In v4, I'd like to achieve the same; however, I've not been successful in determining how to go about doing so.  Per the latest documentation, I've updated <code class="notranslate">LinkAsButton</code> to no longer call <code class="notranslate">extend</code> or <code class="notranslate">withComponent</code> and instead wrap <code class="notranslate">Link</code> in a call to <code class="notranslate">styled</code> and uses <code class="notranslate">as</code> to specify the tag.  The v4 version looks like:</p>
<p dir="auto"><strong>package.json</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="dependencies&quot;: {
    &quot;@types/react&quot;: &quot;^16.8.14&quot;,
    &quot;@types/styled-components&quot;: &quot;^4.1.14&quot;,
    &quot;react&quot;: &quot;^16.8.6&quot;,
    &quot;react-dom&quot;: &quot;^16.8.6&quot;,
    &quot;react-scripts&quot;: &quot;2.1.8&quot;,
    &quot;styled-components&quot;: &quot;^4.2.0&quot;,
    &quot;typescript&quot;: &quot;^3.4.5&quot;
  }"><pre class="notranslate"><code class="notranslate">dependencies": {
    "@types/react": "^16.8.14",
    "@types/styled-components": "^4.1.14",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8",
    "styled-components": "^4.2.0",
    "typescript": "^3.4.5"
  }
</code></pre></div>
<p dir="auto"><strong>Component definition</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const LinkAsButton = styled(Link).attrs&lt;ButtonProps&gt;
&gt;(({
  as: 'button',
  className: 'btn btn-primary'
})`
  border: solid 1px red;
`;"><pre class="notranslate"><code class="notranslate">const LinkAsButton = styled(Link).attrs&lt;ButtonProps&gt;
&gt;(({
  as: 'button',
  className: 'btn btn-primary'
})`
  border: solid 1px red;
`;
</code></pre></div>
<p dir="auto">and in consuming code, I specify <code class="notranslate">disabled={true}</code> on a <code class="notranslate">LinkAsButton</code> instance, but this does not compile.  Instead, the following error results:</p>
<p dir="auto"><em>Property 'disabled' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;AnchorHTMLAttributes, HTMLAnchorElement&gt;, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 257 more ... | "referrerPolicy"&gt; &amp; { ...; }, "type" | ... 261 more ... | "referrerPolicy"&gt; &amp; Partial&lt;...&gt;, "type" | ....'.  TS2322</em></p>
<h2 dir="auto">Reviewing attrs definition</h2>
<p dir="auto">Taking a look at the definition file, I notice that two generic arguments can be specified.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="attrs &lt;
  U,
  NewA extends Partial&lt;StyledComponentPropsWithRef&lt;C&gt; &amp; U&gt; &amp; {
    [others: string]: any;
  } = {}
    &gt; (
      attrs: Attrs&lt;StyledComponentPropsWithRef&lt;C&gt; &amp; U, NewA, T&gt;
    ): ThemedStyledFunction&lt;C, T, O &amp; NewA, A | keyof NewA&gt;;"><pre class="notranslate"><code class="notranslate">attrs &lt;
  U,
  NewA extends Partial&lt;StyledComponentPropsWithRef&lt;C&gt; &amp; U&gt; &amp; {
    [others: string]: any;
  } = {}
    &gt; (
      attrs: Attrs&lt;StyledComponentPropsWithRef&lt;C&gt; &amp; U, NewA, T&gt;
    ): ThemedStyledFunction&lt;C, T, O &amp; NewA, A | keyof NewA&gt;;
</code></pre></div>
<p dir="auto">From what I can gather, <code class="notranslate">C</code> is the wrapped component and I believe <code class="notranslate">NewA</code> is NewAttributes.  I'm not able to determine what U is in this case, but I try specifying the second generic parameter.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const LinkAsButton = styled(AnchorLink).attrs&lt;{}, ButtonProps&gt;`
  // omitted for brevity
`"><pre class="notranslate"><code class="notranslate">const LinkAsButton = styled(AnchorLink).attrs&lt;{}, ButtonProps&gt;`
  // omitted for brevity
`
</code></pre></div>
<p dir="auto">And in doing so, that results in the following error:</p>
<p dir="auto"><em>Type 'ButtonHTMLAttributes' is not assignable to type 'Partial&lt;Pick&lt;DetailedHTMLProps&lt;AnchorHTMLAttributes, HTMLAnchorElement&gt;, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 257 more ... | "referrerPolicy"&gt; &amp; { ...; } &amp; ButtonHTMLAttributes&lt;...&gt;&gt;'.<br>
Types of property 'onCopy' are incompatible.</em></p>
<p dir="auto">With that information in hand, I try:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const LinkAsButton = styled(Link).attrs&lt;
  {},
  { as: string; className: string; disabled?: boolean }
&gt;({
  as: 'button',
  className: 'btn btn-primary'
})``;"><pre class="notranslate"><code class="notranslate">const LinkAsButton = styled(Link).attrs&lt;
  {},
  { as: string; className: string; disabled?: boolean }
&gt;({
  as: 'button',
  className: 'btn btn-primary'
})``;
</code></pre></div>
<p dir="auto">Which works as I can now specify <code class="notranslate">disabled</code> in the markup, but not any other button specific props (e.g. <code class="notranslate">form</code>)</p>
<h1 dir="auto">Non ideal solution</h1>
<p dir="auto">One approach would be to do the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const LinkAsButton = styled(Link)&lt;ButtonProps&gt;`
  border: solid 1px red;
`;"><pre class="notranslate"><code class="notranslate">const LinkAsButton = styled(Link)&lt;ButtonProps&gt;`
  border: solid 1px red;
`;
</code></pre></div>
<p dir="auto">Consuming code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div className=&quot;App&quot;&gt;    
    &lt;LinkAsButton as=&quot;button&quot; className=&quot;btn-btn-primary&quot; disabled={true}&gt;
        First button
    &lt;/LinkAsButton&gt;
    &lt;LinkAsButton as=&quot;button&quot; className=&quot;btn-btn-primary&quot; disabled={true}&gt;
        Second button
    &lt;/LinkAsButton&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div className="App"&gt;    
    &lt;LinkAsButton as="button" className="btn-btn-primary" disabled={true}&gt;
        First button
    &lt;/LinkAsButton&gt;
    &lt;LinkAsButton as="button" className="btn-btn-primary" disabled={true}&gt;
        Second button
    &lt;/LinkAsButton&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">However, this would lead to a lot of code duplication :(.</p>
<p dir="auto">Sorry I don't have much more info as I can't currently spend time investigating the root cause but I thought I would bring this discussion to your attention <a href="http://stackoverflow.com/questions/41232228/running-npm-start-fails-due-to-error" rel="nofollow">http://stackoverflow.com/questions/41232228/running-npm-start-fails-due-to-error</a></p>
<p dir="auto">I have used the workaround suggested in that link to be able to continue using protractor.</p>