¿Deberíamos usar TypeScript con React Native?

React Native está acostumbrado a crear aplicaciones para plataformas Android e iOS. Le permite usar una base de código única para ambas plataformas. Una de las mayores ventajas que ofrece React Native es que es fácil de aprender porque no necesita aprender un lenguaje de programación completamente nuevo para ello. Porque usa javascript conocido bajo el capó. Por lo tanto, los desarrolladores que ya están familiarizados con JavaScript pueden cambiar fácilmente a React Native para crear aplicaciones móviles.

Pero la cuestión es que React Native también es compatible con el lenguaje de programación TypeScript. Pero incluso hoy en día, muchos desarrolladores todavía usan javascript en React Native para crear aplicaciones. Antes de entrar en la cuestión de si debe usar TypeScript con React Native o no, echemos un vistazo primero a TypeScript.

TypeScript: TypeScript es un lenguaje de programación desarrollado por Microsoft para llenar lo que falta en JavaScript.

JavaScript es un lenguaje vagamente escrito. Significa que no tiene que especificar de antemano qué tipo de información se almacenará en una variable. JavaScript escribe automáticamente una variable según el tipo de información que le asigne.

De esta manera, el sistema de tipos de JavaScript le brinda más flexibilidad, pero carece de las ventajas de un sistema fuertemente tipado. No obtiene ningún error, incluso si está tratando de asignar el tipo de información incorrecto a los objetos. Aquí es donde Typescript entra en escena.

Typescript simplemente agrega tipos a javascript. Debajo del capó, también es javascript. Agregar tipos significa declarar el tipo de un valor o función o cualquier cosa que requiera tipo. Esto significa que, al declarar el verdadero tipo esperado, el sistema puede determinar si el valor que estamos pasando a una función es válido o no. Esto nos permite encontrar posibles errores en tiempo de compilación en lugar de tiempo de ejecución.

TypeScript agrega sintaxis adicional a JavaScript para admitir una fuerte integración con su editor. De esta manera, su editor puede detectar errores antes de tiempo. 

Características de TypeScript

1. TypeScript es básicamente JavaScript bajo el capó. Typescript adopta los componentes básicos de su programa de JavaScript. Por lo tanto, solo necesita saber JavaScript para usar TypeScript. Todo el código TypeScript se convierte en su equivalente de JavaScript para la ejecución.
2. TypeScript es compatible con todas las bibliotecas de JavaScript. Puede usar todos sus marcos, herramientas, etc. de JavaScript existentes.
3. JavaScript también es un TypeScript. Esto significa que cualquier archivo .js válido puede convertirse en un archivo .ts y compilarse con otros archivos TypeScript.
4. TypeScript es portátil en todos los navegadores y sistemas operativos. Puede ejecutarse en cualquier entorno en el que se ejecute JavaScript. TypeScript no requiere ningún entorno específico para ejecutarse.

Sintaxis: una sintaxis en javascript se ve así:

let varible_name = "GeeksforGeeks";

Una sintaxis en TypeScript se ve así:

let varible_name: string = "GeeksforGeeks";

Aquí, en TypeScript, también proporcionamos el tipo de la variable.

Ventajas de usar TypeScript en React Native:

1. Autodocumentación : cuando comienza a escribir tipos de variables y funciones en su código, está documentando qué valores espera en esos componentes. Se vuelve más fácil para otros desarrolladores entender mejor su código.
2. La refactorización se vuelve fácil : siempre que cometa un error, como proporcionar valores incorrectos a las variables o pasar argumentos incorrectos a las funciones, TypeScript le dará un error para que pueda corregir sus errores antes de ejecutar la aplicación.
3. Fácil depuración : la depuración del código se vuelve mucho más fácil con TypeScript porque tiene todos los tipos documentados en el propio código. También ayuda a otros desarrolladores que trabajan en el mismo código.
4. Salida válida : si ha escrito un TypeScript válido, puede decir con confianza que generará una salida de JavaScript válida. No obtienes el mismo nivel de confianza con javascript.
5. El editor de texto o IDE también lo ayudará : TypeScript puede integrarse con todos los editores e IDE. Esto le permite a su editor usar definiciones de TypeScript y autocompletar el código y le permite saber qué pasar a los componentes.
6. Se vuelve fácil pensar y crecer : al definir tipos para la variable y las funciones, obtiene una estructura de toda su aplicación. Le ayuda a pensar mejor en términos de alcances y el contexto de toda la aplicación. Puede hacer crecer fácilmente su aplicación.
7. Se puede adoptar fácilmente : Typescript no es un lenguaje completamente nuevo. Si ya está familiarizado con javascript, puede aprender fácilmente TypeScript.

Ningún lenguaje de programación es perfecto. El TypeScript también tiene algunas desventajas.

Desventajas de usar TypeScript en React Native:

1. Es necesario administrar más dependencias : debe agregar tipos para cada objeto que cree y debe tener en cuenta estos tipos al asignarle valores.
2. Nueva sintaxis : TypeScript no es un lenguaje de programación completamente nuevo, pero aún así viene con una sintaxis nueva. Hay que adaptarlo y lleva un tiempo acostumbrarse.
3. Consume mucho tiempo : obtiene muchos beneficios al escribir tipos para objetos, pero también consume mucho tiempo en comparación con JavaScript simple.
4. Falta de conocimiento : JavaScript se usa más que Typescript. Así que hay menos gente que tiene conocimiento de ello. Por lo tanto, deben dedicar un tiempo a aprenderlo para que funcione con el código de su proyecto.

Con todas estas ventajas y desventajas, Typescript aún brinda un gran valor a su proyecto. Ahorrará muchas horas de tiempo de depuración utilizando TypeScript. Por lo tanto, definitivamente debería usar TypeScript en su proyecto React Native. 

Cómo usar TypeScript en React Native:

Paso 1: Abra su Terminal y ejecute el siguiente comando. Instalará Expo CLI globalmente en su sistema.

npm install -g expo-cli

Paso 2 : ahora, cree un nuevo proyecto nativo de React ejecutando el siguiente comando.

expo init "Your_Project_Name"

Paso 3 : se le pedirá que elija una plantilla. Seleccione la plantilla en blanco (TypeScript) o pestañas (TypeScript) en lugar de la primera.

Al elegir esta plantilla, se generará un nuevo proyecto React Native con TypeScript integrado. 

Estructura del proyecto : Se verá como lo siguiente.

Estructura del proyecto

En el siguiente ejemplo, crearemos un componente personalizado llamado GeeksforGeeks.tsx que representaremos en el archivo App.tsx principal . Pasaremos un objeto a este componente personalizado y este componente también contendrá una definición de tipo para ese objeto.

Cree un nuevo archivo llamado GeeksforGeeks.tsx. Este archivo es un componente personalizado que representaremos en el archivo App.tsx principal .

Archivo GeeksforGeeks.tsx

Ejemplo: el siguiente ejemplo ilustrará el uso de TypeScript con React Native

Paso 1: Abra el archivo GeeksforGeeks.tsx y escriba el código a continuación en ese archivo. Este componente recibirá 1 objeto como accesorio del archivo App.tsx . Este objeto tendrá 2 propiedades, id y title. Ambos serán de tipo string y tenemos que definir estos tipos en este componente porque estamos usando TypeScript. Luego simplemente mostraremos esta identificación y título en la pantalla con algún estilo.

Esto es básicamente JavaScript, solo agregamos unas pocas líneas de código para la definición del tipo. Escribirá este código en el archivo .tsx .

Como puede ver en el código, proporcionamos una definición de tipo para GeeksforGeeksProps. Debe usar la sintaxis de tipo de exportación para definir todos los tipos.

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';
  
export type GeeksforGeeksProps = {
    text: {
        id: string;
        title: string;
    }
}
  
const GeeksforGeeks = (props: GeeksforGeeksProps) => {
    return (
        <View style={styles.container}>
            <Text style={styles.id}>
                {props.text.id}</Text>
            <Text style={styles.title}>
                {props.text.title}</Text>
        </View>
    )
}
  
export default GeeksforGeeks
  
const styles = StyleSheet.create({
    container: {
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#3B5323",
        height: 300,
        width: 300
    },
    id: {
        fontSize: 40,
        fontWeight: "bold",
        color: "#fff"
    },
    title: {
        fontSize: 40,
        fontWeight: "500",
        color: "#fff"
    }
})

Paso 2: abra el archivo App.tsx y escriba el siguiente código en ese archivo.

App.tsx es el archivo principal que se muestra primero cuando ejecuta su aplicación. En este archivo, crearemos un texto constantemente llamado. Pasaremos este texto en nuestro componente GeeksforGeeks como accesorio y lo mostraremos en la pantalla principal.

Esto también es básicamente JavaScript, solo agregamos unas pocas líneas de código para la definición del tipo. Escribirá este código en el archivo .tsx .

import { StyleSheet, Text, View } from 'react-native';
import GeeksforGeeks from './GeeksforGeeks';
  
export default function App() {
    const text = {
        id: "1",
        title: "GeeksforGeeks"
    }
  
    return (
        <View style={styles.container}>
            <GeeksforGeeks text={text} />
        </View>
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

id y title tienen tipos de string. Si no sigue este tipo de regla, el editor le dará un error. Por ejemplo, si proporciona 1 a id en lugar de «1», su editor le dirá que «el número de tipo no se puede asignar al tipo de string».

Así es como TypeScript te ayudará a solucionar los errores antes de la ejecución de tu código. Si no tiene ningún error en su código, obtendrá un resultado exitoso como el siguiente.

Producción: