How is this type annotation working in React code without TypeScript?

by

What you are seeing is not a type annotation, but a property in an object pattern. Let’s simplify your example to help see what is going on.

Here’s a function that is easy to understand:

f = (h) => [h.x, h.y]

The function f takes in an object h and returns an array with h.x and h.y. Now in modern JavaScript one does not have to pass in an object and break it all apart in the function body. Instead, we make the parameter section of the function be a pattern so that we don’t need to bother with that h variable at all. So we could rewrite it like this (in a way that parallels your example):

f = ({x: xValue, y: yValue}) => [xValue, yValue]

So, exactly like before, you can pass to f any object that has x and y properties and it will return an array of the values at those properties.

Here it is in action:

> f = (h) => [h.x, h.y]
[Function: f]
> f({x:1, y:2, z:3})
[ 1, 2 ]
> f = ({x: xValue, y: yValue}) => [xValue, yValue]
[Function: f]
> f({x:1, y:2, z:3})
[ 1, 2 ]

As an aside, normally one would skip the xValue and yValue part and have:

f = ({x: x, y: y}) => [x, y]

which due to shorthand property notation is just:

f = ({x, y}) => [x, y]

but as @BhojendraRauniyar writes in another answer, there are capitalization conventions in the framework this code is being used with.

More Related Contents:

  1. React-router URLs don’t work when refreshing or writing manually
  2. Programmatically Navigate using react-router
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. Pass props in Link react-router
  5. How to use Redirect in version 5 of react-router-dom of Reactjs
  6. react-router scroll to top on every transition
  7. React Router with optional path parameter
  8. Use anchors with react-router
  9. Intercept/handle browser’s back button in React-router?
  10. React Routing works in local machine but not Heroku
  11. React doesn’t reload component data on route param change or query change
  12. react-router getting this.props.location in child components
  13. Get path params in react-router v4
  14. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  15. Client Routing (using react-router) and Server-Side Routing
  16. Multiple Nested Routes in react-router-dom v4
  17. How do I reload a page with react-router?
  18. How to sync Redux state and url hash tag params
  19. onEnter not called in React-Router
  20. react-router go back a page how do you configure history?
  21. Matched leaf route at location “/” does not have an element
  22. How to manually invoke Link in React-router?
  23. How to create a protected route with react-router-dom?
  24. Material-ui adding Link component from react-router
  25. How to use normal anchor links with react-router
  26. React router global header
  27. React: ‘Redirect’ is not exported from ‘react-router-dom’
  28. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  29. On React Router, how to stay logged in state even page refresh?
  30. ReactJS Bootstrap Navbar and Routing not working together

Leave a Comment