Typescript checking error
See original GitHub issueimport * 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:
- Created 6 years ago
- Reactions:5
- Comments:22 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@DogPawHat no joke
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 usingprop-types
for that even.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 thestyle-components
team to fix theIntrinsicAttributes...
error?