Hyperapp: Type checking for props

[fralonra]

I love this framework and wish to use it in more projects.

But I am wondering is there a recommanded way to do type checking for props (It is very important in some cases) like what prop-types do.

I konw it is not a good idea to embed this functionality into the main library, but writing a plugin may be fine.

[jorgebucaran]

@fralonra What about using TypeScript or flow?

[fralonra]

@jorgebucaran Thanks! I would like to try flow first.

[okwolf]

I would say prop-types is a very different solution to type checking than something like TypeScript. The former doesn't require adding a build step and it emits warnings you can fix at your own leisure at runtime instead of errors that break the build.

I've thought about looking into how Hyperapp could add support for prop-types with a third party solution. It may or may not work for component props depending on if they are lazy going forward, but it should definately work fine for validating state values.

[alber70g]

I referenced a PR with this issue. This was a mistake. Please ignore this one Fix typing issue with Component<>

[selfup]

@okwolf so I guess with 2.0 we can apply "prop-types" as middleware.

Either dynamic import in non prod, or just no checks in prod given the lib is small enough 🙏

[rbiggs]

Well, if you are using VSCode, you can turn on TypeScript type checking for plain ole JavaScript. Then you can turbo charge your JavaScript with JSDoc comments to define all your types, create custom types and even do type casting with params and props. Just add this to your user settings in VSCode:

"javascript.implicitProjectConfig.checkJs": true

That tells VSCode to turn on TypeScript type checking. By default it will use any JSDoc comments to understand you code's types. This will give you:

• Intellisense on hover
• Code Completion on tab
• Go to Definition
• Peek Definition
• Go to Type Definition
• Find All References
• Rename Symbol across files
  As you can see, you get all the benefits of TypeScript in JavaScript without the build step. Win win.

[rbiggs]

By the way, this also provides live type checking like with TypeScript, flags unused variables, typos, wrong use of types, wrong number of parameters, wrong types for parameters, etc.

[jorgebucaran]

@fralonra Did you have a chance to check flow and what was your impression?

@okwolf What would such a third-party solution look like? Is this something like how you use create-react-app with Hyperapp in cra-hyperapp?

[fralonra]

@jorgebucaran flow is good, but as what @okwolf mentioned above, it seems to be different from prop-types which is a runtime type checker.

Btw, what about flow runtime? I haven't tried it yet.

[jorgebucaran]

Cool! @fralonra What else do we need to resolve here?

[fralonra]

@jorgebucaran Nothing. Thanks.

[jorgebucaran]

@fralonra Thank you! I'm still not clear about what's the relation between flow and prop-types. I understand flow is a type checker, like a minimal, stripped down, savage version of a TS subset. Is prop-types something even narrower in scope?

[rbiggs]

The docs: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

[jorgebucaran]

Thanks!