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
You don't have access to this class
Keep learning! Join and start boosting your career
In TypeScript we can also use Aliases to define the type structure that an object should have:
//TypeScripttype userData = { username: string, email: string}
And then this "new type" can be used in an array
, for example, to define the typing of the objects we want to add:
//TypeScripttype userData = { username: string, email: string}let usersList: userData[] = []; usersList.push({ username: "freddier", //CORRECTemail: "[email protected]", //CORRECT}); usersList.push({ username: "cvander", //CORRECTemail: true, // ERROR. Must be of type string and NOT of type boolean});
Contribution created by: Martín Álvarez.
Contributions 38
Questions 8
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;
}
>
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
brutal
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"
})
})();
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
Siento que TypeScript es como el hijo entre C# y JavaScript jaja
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.’
De verdad Typescript le da superpoderes a JavaScript, un excelente curso sin duda, Nicolas es todo un experto
(() => {
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
✅
Que potente
Mi cerebro en el minuto 1:30 xD
DIOSS como no lo pensé :0
Esto ayuda muchísimo en las APIS
Entré al curso con 0 expectative de que me fuese a gustar TS y la verdad lo estoy amando es genial! ♥
En fastApi que se trabaja en python, al trabajar con tipado, se trabaja practicamente igual
Genial lo he venido usando desde que comenzó el año y me quedo con TS.
Ayuda a tener mejores practicas para desarrollar aplicaciones y además permite aplicar POO.
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)
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.
Want to see more contributions, questions and answers from the community?