Ejercicio interfaces TS

Declarar un interface llamado ‘Producto’ que incluya:

Nombre:string
Precio:number
oferta:boolean opcional

Crear un producto ‘botijo’ que valga 100€ y otro ‘gaita’, que valga 150€ y esté de oferta.

Crear una función precioConIva que tenga como parámetro un ‘Producto’, que devuelva un number y que lo que devuelva sea el precio del producto multiplicado por 1.21


interface Producto {
    nombre:string,
    precio:number,
    oferta?:boolean
}

let botijo:Producto={nombre:'Botijo',precio:100}

let gaita:Producto={nombre:'Gaita',precio:150,oferta:true}

function precioConIva(p:Producto):number{
    return p.precio*1.21
}

console.log(botijo.nombre,precioConIva(botijo))

Ejemplos Interfaces

https://code.tutsplus.com/tutorials/typescript-for-beginners-part-3-interfaces–cms-29439

https://desarrolloweb.com/articulos/definicion-interfaces-typescript.html


interface Alumno{
    nombre:string,
    readonly edad:number,
    matriculado:boolean,
    notas:number[],
    dni?:string
}

interface AlumnoCorto{
    nombre:string,
    edad:number
}
let ana:Alumno={nombre:'Ana',
                edad:23,
                matriculado:true,
                notas:[10,9,7]}

let eva:Alumno={nombre:'Eva',
                edad:23,
                notas:[10,9,7]}  //Error en Eva porque falta una propiedad

let pep:Alumno={nombre:'Pep',
                edad:23,
                matriculado:true,
                notas:[10,9,7],
                dni:'1231312332'}  //Error en dni porque en Alumno no existe esa propiedad
console.log(eva)
ana.nombre='Ana Pi'
ana.edad=90

function saludo(alum:Alumno):void{
    console.log("Hola "+alum.nombre)
}

function recortarAlumno(al:Alumno):AlumnoCorto{
    return {nombre:al.nombre,edad:al.edad}
}


saludo(ana)
console.log(ana)

Otro ejemplo:


interface Alumno{
    nombre:string,
    edad:number
}

let ana:Alumno={nombre:'Ana',edad:25}
let eva:Alumno={nombre:'Eva',edad:25}
let pep:Alumno={nombre:'Pep',edad:25}
let juan:Alumno={nombre:'Juan'} // Falla

interface Aula{
    nombre:string,
    alumnos:Alumno[]
}

let laboratorio:Aula={nombre:'Laboratorio',alumnos:[ana]}
let lectura:Aula={nombre:'Lectura',alumnos:[ana,eva,pep,juan]}

console.log(lectura)

Prueba TS

Declarar una variable como cadena y asignarle cadena y numero para ver si da error
Declarar una variable como array de cadenas y lo mismo, probar si se le pueden asignar otros valores o da error

Declarar una función triple(numero:number):number que nos devuelva el triple de un número y ver si funciona y que pasa si pasamos una cadena o asignamos el resultado a una variable de tipo string

https://www.typescriptlang.org/play

let cad:string;

cad='hola'

cad=5  //ERROR

let alumnos:string[]

let perros:Array<string>  // Tipos genéricos, una característica de TS

perros=['carlino','Bulldog','Sin raza']

perros=[1,2,3]  // ERROR

alumnos=['ana','eva','pep']

alumnos=[1,2,3] // ERROR

alumnos=['ana','eva',3]  //Error en el 3


function triple(numero:number):number{
    return numero*3
}

console.log(triple(5))

let edad:number

edad=triple(7)

cad=triple(9)  //ERROR

let a: [number, string];

a=[3,'cadena']

a=['cadena',5]  //ERROR

enum Animals {cat, lion, dog, cow, monkey}
let c: Animals = Animals.cat;
 
console.log(Animals[3]); // cow
console.log(Animals.monkey); // 4

Otro ejercicio de repaso

Una página que nos pida una cadena de números separados por comas, que tenga un select con ‘pares’ o ‘impares’ y un botón de calcular. Al darle al botón nos dirá el número de pares o de impares dependiendo de lo que nos hayan seleccionado.

<div id="contenedor" class="container">
		<p>Números: <input type="text" id="inicial" placeholder="Introduzca Los números"></p>
		<!--<p>Incremento: <input type="number" id="incremento" placeholder="Introduzca el incremento"></p>-->
		<p> Seleccione opción: <select id="opcion">
				<option value="0">Pares</option>
				<option value="1">Impares</option>
			</select></p>
		<button id="calcular" class="btn btn-success">Calcular</button>
		<p id="resultado"></p>
	</div>

document.getElementById('calcular').addEventListener('click', calcular)

function calcular () {
  const cadena = document.getElementById('numeros').value
  const opcion = document.getElementById('opcion').value
  /*
  if (opcion == '0') {
    resultado = contarPares(cadena)
  } else {
    resultado = contarImpares(cadena)
  }
  */
  const resultado = contarNumeros(cadena, opcion)
  document.getElementById('resultado').innerHTML = resultado
}

