Closed efoken closed 1 year ago
Thanks for your issue, I'll work on it . As a curious fact, I refactored the types to add to the Atomico pipeline a validation of use cases through Typescript.
I will inform you when the new version is available with this fix
Ready, fix available in version 1.62.2
Thank you for the quick fix, but we are still having some type issues with our components 😢
useProp
:
const [date, setDate] = useProp<Date>('date');
const newDate = new Date();
setDate(newDate);
Argument of type 'Date' is not assignable to parameter of type '((state: undefined) => undefined) & ((state: null) => null) & (Date | ((state: Date) => Date))'.
const [expanded, setExpanded] = useProp<boolean>('expanded');
setExpanded((prevExpanded) => !prevExpanded);
Parameter 'prevExpanded' implicitly has an 'any' type.
useState
:
We have a PinInput
component for entering 4-digit or 6-digit codes and we use useState
for setting the current array of values and we use a type with fixed array length:
const [values, setValues] = useState<
[number, number, number, number] | [number, number, number, number, number, number]
>([1, 2, 3, 4]);
// ...
setValues([0, 0, 0, 0]);
Argument of type '[number, number, number, number]' is not assignable to parameter of type '([number, number, number, number] & ((state: [number, number, number, number, number, number]) => [number, number, number, number, number, number])) | (((state: [number, number, number, number]) => [...]) & [...]) | (((state: [...]) => [...]) & ((state: [...]) => [...]))'.
This worked before 1.62.0
I think all other issues we have are related to those two, especially the first one.
Thanks for notifying it, I have already fixed it in 1.62.3, I have also added the cases you share to the typescript validation pipeline before publication
I will keep an eye on your Atomico update status 🤓
Okay seems to work now, with one little change that I did. But I'm not sure about that one... maybe you can help me.
Before:
const [value, setValue] = useProp<string>('value');
const handleChange = (event: Event) => {
setValue((event.currentTarget as HTMLElement).getAttribute('value'));
}
The getAttribute('value')
has a return type of string | null
. So I got an error which makes sense:
Type 'null' is not assignable to type 'string | ((reduce: string) => string)'.
So I changed this to:
const [value, setValue] = useProp<string>('value');
const handleChange = (event: Event) => {
setValue((event.currentTarget as HTMLElement).getAttribute('value') ?? '');
}
But what's the correct way here? Should I set the prop to null
or an empty string?
Thanks for reporting, I've fixed it in version 1.62.4, how about we improve the development experience with the following change:
Now
const [ value, setValue ] = useProp<number>("prop");
setValue(null) // TS ✅
setValue(undefined) // TS ✅
setValue((value = 0 )=>value+1) // TS ⚠️, value can be null
Proposal
setValue((value = 0 )=>value+1) // TS ✅
This allows all setStates as reducers to have default parameters.
Nice thanks 🙏
Yeah I guess that would be a nice change, I never thought about passing default parameters like that, nice 👍
I just received this news https://ibmix.de/en/blog/red-dot-design-award-for-barmer/, Congratulations🎉
@efoken would be pleased to have your presence on the Discord channel to learn more about your user experience.
Personally, I would very much like to be able to share your case more extensively on the Atomico site, I can create a space on github discussions to document your case, are you okay with that?
Thank you 🎉
I am currently not active on Discord, but sure I can join your channel.
And of course you can create a discussion space for us, I can also invite the other developers to contribute in documenting our case.
Ready👍, I have already created the space to learn more about its use case, https://github.com/atomicojs/atomico/discussions/92 I will be happy that you are there and can add the other developers. for my part I will be adding questions over the course of the week
Describe the bug Since Atomico 1.62.0 many types of hooks are broken. Some errors:
useCallback
:useProp
does not accept callbacks anymore:To Reproduce Steps to reproduce the behavior:
Expected behavior No TypeScript errors.
Additional context I checked you types for the hooks and what you have changed.
With the assignment the
CallbackMemo
gets lost, thoughuseCallback
is of typeuseCallback<() => any>(callback: () => any, args?: any[] | undefined): () => any