Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Typescript] Trans component's additional props #1011

Closed
pcorpet opened this issue Nov 30, 2019 · 1 comment · Fixed by #1019
Closed

[Typescript] Trans component's additional props #1011

pcorpet opened this issue Nov 30, 2019 · 1 comment · Fixed by #1019
Assignees

Comments

@pcorpet
Copy link
Contributor

pcorpet commented Nov 30, 2019

Describe the bug
When Trans has a parent component (either because it's set as a prop, or because the configuration has one by default), it forwards its additional props (the one it does not consume) to that object. However in Typescript, this ends up with an error like:

error TS2322: Type '{ children: string; style: CSSProperties; parent: string; }' is not assignable to type 'IntrinsicAttributes & TransProps'.
  Property 'style' does not exist on type 'IntrinsicAttributes & TransProps'.

Occurs in react-i18next version
11.2.5

To Reproduce

Create a simple react-i18next Typescript strictly typed app and use a component:

<Trans parent="div" style={{color: 'green'}}>
  Hello world, React is super green
</Trans>

This works as I expect it to work at runtime (it creates a div, and style the text in green). However Typescript Compiler chokes on it with:

error TS2322: Type '{ children: string; style: CSSProperties; parent: string; }' is not assignable to type 'IntrinsicAttributes & TransProps'.
  Property 'style' does not exist on type 'IntrinsicAttributes & TransProps'.

Expected behaviour

I'd expect to accept the additional props happily. As a first step I would be fine if Trans was not checking those additional props, it's even better if it manages to check their types properly but I doubt it's doable especially if the parent is set in the config.

OS (please complete the following information):

@pcorpet
Copy link
Contributor Author

pcorpet commented Nov 30, 2019

For what it's worth, here's how I've patched it in my code:

const TransAsElement = Trans as React.FC<TransProps & React.HTMLProps<Element>>

which accepts all the additional props I'm setting on it while still type checking the types of those props.

However it still accepts them if I write

<TransAsElement parent="" style={{color: 'green'}}>
 translated text
</TransAsElement>

where it shouldn't.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants