TypeScript in React Native: Your Safety Net for Building Apps 🛡️

Imagine you’re building with LEGO blocks. Regular JavaScript is like having blocks with no labels—you might accidentally put a wheel where a window should go. TypeScript is like having blocks with clear labels that say “this is a wheel” or “this is a window.” It helps you put the right pieces in the right places!

What is TypeScript?

TypeScript is JavaScript’s helpful big sibling. It checks your code BEFORE you run it, catching mistakes early.

Think of it like a spell-checker for your code. Just like how spell-check underlines misspelled words, TypeScript underlines code mistakes!

graph TD
    A[You Write Code] --> B{TypeScript Checks}
    B -->|Mistakes Found| C[Shows Errors Early]
    B -->|All Good| D[Code Runs Safely]
    C --> E[You Fix It]
    E --> B

1. TypeScript Setup

Getting Started is Easy!

When you create a new React Native project, you can choose TypeScript from the start.

Creating a new project with TypeScript:

npx react-native init MyApp
  --template react-native-template-typescript

Or add TypeScript to an existing project:

npm install typescript
  @types/react
  @types/react-native

The Config File: tsconfig.json

This file tells TypeScript how strict to be. Think of it as setting the rules for your spell-checker.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "skipLibCheck": true
  }
}

What these mean:

• strict: true → Be very careful, check everything!
• jsx: "react-native" → We’re writing mobile apps

2. TypeScript Components

Your First TypeScript Component

Remember: components are like recipe cards. TypeScript makes sure you follow the recipe correctly!

A Simple Component:

import React from 'react';
import { View, Text } from 'react-native';

const Greeting = () => {
  return (
    <View>
      <Text>Hello, Friend!</Text>
    </View>
  );
};

export default Greeting;

Adding Types to Components

Functional Component with Type:

import React from 'react';
import { Text } from 'react-native';

// FC means "Functional Component"
const Welcome: React.FC = () => {
  return <Text>Welcome!</Text>;
};

Class Components with Types

import React, { Component } from 'react';
import { Text } from 'react-native';

// State and Props types defined
interface State {
  count: number;
}

class Counter extends Component<{}, State> {
  state: State = { count: 0 };

  render() {
    return <Text>{this.state.count}</Text>;
  }
}

3. TypeScript Props

What are Props?

Props are like ingredients you pass to your recipe (component). TypeScript makes sure you pass the RIGHT ingredients!

Without TypeScript (Risky!):

// No checking - anything can be passed
const Card = (props) => {
  return <Text>{props.title}</Text>;
};

With TypeScript (Safe!):

// TypeScript checks that title is a string
interface CardProps {
  title: string;
  subtitle?: string; // ? means optional
}

const Card = (props: CardProps) => {
  return <Text>{props.title}</Text>;
};

Different Ways to Define Props

Using interface:

interface ButtonProps {
  label: string;
  color: string;
  onPress: () => void;
}

const Button = ({ label, color, onPress }: ButtonProps) => {
  // TypeScript knows exactly what we have!
  return <Text onPress={onPress}>{label}</Text>;
};

Using type:

type AlertProps = {
  message: string;
  type: 'success' | 'error' | 'warning';
};

const Alert = ({ message, type }: AlertProps) => {
  return <Text>{message}</Text>;
};

Required vs Optional Props

interface UserCardProps {
  name: string;      // Required - must provide
  age: number;       // Required - must provide
  email?: string;    // Optional - can skip
  avatar?: string;   // Optional - can skip
}

graph TD
    A[Props] --> B[Required Props]
    A --> C[Optional Props ?]
    B --> D[name: string]
    B --> E[age: number]
    C --> F[email?: string]
    C --> G[avatar?: string]

4. TypeScript Hooks

useState with Types

The useState hook can guess types, but sometimes you need to tell it exactly what to expect.

Type Inference (Auto-guess):

// TypeScript guesses: number
const [count, setCount] = useState(0);

// TypeScript guesses: string
const [name, setName] = useState('');

Explicit Types (You specify):

// You say: this is a string or null
const [user, setUser] = useState<string | null>(null);

// Array of numbers
const [scores, setScores] = useState<number[]>([]);

useEffect with Types

useEffect doesn’t need type arguments, but what you do inside should be typed!

useEffect(() => {
  // This function must return void or cleanup
  const timer = setTimeout(() => {
    console.log('Hello!');
  }, 1000);

  // Cleanup function
  return () => clearTimeout(timer);
}, []);

useRef with Types

import { useRef } from 'react';
import { TextInput } from 'react-native';

const Form = () => {
  // Tell TypeScript what element this ref holds
  const inputRef = useRef<TextInput>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return <TextInput ref={inputRef} />;
};

Custom Hooks with Types

// A hook that returns typed values
const useCounter = (initial: number) => {
  const [count, setCount] = useState(initial);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return { count, increment, decrement };
};

// Usage
const { count, increment } = useCounter(0);

graph TD
    A[Hooks with Types] --> B[useState<Type>]
    A --> C[useRef<Element>]
    A --> D[Custom Hooks]
    B --> E["useState<string | null>"]
    C --> F["useRef<TextInput>"]
    D --> G[Return Typed Values]

5. Module Aliasing

The Problem: Long Import Paths

Without aliasing, your imports look like a maze:

// Confusing and long!
import Button from '../../../components/Button';
import useAuth from '../../../hooks/useAuth';
import { colors } from '../../../theme/colors';

The Solution: Short & Sweet Paths

With module aliasing:

// Clean and clear!
import Button from '@components/Button';
import useAuth from '@hooks/useAuth';
import { colors } from '@theme/colors';

Setting Up Module Aliasing

Step 1: Update tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@theme/*": ["theme/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

Step 2: Install babel-plugin-module-resolver

npm install babel-plugin-module-resolver

Step 3: Update babel.config.js

module.exports = {
  plugins: [
    ['module-resolver', {
      root: ['./src'],
      alias: {
        '@components': './src/components',
        '@hooks': './src/hooks',
        '@theme': './src/theme',
        '@utils': './src/utils'
      }
    }]
  ]
};

Why Module Aliasing Rocks

graph LR
    A[Your File] --> B["@components/Button"]
    B --> C[src/components/Button]
    A --> D["@hooks/useAuth"]
    D --> E[src/hooks/useAuth]

Quick Summary: Your TypeScript Toolkit

You Did It! 🎉

You now understand how TypeScript makes React Native development safer and cleaner. Remember:

• TypeScript = Spell-checker for code
• Props = Typed ingredients for components
• Hooks = Type-safe state management
• Aliasing = Clean, short import paths

Start small, add types gradually, and soon TypeScript will feel like your best coding friend!