Custom properties not recognized through TypeScript in theme ( ts(2339) )

[404mat]

Description

Hi ! I installed the package as per the documentation, but when i try to use the colors and other properties I added into the stylesheets, I get a TypeScript error as if the property does not exist. The code compiles and the colors appear fine in the simulator I'm using, but my files appear as containing this type error.

Here is my config :

Here is my theme :

I use the spread operator to include my design system into the object, but the final object looks something like this (just to let you know, the error still exists even when I dont use the spread operator and I input the values manually):

Here is the type error :

Let me know if you want more info about the config, I can give it to you. To also note : this issue resembles this other one : https://github.com/jpudysz/react-native-unistyles/issues/228 , but I'm on VSCode, and I neither use useInitialTheme nor adaptiveThemes in my codebase.

Steps to reproduce

1. Create an app using Expo
2. Install react-native-unistyles
3. Create theme.ts and unistyles.ts files, and configure like the documentation, and import into the App.tsx
4. try and use one of the theme properties in a stylesheet provided by the library (createStyleSheet)

Snack or a link to a repository (optional)

No response

Unistyles version

2.9.1

React Native version

0.74.5

Platforms

iOS

Engine

Hermes

Architecture

Fabric (new)

[jpudysz]

Whatever you spread mark it type as "as const" for TypeScript.

https://www.totaltypescript.com/concepts/as-const

[404mat]

Thanks for your response ! I tried your suggestion but no success. I took a bit of time to try and reproduce the problem and show it to you. You can find it here : https://github.com/404mat/rn-unistyles-ts-problem I tried this reproduction on 3 computers (2 Windows,1 Mac) and TypeScript struggles in the 3 cases.

(Also thanks for the link, seems like a good resource)

[404mat]

I've kept searching for a resolution to this case after work, and found something that may be a clue, I don't really know. There are 2 objects that are separated by the pipe operator, the first of which appears to contain the properties I've defined (commonWhite and commonBlack). But I still don't know why TypeScript does not recognize the first object as valid.

Even when I change or add values to this, they do not appear at all in the second object, which lead me to think those are default fallback values. Do you think this could be the case ?

[404mat]

Found it...

The issue here is that the theme.colors object is a union type, meaning it can be one of two possible types : lightTheme or darkTheme. If lightTheme has a property that darkTheme does not have, TypeScript will complain because (if I understand correctly) at runtime, it could be either of those and if one of theme is not defined then boom.

Being in the early phase of development, I only focused on lightTheme for now, which is why both did not match exactly.

I think this example should be added to the documentation, so that the warning for objects of different shapes is more explicit (also a call for myself to read the documentation harder if I have an issue 😄 )

I don't know if you have a public repo for the doc, if you don't have time to think about this I could make a pull request with the changes and show it to you. let me know !

Fell free to close this issue if you want @jpudysz !

[jpudysz]

makes total sense ;) I've never used different shapes. Although it's possible in v.2.x and 3.x it's still not recommended. Now you found real reason why!

I will happily accept the PR, you can edit "Tip" with more details. Documentation lives under docs folder and it's written in Astro.