Usando TypeScript com React Native

Substitua essa linha pelo snippet de código abaixo e você verá que o erro desapareceu:

Se você tentou atribuir um número (ou qualquer outro tipo de dado que não seja uma string), obterá um erro diferente. Este é o TypeScript tentando ajudá-lo a detectar bugs antes que eles aconteçam.

Adicionando itens à lista

Crie um novo componente, AddItem.tsx , em sua pasta /src/components e cole o código abaixo:

 import React, {useState} de'react';
import { Visualizar, Texto, TextInput, TouchableOpacity, StyleSheet,
} de'react-native';
interface de exportação IItem { item: string; quantidade: string;
}
const AddItem=()=> { const [item, setItem]=useState (''); const [quantidade, setQuantity]=useState (''); Retorna (   Adicionar item de compra    setItem (texto)} />  { setQuantity (q); }} />  {}}>  Adicionar Item     );
};
estilos const=StyleSheet.create ({ cabeçalho: { fontSize: 20, fontWeight:'700', }, Formato: { marginTop: 30, }, entrada: { preenchimento: 15, borderColor:'rgba (0, 0, 0, 0,2)', borderWidth: 1, borderRadius: 5, marginBottom: 20, }, addItemButton: { backgroundColor:'# eb8634', paddingVertical: 20, borderRadius: 5, alignItems:'center', }, buttonText: {color:'#fff', fontWeight:'500'},
});
exportar AddItem padrão;

Observe a exportação nomeada IItem na linha 9? Essa é a estrutura de um item em nossa lista de compras, e nós a exportamos porque vamos precisar dela em outros componentes.

Voltar para App.tsx , atualize o componente com o código abaixo:

 import React, {useState} de'react';
import {SafeAreaView, StyleSheet, Text, View} de'react-native';
import Header from'./src/components/Header';
importar AddItem, {IItem} de'./src/components/AddItem';/* import AddItem and interface */
const App=()=> { const [shoppingList, setShoppingList]=useState  ([]);//define o tipo do que o gancho espera ser um array de itens. Retorna (  
     );
};
estilos const=StyleSheet.create ({ container: { flex: 1, backgroundColor:'# e8e7e3', }, contentWrapper: { preenchimento: 20, },
});
exportar aplicativo padrão;

Agora em App.tsx importamos o novo componente AddItem e a interface IItem para que possamos usar (na linha 6) o useState hook para criar o estado shoppingList .

Especificamos que o gancho deve aceitar um array de IItem ao usar a função setShoppingList . Se você passar o mouse sobre a função setShoppingList , verá o tipo. Observe isso, vamos precisar disso em breve, quando adicionarmos itens à lista de compras em AddItem.tsx .

Volte para o componente AddItem.tsx e atualize-o com este:

 import React, {useState} de'react';
import { Visualizar, Texto, TextInput, TouchableOpacity, StyleSheet, Alerta,
} de'react-native';
interface de exportação IItem { item: string; quantidade: string;
}
interface Props { setShoppingList: React.Dispatch >; shoppingList: IItem [];
}
const AddItem: React.FC =({shoppingList, setShoppingList})=> { const [item, setItem]=useState (''); const [quantidade, setQuantity]=useState (''); const addItem=()=> { if (! item) { Alert.alert ('Nenhum item!','Você precisa inserir um item'); } senão { setShoppingList ([ ...lista de compras, { item, quantidade: quantidade ||'1', }, ]); setItem (''); setQuantity (''); } }; Retorna (   Adicionar item de compra    setItem (texto)} />  { setQuantity (q); }} />   Adicionar Item     );
};
estilos const=StyleSheet.create ({ cabeçalho: { fontSize: 20, fontWeight:'700', }, Formato: { marginTop: 30, }, entrada: { preenchimento: 15, borderColor:'rgba (0, 0, 0, 0,2)', borderWidth: 1, borderRadius: 5, marginBottom: 20, }, addItemButton: { backgroundColor:'# eb8634', paddingVertical: 20, borderRadius: 5, alignItems:'center', }, buttonText: {color:'#fff', fontWeight:'500'},
});
exportar AddItem padrão;

Há mudanças significativas no componente agora, então vou orientá-lo por meio delas.

Na linha 14, definimos a interface Props e configuramos o tipo de cada propriedade e, em seguida, definimos como o tipo de props em nosso componente funcional na linha 18.

Também criamos uma função de manipulador na linha 21, quando o botão “Adicionar item” é clicado, a função verifica se um item foi inserido no campo e invoca a função setShoppingList () para adicione um novo item à lista.

Listando itens

Agora que podemos adicionar novos itens, vamos criar um componente para listá-los.

Crie outro arquivo em /src/components chamado Item.tsx e cole o código abaixo dentro:

 import React from'react';
import {View, Text, StyleSheet} from'react-native';
importar {IItem} de'./AddItem';
Item const: React.FC =({item, quantidade})=> { Retorna (   {item}   x {quantidade}   );
};
estilos const=StyleSheet.create ({ item: { preenchimento: 20, flexDirection:'row', justifyContent:'espaço entre', alignItems:'center', borderBottomWidth: 1, borderBottomColor:'rgba (0, 0, 0, 0.2)', }, nome do item: { fontWeight:'500', }, quantidade: { preenchimento: 6, borderWidth: 1, borderColor:'rgba (0, 0, 0, 0,2)', borderRadius: 10, estouro:'escondido', backgroundColor:'rgba (0, 0, 0, 0,05)', },
});
exportar item padrão;

Você provavelmente já pegou o jeito! O componente Item.tsx aceita propriedades de IItem como adereços e, em seguida, os renderizamos com algum estilo.

Agora precisamos terminar o aplicativo importando o componente para App.tsx e listando os itens usando a [FlatList] integrada ( https://reactnative.dev/docs/flatlist ) componente.

Substitua o conteúdo do App.tsx pelo código abaixo:

 import React, {useState} de'react';
importar {SafeAreaView, StyleSheet, View, FlatList} de'react-native';
import Header from'./src/components/Header';
importar AddItem, {IItem} de'./src/components/AddItem';
importar item de'./src/components/Item';
const App=()=> { const [shoppingList, setShoppingList]=useState  ([]); Retorna (  
    `$ {item.item}-$ {index}`} renderItem={({item})=> (  )} />   );
};
estilos const=StyleSheet.create ({ container: { flex: 1, backgroundColor:'# e8e7e3', }, contentWrapper: { preenchimento: 20, },
});
exportar aplicativo padrão;

Nosso aplicativo agora está completo. Na linha 16, usamos o componente FlatList para renderizar itens de nossa lista, e você pode ver como usamos o componente Item no renderItem prop para FlatList .

Esta é uma demonstração de nosso novo aplicativo:

Conclusão

Este artigo foi criado para ser uma introdução leve sobre como você pode se beneficiar dos recursos do TypeScript em seus aplicativos React Native. O aplicativo da lista de compras era simples o suficiente para mostrar a você como usar o TypeScript sem tornar as coisas complexas.

Você pode ir além implementando um recurso para remover itens da lista.

Saiba mais sobre o TypeScript com a documentação oficial e encontre o código-fonte deste projeto aqui .

A postagem Usando TypeScript com React Native apareceu primeiro em LogRocket Blog .

Source link