Last active
March 10, 2022 11:06
-
-
Save Sojer23/cd2fee34fb610c7810f7862c9a6411d5 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
///////////////////////////////////////////////// | |
////////////////Partial<Type>//////////////////// | |
///////////////////////////////////////////////// | |
// Toma como entrada un tipo y convierte todas sus | |
// propiedades en opcionales. | |
interface Developer { | |
id: number; | |
name: string; | |
phone: string; | |
email: string; | |
address?: string; | |
birthDate: undefined | string; | |
} | |
type PartialDeveloper = Partial<Developer>; | |
function updateDevProfile(dev: Developer, fieldsToUpdate: PartialDeveloper) { | |
return { ...dev, ...fieldsToUpdate }; | |
} | |
const dev1: Developer = { | |
id: 1, | |
name: "José", | |
phone: "+34610511489", | |
email: "[email protected]", | |
address: "Avda. América 115", | |
birthDate: "01/10/1995" | |
}; | |
const devUpdated: Developer = updateDevProfile(dev1, { | |
email: "[email protected]", | |
}); | |
const dev2: Partial<Developer> = { | |
id: 2, | |
name: "Alberto", | |
phone: "+34695632123", | |
}; | |
///////////////////////////////////////////////// | |
////////////////Required<Type>/////////////////// | |
///////////////////////////////////////////////// | |
/** | |
* Crea un tipo que convierte todas las propiedades | |
* opcionales a requeridas. | |
*/ | |
type CompleteDevProfile = Required<Developer>; | |
const devProfile: CompleteDevProfile = { | |
id: 1, | |
name: "Daniel Ferreira", | |
phone: "+34665432123", | |
email: "[email protected]", | |
address: "c/ React", | |
birthDate: "11/10/19XX", | |
}; | |
///////////////////////////////////////////////// | |
////////////////Readonly<Type>/////////////////// | |
///////////////////////////////////////////////// | |
/** | |
* Toma un objeto y hace que sus propiedades sean de solo lectura. | |
*/ | |
type DeveloperFromAPI = Readonly<Developer>; | |
const devProfileReadOnly: DeveloperFromAPI = { | |
id: 1, | |
name: "Ainhoa Salsidua", | |
phone: "+34652365321", | |
email: "[email protected]", | |
birthDate: "22/01/XXXX", | |
}; | |
//devProfileReadOnly.email = "[email protected]"; | |
///////////////////////////////////////////////// | |
///////////Record<KeysFrom, Type>//////////////// | |
///////////////////////////////////////////////// | |
/** | |
* Crea un tipo que usa la lista de propiedades del | |
* parametro KeysFrom y les asigna el valor del tipo. | |
*/ | |
// Lista con keys para KeysFrom: | |
type NavigationPages = "home" | "developers" | "about" | "contact"; | |
/** | |
* La forma de los datos requerida para cada una de | |
* las keys anteriores: | |
*/ | |
interface PageInfo { | |
title: string; | |
url: string; | |
axTitle?: string; | |
} | |
const navigationInfo: Record<NavigationPages, PageInfo> = { | |
home: { title: "Home", url: "/" }, | |
about: { title: "About", url: "/about" }, | |
contact: { title: "Contact", url: "/contact" }, | |
developers: { title: "developers", url: "/developers/all" }, | |
}; | |
///////////////////////////////////////////////// | |
////////////////ReturnType<Type>///////////////// | |
///////////////////////////////////////////////// | |
// Extrae el valor de retorno de Type. | |
type DeveloperResponse = ReturnType<() => string>; | |
const getDevContact = (dev: Developer) => { | |
return { phone: dev.phone, email: dev.email }; | |
}; | |
type DeveloperContact = ReturnType<typeof getDevContact>; | |
///////////////////////////////////////////////// | |
///////////////Pick<Type, Keys>////////////////// | |
///////////////////////////////////////////////// | |
/** | |
* Crea un tipo seleccionando el conjunto de propiedades de | |
* Keys definidas en Type. Esencialmente, una lista de permisos | |
* para extraer información de tipo. | |
*/ | |
type DevPersonalInfo = Pick<Developer, "name" | "birthDate" | "address">; | |
const personalInfo: DevPersonalInfo = { | |
name: "José", | |
birthDate: "23/11/1995", | |
//address: 'Avda. América 115', | |
//phone: '+34654231123' | |
}; | |
///////////////////////////////////////////////// | |
///////////////Omit<Type, Keys>////////////////// | |
///////////////////////////////////////////////// | |
/** | |
* Crea un tipo eliminando el conjunto de propiedades definidas | |
* en Keys del objeto Type. Esencialmente, una lista de prohibición | |
* para extraer información de tipo de un tipo. | |
*/ | |
type DeveloperAnonymized = Omit< | |
Developer, | |
"name" | "phone" | "email" | "address" | "birthDate" | |
>; | |
const anonymousDev: DeveloperAnonymized = { | |
id: 2, | |
//name: "José", | |
//email: "[email protected]", | |
//phone: "+34654231123", | |
//address: "Avda. América 115", | |
//birthDate: "23/11/1995" | |
}; | |
///////////////////////////////////////////////// | |
///////////Exclude<Type, RemoveUnion>//////////// | |
///////////////////////////////////////////////// | |
// Crea un tipo conformado por las propiedades definidas en | |
// Type que no se superponen con las definidas en RemoveUnion. | |
type Pages = "admin" | "contact" | "products" | "home" | "profile"; | |
type AllowPages = Exclude<Pages, "admin">; | |
const allowPages: AllowPages[] = ["contact", "products"/*, "admin"*/]; | |
///////////////////////////////////////////////// | |
///////////Extract<Type, MatchUnion>///////////// | |
///////////////////////////////////////////////// | |
// Crea un tipo conformado por las propiedades definidas en | |
// Type que se superponen con las definidas en MatchUnion. | |
type AuthPages = Extract<Pages, "admin" | "profile">; | |
const forbiddenPages: AuthPages[] = ["admin", "profile"/*, "contact"*/]; | |
///////////////////////////////////////////////// | |
////////////////NonNullable<Type>//////////////// | |
///////////////////////////////////////////////// | |
// Crea un tipo conformado por la exclusión del valor null y | |
// undefined de un conjunto de propiedades. Muy útil cuando | |
// tienes una condición de validación. | |
type DeveloperAPIResult = Developer | undefined | null; | |
type ValidatedResult = NonNullable<DeveloperAPIResult>; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment