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