Getting started with TypeScript and React Native

Hola hola,

Using TypeScript in your React Native (RN) projects can seem like a daunting task - and it definitely can be. I would recommend experimenting/practicing in a fresh RN project before updating your production app to TypeScript.

Getting Started

Here is a fresh repo created using the the command found here.

JSX

One good thing about this endeavor is that our JSX (the stuff between the return ()) won't change much.

JavaScript Component (.js)

Let's take a look at a very simple JS component that accepts in a text prop and displays that inside of a simple <Text> component.

const MyTextComponent = (props) => {
  const {text} = props;

  return (
    <Text>{text}</Text>
  );
}

TypeScript Component (.tsx)

Here's the same exact component but using TS. You'll notice that not much has changed within the actual component.

type Props = {
 text: string;
};

const MyTextComponent = (props: Props) => {
  const {text} = props;

  return (
    <Text>{text}</Text>
  );
}

All we're doing differently is saying that the props passed to MyTextComponent should contain only one property called text and that prop should be a string.

This set of rules will let us know that there is an issue if we try to do the following:

<MyTextComponent text={5} />

Will the above crash? No. But, it will alert us right away.

TypeScript With Local State

Here is how we can update our local state (useState) to utilize TypeScript.

import {TextInput, TouchableOpacity} from 'react-native';

const MyTextInputComponent = () => {
  // const [text, setText] = useState(''); // JS version
  const [text, setText] = useState<string>(''); // TS version

  const incrementText = () => {
    setText(oldVal => oldVal + 1); // TS will yell at us here
  };

  return (
    <>
      <TextInput onChangeText={setText} value={text} />
      <TouchableOpacity onPress={incrementText}>
        <Text>Increment Text</Text>
      </TouchableOpacity>
    </>
  );
}

In the above example, we set a type for our local state by using the angle bracket notation to say that this text value should only be a string.

Why would TS yell at us for the incrementText() button?
TS knows that the text prop is a string. When we write code like setText(oldVal => oldVal + 1); which is adding 1 to the old text value TS will warn us that we cannot add a Number and a string.

.ts vs .tsx

You'll see both of these files. .ts files are used for non-UI logic (i.e., stuff not within a return() statement). In order to display a UI component (like <View>, <Text>, and etc you need to make sure that you are in a .tsx file.

Summary

• I don't recommend adding TypeScript to a production app if it's your first time
• Your JSX will mostly stay the same
• TypeScript is your friend

Happy coding!

• Matt