Ya me veo aplicando todo esto junto a React 馃槂
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
Nuestras funciones pueden recibir objetos como argumentos. En TypeScript tambi茅n podemos declarar el tipado de estos. Veamos un ejemplo:
//TypeScript
function imprimirDatos( data: { username: string, email: string } ): void {
console.log(`Tu nombre de usuario es ${data.username} y tu email es ${data.email}`)
}
imprimirDatos({
username: 'freddier',
email: '[email protected]'
})
En el ejemplo, el nombre data
hace referencia al objeto que recibir谩 la funci贸n imprimirDatos
. Por ello, para acceder al valor de username
lo definimos en el console.log
como data.username
y para el email
como data.email
, pues as铆 es como se accede a las propiedades de un objeto.
Finalmente, cuando invocamos imprimirDatos
y queremos enviar el objeto que nos pide como par谩metro, simplemente se colocar谩 entre llaves los atributos del mismo sin colocar un nombre de referencia como data
tal como lo hicimos en la definici贸n de la funci贸n.
Contribuci贸n creada por: Mart铆n 脕lvarez.
Aportes 19
Preguntas 5
Ya me veo aplicando todo esto junto a React 馃槂
Mientras m谩s avanzo m谩s me gusta typescript
Destructuring Objects en argumentos con tipado
Tenia la duda de como hacer destructuring de los objectos al recibirlos por argumento y al mismo tiempo mantener el tipado. Investigando un poco encontr茅 esta soluci贸n.
Donde antes iba el nombre del argumento ahora ir铆a el destructuring, mientras que el tipado sigue igual que siempre
const login = ({ email, password }: { email: string; password: string }) => {
console.log(email, password);
};
Espero que les sirva!
Definitivamente empezare a usar typescript
Yo era un hater de TS pero desde hace 7 meses que por cosas del trabajo me vi en la obligaci贸n de agregarlo a mi stack, me he dado de cuenta de lo necesario y valioso que es.
es una barbaridad como explica Nico, Exelente curso!!!
Yo lo hice de esta manera
(() => {
type User = { email: string; password: string | number };
const login = (user: User) => {
console.log(user.email, user.password);
};
const jesusUser = {
email: "hdjesus",
password: 12121,
};
login(jesusUser);
})();
Me encantaria ver un curso de React con typescript
Nunca entend铆 por qu茅 la gente usaba TypeScript, ahora ya s茅 por qu茅.
(() => {
const login =(data:{email:string,password:number})=>{
console.log(data.email,data.password);
}
// login ("[email protected]","12121212");
login({
email:"[email protected]",
password:12121212
});
type Sizes = 'S' | 'M' | 'L' | 'XL';
const products:any[]=[];
const addProduct=(data:{
title:string,
createdAt:Date,
stock:number;
size?:Sizes
}) =>{
products.push(data);
}
addProduct({
title:"pro1",
createdAt:new Date(1993,1,1),
stock:12
});
console.log(products);
addProduct({
title:"pro1",
createdAt:new Date(1993,1,1),
stock:12,
size:"XL"
});
console.log(products);
})();
Me parece genial el uso de TypeScript. La 煤nica cosa mala que le veo por ahora es que es DEMASIADO verboso 馃槄
Profe Nicolas: muy buenas las clases
Por dios TypeScript es tan hermoso
Es mucha informaci贸n pero la clase sirve para saber las bases y saber que existen ciertas cosas, lo dem谩s se aprende con practica y documentaci贸n por si se olvida algo.
Hola, observando los aportes de los compa帽eros y aplicando lo aprendido vamos a ver un Ejemplo de Literal types y destructuraci贸n de objetos en la funci贸n.
// Creamos nuestro tipo especial.
type LoginType = {
email: string;
password: string;
};
// Esta funci贸n retorna un tipo -> ________ ?
const login = (data: LoginType) => {
const { email, password } = data; // Finalmente asignamos las variables
console.log(email);
};
login({ email: '[email protected]', password: 'pedro123' });
Tambi茅n se puede usar par谩metros que son desestructurados y as铆 evitar declarar el objeto de manera explic铆ta. Gracias a eso modifique la primera funci贸n que pasa de usar data como objeto intermedio:
const login = (data : {email:string, password?: string}) => {
console.log(data.email, data.password);
}
A escribirse de manera mas corta, omitiendo la declaraci贸n expl铆cita del objeto de la siguiente forma:
const loginV2 = ( {email, password}: {email: string, password?: string}) => {
console.log(email,password);
}
Y como ven del lado derecho, donde se declaran los tipos, se puede incluir password
de forma opcional usando la misma sintaxis que vimos anteriormente usando el signo de interrogaci贸n (?). Por lo que llamar loginV2
se podr铆a hacer con un solo argumento: loginV2({email: "[email protected]"})
esto si deseamos incluir par谩metros opcionales dentro de nuestra funci贸n.
Tambien podemos usar la palabra reservada type que typeScript nos brinda para que el parametro sea esperado como un objeto
(()=>{
type Cat={
name:string,
raza:string,
age:number
}
const printInfoCat=(cat:Cat)=>{
console.log(`el gato ${cat.name} es de la raza ${cat.raza} con una edad de ${cat.age}`)
}
printInfoCat({name:'Gatito',age:2 ,raza:'cualquier'})
})
(() => {
type DataObj = {
email: string
password: string
age: number
}
const login = (data: DataObj): string => {
const { email, password, age } = data
return `email: ${email} password: ${password} age: ${age}`
}
const email = 'asd'
const password = 'asd'
const age = 32
console.log(login({email,password,age}));
})()
Excelente esto de usar objetos dentro de las funciones 馃槂
驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?
o inicia sesi贸n.