function contarNumeros (cadena, opcion) {
  const numeros = cadena.split(',')
  let cont = 0
  for (let i = 0; i < numeros.length; i++) {
    if (numeros[i] % 2 == opcion) {
      cont++
    }
  }
  return cont
}

function contarPares (cadena) {
  const numeros = cadena.split(',')
  let cont = 0
  for (let i = 0; i < numeros.length; i++) {
    if (numeros[i] % 2 == 0) {
      cont++
    }
  }
  return cont
}

function contarImpares (cadena) {
  const numeros = cadena.split(',')
  let cont = 0
  for (let i = 0; i < numeros.length; i++) {
    if (numeros[i] % 2 == 1) {
      cont++
    }
  }
  return cont
}

Repaso de conceptos

1.- Hacer el HTML y sin javascript

2.- Creo la función con sus parámetros y devuelvo algo para ver que va bien. Esta función es la que hará los cálculos y por lo tanto: No console.log (salvo para comprobar que funciona) NO alerts NO document.getElementById
Esta función recibe unos valores y devuelve un resultado.

3.- Enlazo el botón (click) a una función ¿Cömo? No con onclick, con addEventListener ¡Y compruebo que funcione!

4.- Recupero los valores. También comprobamos y ¡ojo! Si es una cadena, value nos basta pero si es un número: parseFloat(). Si hay más de un valor, yo primero compruebo uno y cuando lo tenga bien los otros los hago igual.

5.- Llamo a la función. Normalmente los valores que he recuperado con los parámetro de la función.

6.- Muestro el resultado.

En estos momentos ya tenemos el esquema/esqueleto de nuestra web. Sólo siguiendo los pasos.

	<div id="contenedor" class="container">
		<p>Número inicial: <input type="number" id="inicial" placeholder="Introduzca el número inicial"></p>
		<p>Incremento: <input type="number" id="incremento" placeholder="Introduzca el incremento"></p>
		<p>Número de términos: <input type="number" id="terminos" placeholder="Introduzca el número de términos">
		</p>
		<button id="calcular" class="btn btn-success">Calcular</button>
		<p id="resultado"></p>
	</div>
document.getElementById('calcular').addEventListener('click', calcular)

function calcular () {
  const inicial = parseFloat(document.getElementById('inicial').value)
  const incremento = parseFloat(document.getElementById('incremento').value)
  const terminos = parseFloat(document.getElementById('terminos').value)
  const resultado = serie(inicial, incremento, terminos)
  document.getElementById('resultado').innerHTML = resultado
}

function serie (inicial, incremento, terminos) {
  // Aquí hay jaleo pero lo dejo para el final
  console.log(inicial, incremento, terminos)
  return 'Estamos trabajando en ello'
}

Después de tener el esquema tengo que hacer el algoritmo.

1.- Si tengo que devolver un resultado lo tendré que inicializar y luego un return
2.- Pienso como lo haría yo. Y lo intento implementar.
3.- En este caso yo sé que lo tengo hacer tantas veces como terminos-> for
4.- Yo tengo un valor inicial al que le voy sumando el incremento: let numero=inicial; for(){numero+=incremento}

function serie (inicial, incremento, terminos) {
  // Aquí tengo que ir calculando los elementos de una serie
  // Y luego devolverlos todos juntos
  // Empiezo con el número inicial y le voy sumando el incremento
  // Tantas veces como terminos
  // Si yo empiezo por 1, el incremento es 3, y me piden 4 términos
  // Empiezo por el 1. Le sumo 3: 1+3-->4
  // Le sumo 3: 4+3-->7
  // Le sumo 3: 7+3-->10
  let resultado = ''
  let numero = inicial
  for (let i = 0; i < terminos; i++) {
    resultado += numero + ', '
    numero += incremento
  }
  return resultado.slice(0, -2)
}

Cambio la función calcular para que compruebe si son números:

function calcular () {
  const inicial = parseFloat(document.getElementById('inicial').value)
  const incremento = parseFloat(document.getElementById('incremento').value)
  const terminos = parseFloat(document.getElementById('terminos').value)
  if (isNaN(inicial) || isNaN(incremento) || isNaN(terminos)) {
    document.getElementById('resultado').innerHTML = 'Algún número está mal'
  } else {
    const resultado = serie(inicial, incremento, terminos)
    document.getElementById('resultado').innerHTML = resultado
  }
}

Solución tarea

<div id="contenedor" class="container ">
		<p>Número inicial: <input type="number" id="inicial" placeholder="Introduzca el número inicial"></p>
		<p></p>Incremento: <input type="number" id="incremento" placeholder="Introduzca el incremento"></p>
		<p></p>Número de términos: <input type="number" id="terminos" placeholder="Introduzca el número de términos">
		</p>
		<button id="calcular" class="btn btn-success">Calcular</button>
		<p id="resultado"></p>
	</div>
document.getElementById('calcular').addEventListener('click', calcular)

function calcular () {
  const inicial = parseFloat(document.getElementById('inicial').value)
  const incremento = parseFloat(document.getElementById('incremento').value)
  const terminos = parseFloat(document.getElementById('terminos').value)
  if (!isNaN(inicial) && !isNaN(incremento) && !isNaN(terminos)) {
    const serie = calcularSerie(inicial, incremento, terminos)
    document.getElementById('resultado').innerHTML = serie
  } else {
    document.getElementById('resultado').innerHTML = 'Algún número es incorrecto'
  }
}
function calcularSerie (inicial, incremento, terminos) {
  let res = ''
  for (let i = 0; i < terminos; i++) {
    res += (inicial + incremento * i) + ', '
  }
  return res.slice(0, -2)
}

Ejercicio 2

Tengo una web en la que me pueden introducir una cadena.

Esa cadena es una referencia de un producto. Las referencias son de tres tipos: ‘RX’+numero es un producto de servicios. ‘TW’+numero es un producto de grifería ‘PS’ + número es un producto de sanitarios.

Yo quiero que al pulsar un botón me salga la información siguiente: Tipo de producto + número

Ejemplos.
‘TW456’ – > Grifería número 456
‘RX123123’ – > Servicios número 123123
‘EE123123’ -> Producto desconocido

Ejercicio para resolver por pasos

Yo tengo una web con un input y un botón:
Cadena:[______]
[Sumar]

En cadena me van a introducir unos números separados por comas. Cuando le den a sumar me va a mostrar la suma de esos números.

EJ: 1,2,3,4,5
Al darle a sumar me pondrá 15

1.- Creo el HTML

	<div id="contenedor" class="container ">
		Cadena: <input type="text" id="cad">
		<button id="sumar" class="btn btn-success">Sumar</button>
		<p id="resultado"></p>
	</div>

2.- Crearía una función que haga el cálculo que me piden. ¿Qué me piden? Que dada una cadena de números separados por coma me devuelva la suma.
función sumaNumero(cadena)—> Suma
sumaNumero(‘1,2,3’)-> 6
2.a Definición y parámetros

function sumaNumero(cadena){
let suma=0;
// Aquí ocurrirá la magia
return suma;
}

2.b Buscaremos la lógica de lo que nos piden. Definimos el algoritmo que vamos a utilizar
A mí se me ocurre: Lo paso a un array. Luego me recorro ese array y voy sumando los números
¿Sé pasar de cadena separa con comas a un array? Sí: split(‘,’)
¿Sé recorrer un array? Sí: con el for de toda la vida

function sumaNumero(cadena){
let suma=0;
let numeros=cadena.split(',')
for(let i=0;i<numeros.length;i++){
//Algo haremos aquí
}
return suma;
}

2.c ¿Qué me falta? Ir sumando los números. ¿Dónde tengo los números? en numeros[i]
¿Dónde los quiero sumar? en suma ¿Cómo lo hago? suma=suma+numeros[i] suma+=numeros[i]

function sumaNumero(cadena){
let suma=0;
let numeros=cadena.split(',')
for(let i=0;i<numeros.length;i++){
suma+=numeros[i]
}
return suma;
}

2.d Me doy cuenta al probarlo que hay un error y lo corrijo:

function sumaNumero (cadena) {
  let suma = 0
  const numeros = cadena.split(',')
  for (let i = 0; i < numeros.length; i++) {
    suma += parseFloat(numeros[i])
  }
  return suma
}

3.- Enlazar la función que ya tengo con el HTML. Me piden que al clicar a sumar me haga los cálculos. 3.a. Enlazar el botón con una función

document.getElementById('sumar').addEventListener('click',sumar)

3.b Creo la función y la pruebo

function sumar () {
  console.log('Todo bien')
}

3.c ¿QUé tengo que hacer dentro de la función? obtener valores, realizar cálculos y mostrar resultado.
3.d ¿Qué valor tengo que obtener? La cadena que ha introducido el usuario. ¿Sé hacerlo?

  const cadena = document.getElementById('cad').value

console.log(cadena)
Importante: tanto el getElementById para recuperar el valor como introducirlo dentro de una variable
3.e Sumar todos los números de la cadena introducida. ¿Cómo? Ya tengo una función sumaNumero.
const suma = sumaNumero(cadena)
console.log(suma)
3.f Poner este resultado en el HTML

  document.getElementById('resultado').innerHTML = 'La suma es ' + suma

3.g Ejemplo de cambiar estilo:

 if (suma > 20) {
    document.getElementById('resultado').style.color = 'red'
  } else {
    document.getElementById('resultado').style.color = 'black'
  }

Ejemplo funciones encapsuladas dentro de un objeto


utils = {
  consonantesReg: function (cadena) {
    cadena = cadena.replace(/[^bcdfghjklmnñpqrstvwxyz]/gi, '')
    return cadena.length
	  },
	  masLarga: function (cadena) {
    const palabras = cadena.split(' ')
    palabras.sort((a, b) => b.length - a.length)
    return palabras[0]
	  },
	   masConsonantesSort: function (cadena) {
    const palabras = cadena.split(' ')
    palabras.sort((a, b) => consonantesReg(b) - consonantesReg(a))
    return palabras[0]
	  }
}