Cómo simplificar el código TypeScript usando algunos tipos de servicios básicos

TypeScript es un lenguaje de programación diseñado para ejecutar proyectos JavaScript masivos, diseñado por Microsoft. Por ejemplo, herramientas como Azure Management Portal con 1.2 millones de líneas de código y Visual Studio Code con 300 XNUMX líneas de código están todas programadas con TypeScript. TypeScript ofrece varias funciones para admitir proyectos de JavaScript más grandes, como mejores herramientas de desarrollo, verificación de tipos al compilar y documentación a nivel de código.

TypeScript le permite agregar escritura estática a su base de código. Con su potente sistema de tipos, TypeScript proporciona una mejor legibilidad del código y la capacidad de detectar errores durante el tiempo de compilación.

Uno de los aspectos más útiles de TypeScript son los tipos de utilidades integradas, que pueden simplificar sus esfuerzos de programación y ahorrar un valioso tiempo de desarrollo. Eche un vistazo a los tipos de utilidades de TypeScript que debe conocer y que pueden ayudarlo a escribir código seguro con facilidad. Verificar Las mejores aplicaciones de código abierto para la edición HTML WYSIWYG.

Cómo simplificar código TypeScript utilizando algunos tipos de servicios básicos - Aprendizaje

1. Tipos de servicios parciales

El Parcial (tipo de utilidad) de TypeScript le permite hacer que cualquier propiedad de un objeto sea opcional. Le permite crear objetos con ciertas propiedades que pueden faltar o no estar establecidas. Toma por ejemplo:

interface User { 
 name: string; 
 age: number; 
 email: string;
}

Con los tipos de servicio parcial, puede crear un nuevo tipo con todas las propiedades de la interfaz de usuario configuradas como opcionales:

type OptionalUser = Partial<User>

Ahora, puede crear una instancia de OptionalUser con solo unas pocas propiedades definidas:

const user: OptionalUser = { name: “John” };

Puede encontrar situaciones en las que necesite crear un objeto con ciertas propiedades opcionales. Esto puede ser útil especialmente cuando se crean formularios con múltiples campos, ya que no todos pueden ser obligatorios y, en tales casos, los tipos parciales pueden ser vitales.

2. Selección del tipo de servicio

El tipo de servicio Pick de TypeScript puede ayudarlo a crear un nuevo tipo seleccionando solo un subconjunto de propiedades de un tipo existente. Es útil cuando necesita reducir un objeto más grande a solo unas pocas propiedades requeridas o si desea forzar una escritura estricta en las propiedades que necesita.

interface User { 
 location: string;
 age: number; 
 email: string;
}

type PersonWithoutEmail = Pick<User, ‘location’ | ‘age’>;

const person: PersonWithoutEmail = { 
 location: ‘USA’, 
 age: 30 
};

En este ejemplo, la interfaz denominada Usuario define tres propiedades: correo electrónico, edad y ubicación.

utilizando el tipo de servicio Pick Puede extraer de forma selectiva las propiedades Ubicación y Edad de la interfaz de usuario, lo que crea un nuevo tipo llamado PersonWithoutEmail.

Luego puede crear una nueva instancia de tipo "Persona sin correo electrónico" y establecer valores solo para las propiedades "Persona sin correo electrónico" y "Edad". Dado que la propiedad "correo electrónico" se omite en este tipo, no puede asignarla al objeto.

Con el tipo de servicio Pick, puede crear un nuevo tipo que incluya solo las propiedades que desee. Esto puede ayudar a que su código sea más legible y más fácil de trabajar.

3. Tipo de servicio de solo lectura

El tipo de servicio de solo lectura indica que los atributos de un objeto no se pueden cambiar después de la creación. Este tipo garantiza la coherencia a largo plazo de los datos de los objetos, lo que da como resultado un procesamiento de código más fluido y seguro.

interface User {
 readonly name: string; 
 readonly age: number; 
 readonly email: string;
}

Utilizando El tipo de servicio de solo lectura , puede crear un nuevo tipo con todas las propiedades de la interfaz de usuario establecidas en solo lectura:

type ReadonlyUser = Readonly<User>

