Recent typescript upgrade resulted in state subfields possibly being undefined

Hi!

So I went back to MoonPiano and upgraded a bunch of dependencies, most importantly:

-    "@hookstate/core": "^1.4.1",
-    "@hookstate/persistence": "^1.2.2",
+    "@hookstate/core": "^1.7.0",
+    "@hookstate/persistence": "^1.5.2",

-    "npm": "^6.13.6",
+    "npm": "^6.14.2",
-    "react": "^16.12.0", 
+    "react": "^16.13.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.0",

-    "typescript": "^3.7.4",
-    "webpack": "^4.41.5",
 -   "webpack-cli": "^3.3.10"
+   "typescript": "^3.8.3",
+   "webpack": "^4.42.0",
+   "webpack-cli": "^3.3.11"

And then, whenever I access nested field of any state, typescripts adds the possiblity of it being defined, i.e:

assuming user is a StateLink with field friends: UserFriends[].

The following code no longer works:

const friends = user.nested.friends.get().map(e => e.id)

Typescript now assumes user.nested.friends is of type friends: StateLink<UserFriendInterface[] | undefined>

Thus in order for it to work, I have to manually cast it to:

const friends = (user.nested.friends as StateLink<UserFriendInterface[]>).get().map(e => e.id)

I am not saying the problem is with hookstate, but I could really use some help on how to solve this without major changes, because I use HookState all over the place! The number of times i access the nested field of a state is 267 in a total of 33 files 😅

Cheers!

[avkonst]

No worries. Glad it helped. I am not sure about the config, but I think the difference is in the strict mode.

BTW. Look at the StateLink.denull() function, it may help you in some other cases where undefined is still a legitimate case.

On Fri, Mar 13, 2020 at 1:39 PM Soulaymen Chouri [e-mail] wrote:

Thank you very much for providing the demo! My first guess was that tsconfig.json is the only thing that we might have differently. And it was the case. After updating my project tsconfig, all hookstate related errors are gone.

This is the one that worked for me (copied from your demo and adapted to my project)

{

“compilerOptions”: {

"baseUrl": ".",

"paths": {

  "@/*": ["src/*"],

  "@public/*": ["public/*"],

  "@main/*": ["src/main/*"],

  "@models/*": ["src/models/*"],

  "@renderer*/": ["src/renderer/*"],

  "@utils/*": ["src/utils/*"]

},

"allowJs": true,

"skipLibCheck": true,

"esModuleInterop": true,

"allowSyntheticDefaultImports": true,

"strict": true,

"forceConsistentCasingInFileNames": true,

"module": "esnext",

"moduleResolution": "node",

"resolveJsonModule": true,

"isolatedModules": true,

"noEmit": true,

"jsx": "react"

}

}

And this is the original one that I had

{

“compilerOptions”: {

"allowSyntheticDefaultImports": true,

"jsx": "react",

"baseUrl": ".",

"paths": {

  "@/*": ["src/*"],

  "@public/*": ["public/*"],

  "@main/*": ["src/main/*"],

  "@models/*": ["src/models/*"],

  "@renderer*/": ["src/renderer/*"],

  "@utils/*": ["src/utils/*"]

},

"module": "commonjs",

"moduleResolution": "node",

"noImplicitAny": true,

"noImplicitThis": true,

"strictNullChecks": true,

"sourceMap": true,

"target": "esnext",

"resolveJsonModule": true,

"esModuleInterop": true,

"allowJs": true,

}

}

I aplogize as this has nothing to do with hookstate 🙏 . And thank you one more time for saving the project! 🎹

I would love to hear your feedback however on what could have been wrong in my previous configuration.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/avkonst/hookstate/issues/42#issuecomment-598492157, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6JSVNT5GKDPG4QSTVWFQLRHF6FRANCNFSM4LGO3HCA .

[avkonst]

Regarding the injected undefined in the nested state link. I can not reproduce it. I have created the sample here https://github.com/avkonst/hookstate/blob/master/hookstate.js.org/demos/exp1/src/App.tsx

Nothing has changed for nested in recent releases. So not sure. Can it be inferred by something else? Could you double check the type of the parent link? Will the following compile in your code?

const userStateWithDefiniteFriendsProp: StateLink<{ friends: UserFriends[] }> = user;