question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript checking error

See original GitHub issue
import * as React from 'react'
import styled from 'styled-components'

interface ISVGIconProps {
  color: string,
  children: React.ReactNode,
  titleAccess: boolean,
  size: string,
  viewBox: string
}

const SVG = styled.svg`
  display: inline-block;
  fill: currentColor;
  height: ${(p: any) => p.size};
  width: ${(p: any) => p.size};
  user-select: none;
  flex-shrink: 0;
  color: ${(p: any) => p.color};
  transition: ${(p: any) => p.theme.transition.create('fill', { duration: p.theme.transition.durations.shorter })};
`

export const SVGIcon: React.StatelessComponent<ISVGIconProps> = (props) => {
  const { titleAccess, children, size, ...others } = props

  return (
    <SVG
      width={size}
      height={size}
      // @ts-ignore
      size={size} // <--- this is the issue
      focusable="false"
      aria-hidden={titleAccess ? 'false' : 'true'}
      {...others}
    >
      {titleAccess ? <title>{titleAccess}</title> : null}
      {children}
    </SVG>
  )
}

SVGIcon.defaultProps = {
  color: 'inherit',
  size: '1.5em',
  viewBox: '0 0 24 24'
}

[ts] Property 'size' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<SVGProps<SVGSVGEl...'.

Basically any attribute that do not belongs to specific element (whatever that means because after custom element we do not need to do data- anymore but I guess make sense to the old elements?!)

Typescript will complains that any extra attribute I add for the propose of using it in my styled component it will rise this issue.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:22 (3 by maintainers)

github_iconTop GitHub Comments

36reactions
yordiscommented, Jan 23, 2018

@DogPawHat no joke

npm uninstall typescript

I gave up to Typescript, productivity is more valuable for me than preventing issues that I do not face.

No more Typescript, best scenario flow for props validation and I am thinking on using prop-types for that even.

6reactions
AntonioRedondocommented, May 2, 2018

The TypeScript fix for this issue has been merged into Master and it can be used with the next npm version. Any example guys from the style-components team to fix the IntrinsicAttributes... error?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Improving TypeScript error handling with exhaustive type ...
When handing functions that can return multiple errors, it can be helpful to provide type checks for covering all error cases. Doing so...
Read more >
How to check TypeScript code for syntax errors from a ...
I have a code that generates TypeScript classes, and as a build/test step, I would like to check the generated files for syntax...
Read more >
Documentation - Understanding Errors - TypeScript
TypeScript found an error when checking the last line. Its logic for issuing an error follows from its logic for determining if the...
Read more >
Get a catch block error message with TypeScript - Kent C. Dodds
TypeScript forces you to acknowledge you can't know what was thrown making getting the error message a pain. Here's how you can manage...
Read more >
Simple and maintainable error-handling in TypeScript
At Supermetrics one error-handling approach we take is to encode error states into the TypeScript type system. What does this mean? Simply, I'm ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found