Nicolas, en realidad hasta este punto del curso estoy muy emocionado y mi perspectiva de TS cambio por completo, en realidad estoy completamente seguro de implementar TS en mis futuros proyectos con React y aumentar mis skills.
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
En TypeScript también podemos usar los Alias para definir la estructura de tipado que debería tener un objeto:
//TypeScript
type userData = {
username: string,
email: string
}
Y luego este “nuevo tipo” puede ser usado en un array
, por ejemplo, para definir el tipado de los objetos que queramos añadir:
//TypeScript
type userData = {
username: string,
email: string
}
let usersList: userData[] = [];
usersList.push({
username: "freddier", //CORRECTO
email: "[email protected]", //CORRECTO
});
usersList.push({
username: "cvander", //CORRECTO
email: true, // ERROR. Debe ser de tipo string y NO de tipo boolean
});
Contribución creada por: Martín Álvarez.
Aportes 27
Preguntas 6
Nicolas, en realidad hasta este punto del curso estoy muy emocionado y mi perspectiva de TS cambio por completo, en realidad estoy completamente seguro de implementar TS en mis futuros proyectos con React y aumentar mis skills.
En caso de que se quiera usar el destructuring se puede hacer de las siguiente manera
type Product = {
title: string;
createdAt: Date;
stock: number;
size?: Sizes;
};
const printProduct = ({ title, createdAt, stock, size }: Product) => {
console.log(title);
console.log(createdAt);
console.log(stock);
console.log(size);
};
A partir de ahora voy a forzarme a relizar todos los proyectos que pueda siempre en TypeScript si tengo elección.
yo preferiria usar interfaces para poder extenderlas si es que se quieran agregar mas tipos y llevar un mejor ordern.
<
interface Product {
title: string;
createdAt: Date;
stock: number;
size?: Sizes;
}
>
brutal
Una debilidad de los type es uqe no son extensibles o no se les puede agragar mas propiedades luego de ser definidos
Pensar en todas las posibilidades de implementacion!
Creo que alguien esta pensando en rehacer varios proyectos en TS :man
Siento que TypeScript es como el hijo entre C# y JavaScript jaja
Con los type Alias también podemos definir la estructura de un objeto como tipo de dato. Por lo que ahora podriamos hacer lo siguiente:
type Product = {
title: string,
createdAt: Date,
stock: number,
size?: Sizes
}
const products: Product[] = [];
const addProduct = (data: Product){
@code...
}
Y ahora podriamos reutilizar el tipo Product
justo como lo hacemos con el tipo Sizes
Gracias, Gracias !!! haces que todo tenga sentido!!
No está disponible el video. Muestra el siguiente mensaje: ‘The media could not be loaded, either because the server or network failed or because the format is not supported.’
(() => {
type DataObj = {
email: string
password: string
age: number
}
const dataObjList : DataObj[] = []
const obj1 : DataObj = {
email: 'asdsa',
password: 'asds',
age : 13
}
const obj2 : DataObj = {
email: 'dfdsf',
password: 'dfdf',
age : 24
}
dataObjList.push(obj1,obj2)
console.log(dataObjList);
})()
Yo antes le huía a TypeScript, pero ahora lo veo desde una perspectiva mas amigable y definitivamente lo voy a implementar a mis proyectos React de forma obligatoria para acostumbrarme a su uso y ya despues sea algo natural en mi.
Ya quiero usar TypeScript + Vue 3
Excelente
excelente curso! le tenia miedo a TS, pero la manera que explica el profesor es un lujo! 💪🏼
Cada ves se coloca mas emocionante TS , esta herramienta la vi en un directo y me parecio genial https://quicktype.io/typescript (Tiene Extension para VSCODE)
el contenido de la clase:
(() => {
type Sizes = 'S' | 'M' | 'L' | 'XL';
type product={
title:string,
createdAt:Date,
stock:number;
size?:Sizes
};
const products:any[]=[];
const addProduct=(data:product) =>{
products.push(data);
}
addProduct({
title:"Pro1",
createdAt:new Date(1993,1,1),
stock:12
});
console.log(products);
addProduct({
title:"Pro2",
createdAt:new Date(1993,1,1),
stock:12,
size:"XL"
});
console.log(products);
products.push({
title:"Prod3",
createdAt:new Date(1992,1,1),
stock:12,
size:"XL"
})
})();
Gran curso, Nicolas
Gracias
Muy padre todo el curso
Ya han pasado varios meses desde el lanzamiento del curso y mi prespectiva de Typescript ha cambiado, ahora si me doy cuenta que la ayuda es maxima al momento de codear
Bastante práctico definir el tipado de objetos, Typescript hace que el código esté mucho más ordenado y prolijo.
No sé por qué, pero me parece que TS no es tan complicado.
Con lo visto hasta esta calse nuestro example de las primeras clases quedaria así.
(async ()=> {
type Products = {
id: number,
title: string,
price: number,
description: string,
category: object,
images: [],
}
const myCart = [];
const products: Products[] = [];
const limit:number = 2;
const url:string;
async function getProducts() {
const rta = await fetch(url, {
method: 'GET'
});
const data = await rta.json();
products.push(data);
}
function getTotal() {
let total = 0;
for (let i = 0; i < products.length; i++) {
total += products[i].price;
}
return total;
}
function addProduct(index: number) {
if (getTotal() <= limit) {
myCart.push(products[index]);
}
}
await getProducts();
addProduct(1);
addProduct(2);
const total = getTotal();
console.log(total);
const person = {
name: 'Nicolas',
lastName: 'Molina'
}
/* const rta = person + limit;
console.log(rta); */
});
The media could not be loaded, either because the server or network failed or because the format is not supported.
Esta clase no carga
Excelente Nicolas, hace ver las cosas más simples para aprender.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.