Introducción a TypeScript
Por qué usar TypeScript
TypeScript vs. JavaScript
Configurado nuestro proyecto
Atrapando bugs
El compilador de TypeScript
Veamos el TSConfig.json
Tipos de datos primitivos
Qué es el tipado en TypeScript
Tipos inferidos
Numbers
Booleans
Strings
Arrays
Tipos de datos especiales
Any
Union Types
Alias y tipos literales
Null y Undefined
Funciones
Retorno de funciones
Objetos en funciones
Objetos como tipos
Módulos: import y export
Usando librerías que soportan TypeScript
Usando librerías que NO soportan TypeScript
Próximos pasos
Toma el Curso de Tipos Avanzados y Funciones en TypeScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
En TypeScript podemos especificar el tipo de dato del valor que nos retornará una función o indicar si no se devolverá dato alguno:
El tipo de retorno se especificará después de los paréntesis en los que se encuentran los argumentos de la función:
void. Se definen así://TypeScript
function imprimirNombre(yourName: string): void {
console.log(`Hello ${yourName}`);
}
//TypeScript
function suma(a: number, b: number): number {
return a + b;
}
function holaMundo(): string {
return "Hello, World!";
}
También los retornos pueden ser más de un tipo de dato:
//TypeScript
function devolverMayor(a: number, b: number): number | string {
if(a > b){
// Retorna un número
return a;
} else if( b > a ) {
// Retorna un número
return b;
} else {
// Retorna un string
return `Los números ${a} y ${b} son iguales`;
}
}
Si no indicamos en nuestra declaración de la función el tipado del retorno, TypeScript, al igual que con las variables, lo puede inferir según si retornas datos (sea string, number, etc.) o si nada es devuelto (tipo void).
Contribución creada por: Martín Álvarez.
Aportes 16
Preguntas 5
En TS podemos especificar que tipo de dato retorna la función e incluso podemos indicar cuando esa funcion no retorna nada.
// Retornando un string
function joinName(fName: string, lName: string): string {
return `${fName} ${lName}`
}
// Funcion sin retorno
function printName(name: string): void {
console.log(name)
}
El curso de manipulacion de arrays es buenisimo, lo uso de referencia seguido
Lo mismo pero con el método reduce:
const calcTotal = (prices: number[]): number => {
return prices.reduce((total, price) => total + price, 0);
};
console.log(calcTotal([10, 20, 30])); // 60
Les comparto mis apuntes. 😄
Normalmente, lo usamos para funciones de efecto secundario, funciones que llaman a otras funciones.
Lo utilizamos para funciones que no tengan un retorno, que no retornen ningún tipo de valor.
function functionName (parameters: dataTypes): dataTypes { statements }
const functionName = (parameters: dataTypes): dataTypes => { statements }
(() => {
const calcTotal = (prices: number[]): string => {
let total = 0;
prices.forEach(item => total += item);
return total.toString();
}
// const rta = calcTotal([1, 2, 1, 1, 1]);
// console.log(rta);
const printTotal = (prices: number[]): void => {
const rta = calcTotal(prices);
console.log(`El total es ${rta}`);
}
const rta = printTotal([1, 2, 1, 1, 1]);
})();
Esta super interesante esto del tipo de dato que queremos retornar en una funcion, entonces podemos decirle a una función que retorne algún Literal Types de esta manera:
type SizeTshirt = "M" | "L" | "XG" | "S";
type User = { name: string; user: string; size: SizeTshirt };
const greeting = (user: string, name: string, size: SizeTshirt): User => {
return {
user,
name,
size,
};
};
Aqui esta la url del github en la rama de esta clase:
https://github.com/platzi/curso-typescript-fundamentos/tree/16-step
Esta interesante el curso 😄
const calcTotal =(prices: number[])=> {
let total = 0;
total = prices.reduce((e,i)=>e+i);
console.log(`El total es: ${total}`);
return total;
};
const Nguardado = calcTotal([12,34,31,4,134])
console.log(Nguardado+1);
Ejercicio de la clase:
(() => {
const calcTotal = (prices: number[]): string => {
let total = 0;
prices.forEach((item) => {
total += item;
});
return total.toString();
}
const printTotal = (prices: number[]): void => {
const rta = calcTotal(prices);
console.log(`El total es ${rta}`);
}
printTotal([1, 2, 3, 5, 6]);
})();
💡 Un dato interesante es que en JavaScript las funciones que no retornan un valor, implícitamente retortan undefined.
Sin embargo, void y undefined no son lo mismo en TypeScript como hemos podido ver en las clases de este curso.
Otras soluciones alternativas
Para quien pensó en como hacer un clousure con Typescript esto te puede servir. Este aporte fue posible gracias al curso profesional de Javascript.
function newClousure (a: number): (b: number) => number {
return function(b) {
return a + b;
}
}
Con arrow functions
const newClousure = (a: number): (b: number, c: string) => number => {
return (b, c) => {
return 5;
}
}
aquí las tengo :v
❤️|
Como le menciono Nico podemos usar el reduce para hacerlo de una manera mas elegante les dejo el código que desarrolle usando el reduce adicionalmente al usar arrow functions si nuestra función solo realiza una acción podemos escribir una sola linea de código evitando poner las llaves {} después de definir la función
(() => {
const calTotal = (prices: number[]): string =>
prices.reduce((sum, price) => sum + price)
.toString();
const printTotal = (prices: number[]): void =>
console.log(calTotal(prices));
printTotal([1,2,3]);
})();
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?