Los 5 mandamientos del desarrollador de TypeScript

Cada vez más proyectos y equipos están utilizando TypeScript. Sin embargo, solo aplicar TypeScript y exprimirlo al máximo es algo muy diferente.

Le presento una lista de las mejores prácticas de alto nivel para usar TypeScript que lo ayudarán a aprovechar al máximo este lenguaje.

No mientas

Tipos es un contrato. ¿Qué significa esto? Cuando implementa una función, su tipo se convierte en una promesa para otros desarrolladores (¡o para usted mismo en el futuro!) Que, cuando se llama, esta función devolverá un cierto tipo de valor.

En el siguiente ejemplo, el tipo de la función getUser asegura que devuelve un objeto que siempre tiene dos propiedades: name y age .

 interface User { name: string; age: number; } function getUser(id: number): User { /* ... */ } 

TypeScript es un lenguaje muy flexible. Tiene muchos compromisos diseñados para facilitar la introducción del lenguaje. Por ejemplo, le permite implementar la función getUser esta manera:

 function getUser(id: number): User { return { age: 12 } as User; } 

¡No hagas eso! Esto es falso. Al crear dicho código, Mientes a otros desarrolladores (que usarán tu función en sus funciones). Esperan que el objeto devuelto por getUser siempre tenga algún tipo de campo de name . ¡Pero él no está allí! Además, ¿qué sucede cuando su colega escribe getUser(1).name.toString() ? Sabes muy bien que ...

Aquí, por supuesto, la mentira parece obvia. Sin embargo, al trabajar con una base de código grande, a menudo se encontrará en situaciones en las que el valor que desea devolver (o pasar) casi coincide con el tipo esperado. Se necesita tiempo y esfuerzo para encontrar la causa de la falta de coincidencia de tipos , y tiene prisa ... por lo que decide utilizar la conversión de tipos.

Sin embargo, al hacer esto, estás rompiendo el contrato sagrado . SIEMPRE es mejor asignar tiempo y comprender por qué los tipos no coinciden que utilizar la conversión de tipos. Es muy probable que algún error de tiempo de ejecución se esconda debajo de la superficie.

No mientas Obedece tus contratos.

Se preciso

Los tipos son documentación. Al documentar una función, ¿no desea transmitir tanta información como sea posible?

 //   function getUser(id) { /* ... */ } //     : name  age function getUser(id) { /* ... */ } //  id       id , //     : name  age. //     undefined. function getUser(id) { /* ... */ } 

¿Qué comentario para la función getUser gustaría más? Cuanto más sepa que regresa una función, mejor. Por ejemplo, sabiendo que puede regresar undefined , puede escribir un bloque if para verificar si el objeto que devolvió la función está definido antes de solicitar las propiedades de este objeto.

Exactamente lo mismo con los tipos: cuanto más exactamente se describe un tipo, más información transmite.

 function getUserType(id: number): string { /* ... */ } function getUserType(id: number): 'standard' | 'premium' | 'admin' { /* ... */ } 

La segunda versión de la función getUserType mucho más informativa y, por lo tanto, la persona que llama se encuentra en una situación mucho más conveniente. Es más fácil procesar el valor si probablemente sabe (contratos, ¿recuerda?) Que será una de las tres líneas dadas, y no cualquier línea. Para comenzar con lo que sabe con certeza: un valor no puede ser una cadena vacía.

Consideremos un ejemplo más real. El tipo de State describe el estado del componente que solicita algunos datos del backend. ¿Es este tipo exacto?

 interface State { isLoading: boolean; data?: string[]; errorMessage?: string; } 

Un cliente que usa este tipo debe manejar una combinación poco probable de valores de propiedades estatales. Por ejemplo, una situación es imposible cuando las propiedades data y errorMessage se definen simultáneamente: una solicitud de datos puede tener éxito o fallar.

Podemos hacer que el tipo sea mucho más preciso con la ayuda de tipos de unión discriminados :

 type State = | { status: 'loading' } | { status: 'successful', data: string[] } | { status: 'failed', errorMessage: string }; 

Ahora el cliente que usa este tipo tiene mucha más información: ya no necesita procesar combinaciones incorrectas de propiedades.

Se preciso. Pase tanta información como sea posible sobre sus tipos.

Comience con tipos

Dado que los tipos son tanto un contrato como una documentación, son excelentes para diseñar sus funciones (o métodos).

Hay muchos artículos en Internet que aconsejan a los programadores que piensen antes de escribir el código . Comparto completamente este enfoque. La tentación de saltar directamente al código es genial, pero esto a menudo conduce a malas decisiones. Pasar un poco de tiempo pensando en la implementación siempre vale la pena.

Los tipos son extremadamente útiles en este proceso. Pensar lleva a la creación de firmas de tipos de funciones relacionadas con la resolución de su problema. Y eso es genial, porque te enfocas en lo que hacen tus funciones, en lugar de pensar en cómo lo hacen.

