RN Lez 35: TypeScript in React Native

Docs: Using TypeScript, Strict TypeScript API

Obiettivi

• Tipizzare props dei componenti
• Usare useState con TypeScript
• Tipizzare FlatList e API response

---

1. Props tipizzate

type CardProps = {
    titolo: string;
    prezzo: number;
    disponibile?: boolean;   // opzionale
};

const Card = ({ titolo, prezzo, disponibile = true }: CardProps) => {
    return (
        <View>
            <Text>{titolo}</Text>
            <Text>€{prezzo}</Text>
            {disponibile && <Text>✅ Disponibile</Text>}
        </View>
    );
};

Vantaggi

<Card titolo="Pizza" prezzo={6.50} />         // ✅ OK
<Card titolo="Pizza" prezzo="6.50" />         // ❌ ERRORE: prezzo è number
<Card titolo="Pizza" />                        // ❌ ERRORE: manca prezzo

---

2. useState con TypeScript

// Inferenza automatica
const [count, setCount] = useState(0);       // count: number
const [nome, setNome] = useState('');        // nome: string

// Tipo esplicito quando serve
const [utente, setUtente] = useState<Utente | null>(null);

// Array di oggetti tipizzati
type Prodotto = { id: number; nome: string; prezzo: number };
const [prodotti, setProdotti] = useState<Prodotto[]>([]);

---

3. FlatList tipizzata

type Prodotto = {
    id: number;
    nome: string;
    prezzo: number;
};

const PRODOTTI: Prodotto[] = [
    { id: 1, nome: 'Pizza', prezzo: 6.50 },
];

<FlatList
    data={PRODOTTI}
    renderItem={({ item }: { item: Prodotto }) => (
        <Text>{item.nome} — €{item.prezzo}</Text>
    )}
    keyExtractor={(item: Prodotto) => item.id.toString()}
/>

---

4. fetch con TypeScript

type Post = {
    userId: number;
    id: number;
    title: string;
    body: string;
};

const [posts, setPosts] = useState<Post[]>([]);

useEffect(() => {
    const carica = async () => {
        const res = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data: Post[] = await res.json();  // ← tipizzato!
        setPosts(data);
    };
    carica();
}, []);

---

5. Navigazione tipizzata

type RootStackParamList = {
    Home: undefined;
    Dettaglio: { id: number; nome: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

// Schermata Home
type HomeNav = NativeStackNavigationProp<RootStackParamList, 'Home'>;
function HomeScreen() {
    const nav = useNavigation<HomeNav>();
    nav.navigate('Dettaglio', { id: 1, nome: 'Mario' });
}

// Schermata Dettaglio
type DettaglioRoute = RouteProp<RootStackParamList, 'Dettaglio'>;
function DettaglioScreen() {
    const route = useRoute<DettaglioRoute>();
    const { id, nome } = route.params;  // ← tipizzati!
}

---

6. Tabella riassuntiva

Pattern	Codice
Props	type Props = { ... }; const Card = ({...}: Props)
useState	useState<Type>([]) o useState<Type|null>(null)
FlatList	renderItem={({item}: {item: Type}) => ...}
API	const data: Type = await res.json()
Navigation	createNativeStackNavigator<ParamList>()

---

7. Esercizio

🎯 “Converti Todo List in TypeScript”

Prendi il componente Todo List dalla lezione 22 e convertilo in TypeScript:

1. Crea type Task: { id: string; testo: string; fatto: boolean }
2. Tipizza useState<Task[]>([])
3. Tipizza renderItem
4. Tipizza AsyncStorage (JSON.parse/stringify)
5. Tipizza handler functions (aggiungi, toggle, elimina)