No tienes acceso a esta clase

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

Acceder al tipado por indice

20/22
Recursos

Acceder al tipado por índice se hace de una manera muy similar a la cual accedemos a valores en arrays dentro de JavaScript, pero en este caso, aplicado a una interface, enum, entre otros, para acceder al tipo de dato de una propiedad y que dicho tipado sea asignado en otra parte del código.

Acceso por índice en una interfaz en TypeScript

Veamos un ejemplo de cómo podríamos acceder al tipado de la propiedad de una interfaz y utilizar este tipado en otra parte del código como en el parámetro en la definición de una función:

interface Human {
    id: string;
    name: string;
    age: number;
    isAlien: boolean;
}

function createHuman(name: Human["name"]) {
  // code
}

En este caso, el parámetro id en la función createHuman sería un string. La ventaja de esto es que si nosotros cambiáramos el tipo de dato de id a number en la interfaz Human, automáticamente el tipo de dato del parámetro name de la función createHuman sería number también, pues, el tipado se sincronizaría.

Contribución creada por: Martín Álvarez (Platzi Contributor) con el aporte de Irving Juárez.

Aportes 20

Preguntas 0

Ordenar por:

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

Esta clase me voló la cabeza. TS definitivamente es mucho mejor que JS.
.

Como acceder al tipado de cierta propiedad?

Lo hacemos de una manera muy similar a la cual accedemos a valores en arrays dentro de JS, pero en este caso, en lugar de hacerlo en un array, lo aplicamos a una interfaz.

interface Human {
  name: string;
  age: number;
  isAlien: boolean;
}

function createHuman(name: Human["name"]) {
    // code
}

En este caso, el parámetro name en la función createHuman seria un string. La ventaja de esto es que si nosotros cambiamos ese tipo de dato por cualquier otra cosa, se cambia en automático.

Les comparto mis apuntes. 😄

Acceder al tipado por índice

Podemos acceder al tipado de una interface por media de bracket notation, al colocar una propiedad entre comillas dentro de los brackets vamos a obtener por resultado el tipo de dato que tiene esa propiedad.

Al colocar el tipo de dato de esta forma nos evitamos los dolores de cabeza cuando se nos cambien algún tipo de dato de nuestra interface por alguna razón.

Sintaxis

InterfaceName['property']

Ejemplo

const updateProduct = (idSearch: Product['id'])

En este caso estamos pasando como tipo de dato una interface y como índice tenemos a una de sus propiedades, por ende lo que en realidad recibe la propiedad de la función (idSearch) es el tipo de dato de ese índice de la interface.

QUE BRUTAL! 🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯

Un pequeño ejemplo para recapitular

planteamos el posible escenario de que una compañía desea manipular sus datos de(color de auto, modelo, y num de placa) como strings o number pero no ambos, aun no se ha decidido la misma.
entonces no se desea retrasar el proyecto por lo tanto se define que con una simple variables definir el tipado de nuestras propiedades.
Así que para el momento en el que se decida o simplemente quiera cambiar el tipado solo se haga un cambio de la variable.
assetsCarType


type assetsCartype = number; // OPC1

//ó

type assetsCartype = string; // OPC2

// le decimos que la empresa prefiere manejar o bien con numeros o con strings
interface Car {
    id: number,
    code: assetsCartype,
    color: assetsCartype,
    model: assetsCartype;
}

const verifyCarModel = (color: Car['color']) => {
    if(typeof color === 'number') {
        console.log("Se ha decidido el tipado por: numbers");
    } else if(typeof color === 'string') {
        console.log("Se ha decidido el tipado por: strings");
    }
}

verifyCarModel(0xff0000); // OPC 1 (recuerden que en hexadecimal la notacion es: 0x + numeroEnHex)

verifyCarModel('red'); // OPC 2

Interesante, suena como el %TYPE en oracle…

Parce!!! me enamore de Typescript

Acceder al tipado por indice

Podemos acceder al tipado por indice 🤯🤯🤯

const updateProduct = (id: Product['id']) => {}

Así, si cambian el tipado de ‘id’ de Product, no habrá problemas (depende de caso).

Este es un buen tip bastante interesante para hacer código un poco mas mantenible, básicamente con esto nos aprovechamos de los tipos que ya tenemos, o dicho de mejor forma, nos aprovechamos de las interfaces que ya creamos y luego las llamamos como si fueran arrays u objetos. ``` interface example { prop1: number; prop2: string } const funtion1 = (prop: exmple\['prop1']) => {} ```
Que bárbaro!

en resumen:

interface IInitialVariable {
    property: string
  }
  // const newVariable: IInitialVariable['property'] = 5    // ERROR
  const newVariable: IInitialVariable['property'] = ''
  console.log(typeof newVariable === 'string');
me recuerda mucho a la forma nativa de javascript para acceder a las propiedades de un objeto por medio del nombre de la propiedad: ```js const myObj = { name:"some string", number:1234, }; console.log(myObj["name"]); ```const myObj = { name:"some string", number:1234, }; console.log(myObj\["name"]);
Wow, si hubiera aprendido esto antes me hubiera ahorrado mucho tiempo y dolores de cabeza en mi trabajo 😅
Esta funcionalidad me voló la cabeza. Aquí me doy cuenta que TypeScript tiene bastante reusabilidad

lol creo que adopte a mi nuevo mejor amigo jaja

Justo cuando hacia el update pense “hay alguna manera de relacionar el tipado que declaramos en las propiedades con los de la interfaz?” :0 Imagina las posibilidades !!!

:00000000
Me exploto la cabeza realmente estaba pensando y como arreglo todo eso??? Si desde el principio lo declaras con un indice un parametro no te tienes que preocupar :0

Simplemente hermoso. Typescript hace cosas que por ejemplo en C# no he visto.

This is amazing 🌟 🌟 🌟 🌟 🌟

ME CASO CON TYPESCRIPT SEÑORES!!!

Otra forma muy interesante es poder agregar un nuevo campo a la interface, es la siguiente:

[key: string]   : unknown;

Quedando de la siguiente manera

export interface Product extends BaseModel {
  [key: string]: unknown;
  title: string;
  image: string;
  description: string;
  stock: number;
  size?: Sizes;
  color: string;
  price: number;
  category: Category;
  isNew: boolean;
  tags: string[];
}

Esto sirve también para poder acceder a cualquier atributo y poder hacer lo que se necesite de forma dinámica sin perder el tipado:

const product = {} as Product:
product['price']