The Startup
Published in

The Startup

From JavaScript to TypeScript w/React & React Native: Your First Typed Component

This is the article for you if you are trying to create your first typed component in React/React-Native.

Our Component in JavaScript (JSX)

  • Consider the <TouchableOpacity> component equivalent to a <a> HTML element. This is essentially creating a button.
  • Consider the <Text> component nested inside of the <TouchableOpacity> component to be text with your <a> element.

Our Component in TypeScript (TSX)

Back to our type definition…

type Button100x30Props = {}

text: string | number

disable?: boolean

onPress?: () => void

containerStyle?: ViewStyle

Applying our Type Definition

  • Code completion for things like “what were all the available props for this component?” or “what value can this prop attribute have?”
  • Error messages when you invoke your component with invalid props.

One More Thing… Default Arguments

  • Don’t specify default values for require parameters.
  • In some circumstances, IDEs are not smart enough to properly parse out default arguments yet for code completion, etc. If you find yourself encountering this problem there is another approach involving something called DefaultProps that we will look at in another article.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Dunn

We can only win as a nation when we stop believing it will require some of our neighbors to lose.