Curso básico de TypeScript y React. Parte 1

Bienvenidos y bienvenidas a un nuevo curso en el que aprenderemos lo básico para crear un proyecto web basado en TypeScript, Node y React.

Configuración del entorno

Para comenzar debemos instalar el entorno de ejecución Node.JS si aún no lo hemos hecho. Normalmente en la página principal podremos escoger entre la versión estable, y la última existente. Mi consejo, es que si queréis aplicarlo a un proyecto que no sea de pruebas, seleccionéis la versión estable.

Por otro lado, necesitaremos un IDE o un editor de código. En mi caso me suelo decantar por Visual Studio Code. Pero podéis usar IDEs como Eclipse o NetBeans, o editores como Atom. Eso depende del gusto de cada developer.

Una vez con todo lo necesario instalador, puesto que queremos ahorrar un tiempo creando la estructura de un proyecto, así como configurándolo, pasaremos a utilizar el comando:

npx create-react-app nombre_proyecto --typescript

En nuestro caso, y para el curso crearemos un proyecto para gestionar reservas de una casa rural ficticia llamada «Reservas» (sí, tampoco nos hemos complicado con el nombre).

Tras ejecutar el comando correspondiente, podemos observar que automáticamente se genera la estructura siguiente:

Pasemos a ver de forma general la estructura generada:

  • public: contiene el fichero html principal y único que necesitará la app. Por otro lado los distintos iconos de ésta utilizados tanto para la visualización en el navegador (favicon.ico), como para los dispositivos móviles (los ficheros .png). El fichero manifest.json, que proporcina la información necesaria para que se visualice la web en el navegador. Puedes ver más información sobre dicho fichero en este artículo de NubeColectiva.
  • src: en este directorio podrás ver los ficheros de código de nuestra aplicación. Nos centraremos a posteriori en la utilidad de cada uno.
  • package.json: fichero con la configuración del proyecto que será utilizada por Node.
  • tsconfig.json: contiene la configuración del proyecto TypeScript, para que sea posible compilarlo.

Si ahora ejecutáis por consola npm run podréis ver la siguiente pantalla en vuestro navegador:

Esto significa que el entorno esta configurado correctamente y listo para el desarrollo.

Comenzando con TypeScript

Ficheros .ts y .tsx

Seguramente tras ver la estructura generada para nuestro proyecto, echarás en falta ficheros con extensión .js. Pues bien, para TypeScript, los ficheros que usarás tienen la extensión .ts. Por lo que recuerda que siempre que añadas uno, deberá tener dicha extensión.

Por otro lado, podrás ver que hay otros ficheros con extensión .tsx, estos contienen código React. Si a un fichero con código React le pones extensión .ts, te dará errores de compilación, ya que con .tsx indicamos que va a existir código React a Interpretar.

Vistazo rápido

TypeScript es un lenguage cuyo principal objetivo es hacer más robusto JavaScript a través de la inclusión de tipos de datos. Esto nos permitirá evitar muchos errores que suelen aparecer cuando no se tiene cuidado en JavaScript y se utilizan distintos tipos de datos en una misma variable sin control. La verdad es que sabiendo JavaScript, no tendréis ninguna complicación para adaptaros a este nuevo lenguage.

Puesto que los navegadores no entienden de TypeScript, antes de utilizarlo, es necesario compilarlo para que se traduzca a JavaScript.

Para comenzar pasemos a ver un ejemplo de código con el que podréis ver ya varias de las características de este lenguage que iré comentando sobre el código

// Interfaces: las interfaces permiten definir la estructura de un objeto sencillo. Normalmente
// será utilizadas para definir para estructuras de datos simples.
interface IUserInfo  {
  // Propiedad de la interfaz. Tras el símbolo de ":" se indica el tipo de dato.
  userName: string;
  lastLoggedIn: Date;
  groups: string[];
}

// Clases: TypeScript nos permite operar con una definición de clases más cercana a lo que nos
// permiten otros lenguages de programación. En este ejemplo la clase LoginHandler hereda de
// GenericHandler.
class LoginHandler extends GenericHandler {
  // Cada propiedad y método de una clase permite usar modificadores de visibilidad. Estos serán
  // los vistos en otros lenguages public, protected y private. Al igual que hemos visto con la
  // interfaz se pone el tipo de dato tras el carácter ":".
  private currentUser: IUserInfo = null;
  private currentError: Error = null;

  // Los constructores de las clases se definen con 'constructor'.
  public constructor(baseUrl: string) {
    // Con super podemos llamar al constructor de la clase base en este caso.
    super(baseUrl);
  }

  // Este método nos permite operar con operaciones asíncronas, escribiéndolas como código
  // síncrono. Para ello usamos el par "asyn" / "await". Con async, indicamos que el
  // método dentro dentrá uno o varios awaits.
  public async logIn(userName: string, password: string): Promise<IUserInfo> {
    try {
      // await se espera a que termine el códido asíncrono, devolviendo en una vaiable,
      // lo que hasta ahora con promesas asignábamos a un callback con 'then'.
      this.currentUser = await this.doLogIn(userName, password);
    } catch (exception) {
      // En una operación asíncrona, lo que antes capturábamos con onCatch, ahora se
      // lanza como excepción.
      this.currentError = exception;
    }
  }

  // Este método más sencillote, sería público y devuelve un tipo de datos booleano.
  public logOut(): boolean {
    return this.doLogOut();
  }

  // Podemos definir getters y setters con esta sintaxis.
  public get CurrentUser(): IUserInfo {
    return this.currentUser;
  }

  // Aunque si no nos convence siempre podemos usar los métodos con sintaxis
  // más familiar.
  public getCurrentError(): Error {
    return this.currentError;
  }
}

// Las constantes se definen con la palabra clave 'const'.
const BASE_URL = "http://myweb.com/users";
// Las variables se definen con la palabra clave 'let'.
let loginHandler = new LoginHandler(BASE_URL);

loginHandler.logIn("myuser", "mypassword");

// En esta línea vemos el uso del getter definido en la clase.
if (loginHandler.CurrentUser) {
  console.log("User logged: " + loginHandler.CurrentUser.userName);
}  else {
  console.error("User not logged: " + loginHandler.getCurrentError().message);
}

No os preocupéis si de momento véis demasiada información en el código. En el próximo capítulo nos adentraremos en las entrañas de TypeScript y comenzaremos a ver paso a paso como programar con él.

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

El tiempo límite ha expirado. Por favor, recarga el CAPTCHA.