React JS tiene el concepto de componentes de orden superior (HOC). Estas son funciones que extienden el componente dado de alguna manera. Por ejemplo, puede crear un componente de orden superior withLoadingIndicator que agrega un indicador de carga a un componente existente.

Escribamos una firma de tipo para esta función. La función acepta una entrada de componente y también devuelve un componente. Para representar un componente, podemos usar el tipo React ComponentType .

ComponentType es un tipo genérico que se parametriza por el tipo de propiedades del componente. withLoadingIndicator acepta un componente y devuelve un nuevo componente que muestra el componente original o el indicador de carga. La decisión sobre qué mostrar se basa en el valor de la nueva propiedad lógica: isLoading . Por lo tanto, el componente devuelto necesita las mismas propiedades que el original, solo se agrega la nueva propiedad isLoading .

Finalizaremos el tipo. withLoadingIndicator acepta un componente de tipo ComponentType<P> , donde P denota el tipo de propiedad. withLoadingIndicator devuelve un componente con propiedades avanzadas de tipo P & { isLoading: boolean } .

 const withLoadingIndicator = <P>(Component: ComponentType<P>) : ComponentType<P & { isLoading: boolean }> => ({ isLoading, ...props }) => { /* ... */ } 

Al tratar los tipos de funciones, nos vimos obligados a pensar en lo que estará en su entrada y en la salida. En otras palabras, tuvimos que diseñar una función . Escribir su implementación ahora es fácil.

Comience con los tipos. Deje que los tipos lo obliguen a diseñar primero, y solo luego escriba la implementación.

Toma rigor

Los primeros tres mandamientos requieren que prestes especial atención a los tipos. Afortunadamente, al resolver este problema, no tiene que hacer todo usted mismo; a menudo, el compilador TypeScript le informará cuándo sus tipos están mintiendo o cuando no son lo suficientemente precisos.

Puede ayudar al compilador a hacerlo aún mejor si incluye el indicador --strict . Este es un meta indicador que --noImplicitAny todas las opciones estrictas de verificación de tipos: --noImplicitAny , --noImplicitThis , --alwaysStrict , --strictBindCallApply , --strictNullChecks , --strictFunctionTypes y --strictPropertyInitialization .

¿Qué hacen las banderas? En términos generales, su inclusión conduce a un aumento en el número de errores de compilación de TypeScript. Y esto es bueno! Más errores de compilación: más ayuda del compilador.

Veamos cómo activar el indicador --strictNullChecks ayuda a detectar un falso en el código.

 function getUser(id: number): User { if (id >= 0) { return { name: 'John', age: 12 }; } else { return undefined; } } 

El tipo getUser asegura que la función siempre devuelve un objeto de tipo User . Sin embargo, observe la implementación: ¡una función también puede volver undefined !

Afortunadamente, habilitar el indicador --strictNullChecks produce un error de compilación:

 Type 'undefined' is not assignable to type 'User'. 

El compilador TypeScript detecta falsedades. Para deshacerse de este error, honestamente diga toda la verdad:

 function getUser(id: number): User | undefined { /* ... */ } 

Acepte el rigor de la verificación de tipos. Deje que el compilador lo proteja de los errores.

Mantenerse al día

TypeScript se está desarrollando a un ritmo muy rápido. Se lanza un nuevo lanzamiento cada dos meses. Cada versión trae mejoras significativas en el lenguaje y nuevas características.

A menudo sucede que las nuevas características del lenguaje le permiten definir tipos con mayor precisión y verificarlos más estrictamente.

Por ejemplo, en la versión 2.0 se introdujeron los Tipos de Unión Discriminada (los mencioné en el mandamiento Sea preciso ).

La versión 3.2 introdujo el indicador del compilador --strictBindCallApply , que incluye la escritura correcta para las funciones de --strictBindCallApply , call y apply .

La versión 3.4 mejoró la inferencia de tipos en funciones de orden superior , lo que facilitó el uso de tipos exactos al escribir código en un estilo funcional.

Mi posición es que conocer las características del lenguaje introducidas en las versiones recientes de TypeScript realmente vale la pena. A menudo, esto puede ayudarlo a seguir los otros cuatro mandamientos de la lista.

Un buen punto de partida es la hoja de ruta oficial de TypeScript . También será bueno revisar regularmente la sección TypeScript en Microsoft Devblog , ya que todos los anuncios de lanzamiento van allí.

Manténgase actualizado con las nuevas características del lenguaje y deje que este conocimiento trabaje para usted.

Resumen

Espero que encuentre útil la lista. Como siempre y en todo, uno no debe seguir ciegamente estos mandamientos. Pero creo firmemente que estas reglas te harán un mejor desarrollador de TypeScript.

Estaré encantado de ver tus pensamientos sobre este tema en los comentarios.

Bono

¿Te ha gustado este artículo sobre TypeScript? Estoy seguro de que también le gustará este PDF gratuito: 10 errores de desarrollo de TypeScript que hacen que su código sea inseguro.