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 15

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榠d鈥 de Product, no habr谩 problemas (depende de caso).

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 鈥渉ay 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']