Bienvenido, les saluda Luis y hoy les traigo un nuevo tutorial.
Índice
Más fácil que configurar reaccionar con él
Hace unas semanas quería experimentar con react-native.
El desarrollo móvil siempre me ha interesado.
Dado que ahora puede escribir aplicaciones solo con JavaScript, ¿por qué no aprovechar esta oportunidad y hacer uso de TypeScript?
¿Por qué Typecript?
Typecript ofrece mucho más además de JavaScript y React.
La seguridad de conocer cada prop, parámetro de función y retorno le advertirá si intenta usarlo de una manera que no se tiene en cuenta es invaluable.
Pensando en todo el m ayor fallos y errores que se encuentran durante estos años como un desarrollador de JavaScript, la mayoría estaban equivocados respecto a los parámetros de funciones no documentadas. No hay forma de averiguar el problema hasta que usted, o desafortunadamente, un cliente / usuario, alcance una condición específica.
Typecript, junto con un buen entorno de prueba, hace que su aplicación sea más segura contra errores y su código sea más fácil de entender para los nuevos desarrolladores, lo que provoca aún menos errores.
Configurar react-native
Configurar un proyecto react-native es más fácil que nunca gracias a Expo.
$ npm i -g expo-cli$ expo init my-folder$ cd my-folder
¡Y eso es!
Tendrá un proyecto completo listo para usar, solo use expo start
para iniciarlo y con la recarga en caliente habilitada.
Después de eso, solo necesitarás el aplicación expo en su teléfono para ver su aplicación en vivo.
Esto se abrirá automáticamente, use la aplicación expo en su teléfono y escanee el código QR para ver su aplicación en vivo.
Agregar texto mecanografiado
Todo esto es muy bueno, pero ¿Qué pasa con el soporte de TypeScript?
Resulta que es bastante fácil de agregar, veamos cómo.
En primer lugar, agreguemos el paquete mecanografiado:
npm i -D typescript
Y luego agreguemos un tsconfig.json
, puede obtener el básico de los documentos mecanografiados aquí.
Mejoré la mía para adaptarla a mis preferencias un poco mejor (principalmente pudiendo escribir importaciones predeterminadas sin el *
).
// tsconfig.json "compilerOptions": "outDir": "build", "rootDir": "src", "sourceMap": true, "noImplicitAny": true, "noUnusedLocals": true, "noUnusedParameters": true, "module": "commonjs", "target": "es6", "jsx": "react", "strict": true, "typeRoots": ["node_modules/@types", "src/custom-types"], "baseUrl": ".", "moduleResolution": "node", "esModuleInterop": true , "include": ["./src/**/*"], "exclude": ["node_modules"]
Después de esto, necesitamos configurar babel para que pueda compilar mecanografiado.
Primero necesitaremos los ajustes preestablecidos.
npm i -D @babel/preset-typescript
Y luego los incluimos en el babel.config.js
archivo ya disponible.
module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo', '@babel/typescript'], }; };
Ahora instalemos tipos para react y react-native
npm i -D @types/react @types/react-native
Y ya casi terminamos, cambie la extensión de App.jsx
a .tsx
¡y ya puedes escribir código Typecript!
La aplicación se ejecutará como antes, con la increíble adición de verificación de tipos e intellisense (con VSCode).
Enlace de Github del proyecto está disponible aquí. ¡Siéntete libre de clonar!
Añadir comentario