No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Objetos como tipos

20/24
Recursos

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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.