Saltar al contenido

Ejercicios básicos de TypeScript desde código JavaScript

typescript-logo

En esta mini entrada voy a subir unos ejemplos o ejercicios de código Typescript.

Estos son algunos ejemplos de ejercicios de introducción de TypeScript, son muy básicos.

Ejercicio 1 | Variables y constantes

Este código está hecho en JavaScript y hay que pasarlo a TypeScript empleando variables «let» y constantes.

El código javaScript sería así:

var nombre;
nombre = "Miguelo";
var edad;
edad = 30;
var PERSONAJE = {
    nombre: nombre,
    edad: edad
};

Transcribirlo en TypeScript usando constantes y variables let quedaría así:

let nombre:string;
nombre = "Miguelo" ;
let edad:number;
edad = 30 ;
 
const PERSONAJE = {
    nombre:nombre ,
    edad:edad
}

Ejercicio 2 | Interface

Crear una interface en TypeScript a partir de este código JavaScript:

var spiderman = {
    nombre: "Peter parket",
    poderes: ["trepar", "fuerza", "agilidad", "telas de araña"]
};

En Typescript quedaría así:

 interface superHero {
   nombre:string;
   poderes:string[];
 }

Ejercicio 3 | Clases

Ahora en TypeScript vamos a crear la clase Rombo, la cual debe tener dos propiedades:
DiagonalVertical y DiagonalHorizontal.
Le añadiremos un constructor al que le pasaremos los valores anteriores cuando instanciemos el objeto.
Y también debe de tener un método que calcule el area, que será la multiplicación de DiagonalVertical * DiagonalHorizontal.
Este método devolverá un número.

class Rombo {
   diagonalVertical:number;
   diagonalHorizontal:number;
   calcularArea():number{
     return this.diagonalHorizontal*this.diagonalVertical;
 
   };
   constructor (diagonalVertical:number, diagonalHorizontal:number){
     this.diagonalVertical=diagonalVertical;
     this.diagonalHorizontal=diagonalHorizontal;
 
   }
 
}

Ejericio 4 | Funciones de flecha

En este ejercicio vamos a cambiar una función normal de javascript a una función de tipo flecha.
Cómo ya sabrás las funciones de flecha no alteran el «this» cuando se corren, por lo que son interesantes para cubrir algunos problemas de JavaScript.

La función en Js sería esta:

 
function suma( a, b ){
  return (a + b) 
}

let varfunctionflechaSuma= (a:number, b:number) => (a+b);

Y poco más, espero que te sean útiles los ejercicios básicos de TypeScript 😉

typescript-logo