Cree Valueof personalizado similar a Keyof para devolver la unión de tipos de valor de propiedad en TypeScript

1. Devolver unión de tipos de valor de propiedad usando valueof en TypeScript
2. Devolver unión de tipos de valor de propiedad usando keyof y typeof en TypeScript
3. Obtener tipo de valor de propiedad usando las claves individuales en TypeScript
4. Verifique el valor clave en el momento de la compilación usando genéricos en TypeScript

En este tutorial, aprenderemos las diferentes formas que podemos usar para devolver los tipos que componen nuestra propiedad o un objeto.

Hay tres formas que podemos usar para realizar esta funcionalidad. Uno de los métodos aprovecha los genéricos para crear un tipo personalizado denominado valueof que devuelve todos los tipos de unión de la propiedad.

El segundo método utiliza los tipos keyof y typeof para devolver todos los tipos de unión de la propiedad. El tercer método utiliza claves individuales para devolver un solo tipo según sea necesario.

También aprenderemos a restringir las entradas de clave-valor en el momento de la compilación si no son del mismo tipo aprovechando los tipos de acceso indexados y genéricos.

Devolver unión de tipos de valor de propiedad usando valueof en TypeScript

Vaya al código de Visual Studio y cree una carpeta llamada typescript-types o use el nombre que prefiera. Cree un archivo llamado value-types-using-valueof.ts debajo de la carpeta.

Copie y pegue el siguiente código en el archivo value-types-using-valueof.ts.

type ValueOf<T> = T[keyof T];

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

type ValueOfCustomer = ValueOf<Customer>

let customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
}

function logDetails(customerInfo: ValueOfCustomer){
   console.log(customerInfo)
}

logDetails(customer.firstName)
logDetails(customer.lastName)
logDetails(customer.doB)
logDetails(500)// Error - The union does not include type number

Primero, definimos un tipo genérico ValueOf<T> y lo asignamos a T[keyof T]. La T significa que se puede pasar cualquier tipo al ValueOf, ya sea una propiedad o un objeto.

El keyof devuelve la unión de todos los tipos de clave que pertenecen al tipo pasado.

Hemos creado el objeto Cliente que contiene las propiedades firstName, lastName y doB. Las dos primeras propiedades son de tipo cadena y la última propiedad es de tipo Fecha.

A continuación, hemos creado un tipo llamado ValueOfCustomer pasando Customer al tipo genérico ValueOf<Customer>. El ValueOfCustomer es nuestro nuevo tipo compuesto por la unión de todos los tiempos clave en el objeto Customer.

Eso significa que ValueOfCustomer solo puede aceptar valores con el tipo cadena y fecha.

Para verificar, hemos creado un método llamado logDetails() que acepta un parámetro de tipo ValueOfCustomer y lo usamos para registrar el firstName, lastName y doB de Customer.

Tenga en cuenta que si intentamos pasar un valor que no es de tipo cadena o fecha, como un número en el método, obtendremos un error porque el argumento del método solo acepta una cadena o un número.

Devolver unión de tipos de valor de propiedad usando keyof y typeof en TypeScript

En la misma carpeta, cree un archivo llamado value-types-using-keyof-and-typeof.ts. Copie y pegue el siguiente código en el archivo.

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

const customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
} as const

type customertypes = typeof customer[keyof Customer]

function getCustomerInfo(theCustomerTypes: customertypes){
    console.log(theCustomerTypes)
}

getCustomerInfo(customer.firstName)
getCustomerInfo(customer.lastName)
getCustomerInfo(customer.doB)
getCustomerInfo(234)//Error - The union does not include type number

En el código anterior, hemos definido nuestro tipo de Cliente que contiene las propiedades firstName, lastName y doB. Las dos primeras propiedades son de tipo cadena y la última propiedad es de tipo Fecha.

El objeto Cliente se inicializa con valores concretos para cada propiedad del objeto. El tipo denominado tiposclientes ha sido creado y asignado a tipodecliente[clavedelcliente].

En el último ejemplo, mencionamos que keyof devuelve la unión de todos los tipos de claves. Y esto se ha aplicado a nuestro objeto Cliente para hacer lo mismo.

El typeof devolverá todos los tipos obtenidos del objeto Customer, que se realiza con la ayuda de keyof, como se muestra en el código.

Para verificar esto, hemos creado un método llamado getCustomerInfo() que acepta un parámetro de tipo customertypes y lo usamos para registrar los valores de nuestro objeto Customer.

Tenga en cuenta que si intentamos pasar un valor que no es de tipo cadena o fecha, como un número, en el método obtendremos un error porque el nuevo tipo no contiene un número de tipo.

Obtener tipo de valor de propiedad usando las claves individuales en TypeScript

En los dos ejemplos anteriores, hemos cubierto cómo recuperar la unión de todos los tipos de valor, pero en algunos casos, es posible que solo le interese un tipo de objeto.

En este ejemplo, aprenderá cómo recuperar un tipo de valor único de un objeto usando las claves individuales.

En la misma carpeta, cree un archivo llamado individual-keys.ts. Copie y pegue el siguiente código en el archivo.

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

type date = Customer['doB']

function getDateOfBirth(doB: date): Date{
    return doB;
}

let customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
}

getDateOfBirth(customer.doB)
getDateOfBirth(123)//Error - Method accepts a single parameter of type date

En este ejemplo, hemos reutilizado la misma definición de cliente que en los ejemplos anteriores. El tipo de fecha se ha creado haciendo referencia a la clave doB de la definición del cliente utilizando Customer['doB'].

Esto significa que el nuevo tipo date es de tipo Fecha. El getDateOfBirth() contiene un solo parámetro de tipo date y se ha utilizado para verificar que solo se le pueden pasar tipos de fecha, como se muestra en el código.

Si intentamos pasar un valor que no sea del tipo fecha, como por ejemplo un número, obtendremos un error porque el parámetro está restringido a un solo tipo.

Verifique el valor clave en el momento de la compilación usando genéricos en TypeScript

Como se vio en los ejemplos anteriores, un objeto se compone de una clave y un valor. A veces, es posible que nos enfrentemos a un requisito para cambiar los valores de un objeto en función de sus claves.

En este tutorial, aprenderemos a asegurarnos de que los valores que pasamos se verifiquen en el momento de la compilación para garantizar que sean del mismo tipo que las claves.

Cree un archivo llamado key-value-checking.ts en la misma carpeta. Copie y pegue el siguiente código en el archivo.

type Shipment = {
    containerItems: string,
    containerSerial: string
    shipmentDate: Date
}

declare function updateShipment<K extends keyof Shipment>(key: K, value: Shipment[K]): void;

updateShipment('containerItems','flowers')
updateShipment('containerSerial','def456');
updateShipment('shipmentDate',new Date(2018,3,14))
updateShipment('shipmentDate',1337)// Error- Shipment object does not contain type number

En el código anterior, hemos definido un objeto llamado Shipment que contiene los parámetros containerItems, containerSerial y shipmentDate.

Las dos primeras propiedades son de tipo cadena y la última propiedad es de tipo Fecha. Hemos definido un método genérico llamado updateShipment().

El método updateShipment() acepta dos parámetros donde uno es una clave y el segundo es un valor para el objeto Shipment.

La clave debe ser cualquier tipo de las claves de objeto Shipment, y estas se verifican usando <K extends keyof Shipment> en el parámetro de paréntesis angulares.

Como tenemos la clave K, podemos restringir los valores pasados ​​a esta clave indexando las claves para el objeto Shipment usando Shipment[K]. Con esta definición, cada valor que ingresamos para la clave debe ser del mismo tipo que la clave.

Tenga en cuenta que si intenta pasar un valor no definido en el objeto Shipment, como un número, el compilador señala el problema.