Puede especificar valores de propiedad al instanciar ReadonlyUser::

const user: ReadonlyUser = { 
 name: “John”, 
 age: 30, 
 email: “john@example.com” 
};

Cuando marcas las propiedades de un elemento como de solo lectura, intentar modificar los valores de esas propiedades se vuelve imposible:

user.name = “Jane”;
// Error: Cannot assign to ‘name’ because it is a read-only property.

El tipo de servicio de solo lectura es especialmente importante en situaciones en las que desea asegurarse de que un objeto en particular no cambie, independientemente de su referencia. Por ejemplo, si tiene un objeto que contiene opciones de configuración importantes, es posible que desee asegurarse de que permanezcan sin cambios.

4. Tipo de servicio requerido

Este tipo garantiza que existen todas las propiedades básicas de un objeto, mientras que el tipo de servicio Parcial proporciona más flexibilidad al permitirle especificar un subconjunto de propiedades mientras deja otras propiedades opcionales. Esto puede ser útil en situaciones en las que algunas características pueden no ser necesarias o estar sujetas a cambios.

interface User {
 name: string; 
 location: number; 
 address: string;
}

mediante el uso de Tipo de servicio Obligatorio , es posible crear un nuevo tipo que recopile todos los atributos de la interfaz de usuario y requiera que cada una de estas propiedades esté presente. Solo se puede crear una instancia de RequiredUser después de que todas sus propiedades se hayan configurado correctamente.

const user: RequiredUser = { 
 name: “John Doe”, 
 location: “USA”, 
 address: “Kansas 9745–0622” 
};

El uso del tipo de servicio Requerido asegura que todas las propiedades requeridas estén presentes dentro del objeto.

5. Tipo de servicio Omitir

El tipo de servicio Omitir le permite crear un nuevo tipo excluyendo ciertas propiedades de un tipo existente.

interface Person {
 location: string; 
 age: number;
 email: string;
}

type PersonWithoutEmail = Omit<Person, ‘email’>;
const person:PersonWithoutEmail = { location: “USA”; age : 30 };

La interfaz de persona contiene tres propiedades: edad, ubicación y correo electrónico. El tipo PersonWithoutEmail usa el tipo de servicio Omit para incluir todas las propiedades del objeto Person, excepto el correo electrónico. A continuación, puede crear una instancia de este nuevo tipo, sin especificar un valor para la propiedad de correo electrónico.

Debe tener en cuenta que el tipo Omit Servant comparte muchas similitudes con el tipo Pick Servant, ya que le permite inventar un nuevo tipo utilizando solo las propiedades que especifique.

6. Registro de tipo de servicio

Puede utilizar el tipo de servicio Record para definir el tipo de un objeto para el que las claves y los valores tienen un tipo asignado. Su definición es:

type Record<K extends keyof any, T> = { [P in K]: T;};

Este tipo asocia T con el valor de cada clave, mientras que K es la unión de claves de cualquier tipo. El objeto resultante tiene el tipo de su propiedad P establecido en T.

Considere un escenario de tipo de objeto con claves de cadena y valores numéricos. En este caso, puede aplicar el tipo Tipo de servicio Registro Como sigue:

type MyRecord = Record<string, number>;

const myObject: MyRecord = { 
 “foo”: 1, 
 “bar”: 2, 
 “baz”: 3,
}

Este ejemplo define MyRecord como un tipo de objeto con claves de cadena y valores numéricos. myObject es un modelo de este tipo, con las teclas 'foo', 'bar' y 'baz' asignadas a sus valores correspondientes. Verificar Las mejores herramientas gratuitas y pagas de monitoreo de cambios en el contenido del sitio web.

Simplifique su código con los tipos de servicios de TypeScript

Este artículo reveló el increíble poder de los tipos de servicio en TypeScript: pueden ser un activo invaluable cuando se trata de simplificar su código y hacer que el desarrollo sea más rápido y eficiente. Estos tipos de herramientas, y TypeScript en general, pueden hacer maravillas para asegurarse de que su código esté siempre libre de errores y se adhiera a ciertas estructuras. Puedes ver ahora Cómo convertirse en un profesor de programación independiente.

Ir al botón superior