Autor: God Q Superman
Traductor: Front-end Xiaozhi
Fuente: medio
Si tiene sueños y productos secos, puede buscar [Great Move to the World] en WeChat y prestar atención a este Shawanzhi que todavía está lavando platos en las primeras horas de la mañana.
Se ha incluido este artículo GitHub https://github.com/qq449245884/xiaozhi , hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.
Dado que JavaScript en sí mismo es un lenguaje débil, a menudo se angustia por no saber qué tipo de variable está en desarrollo Incluso si el posicionamiento de la variable se aclara un poco al nombrarla, todavía es difícil para nosotros saber su tipo de un vistazo Cuando esta variable es object, es más difícil saber qué keycontiene, por lo que las personas gradualmente comienzan a usar TypeScript como su principal herramienta de desarrollo.
No sé si sientes que TypeScript es particularmente molesto cuando estás desarrollando con TypeScript, aunque es muy bueno saber que estas acciones de verificación de tipos pueden ayudarnos a reducir muchos errores potenciales que pueden ocurrir. este problema cuando nos encontramos con este tipo de problema en el desarrollo.
escena uno
No sé si te has encontrado con este tipo de problema. Hoy, quiero hacer que esta variable verifique si enumcoincide con un cierto valor en , pero TypeScript lo roció mal para ti, como el siguiente.
De hecho, hay muchas formas de resolver la letra roja anterior. La primera es usarla @ts-ignorepara hacer desaparecer el error. Por supuesto, este método es muy malo. Es equivalente a decirle a TypeScript que no verifique la siguiente línea.
En este momento, puedo pensar en otro método. El mensaje de error anterior es que esto maleno lo ha recibido, asíassign que solo lo fuerzo a esto , así:GENDERtypetype
Pero todavía no es bueno escribir de esta manera, significa que estás forzando el cambio de la variable, lo que hace que la variable pierda su flexibilidad. A continuación, presentaremos un método más útil, ¡continuemos leyendo!
tipo guardia
Lo primero que debemos presentar es Type Guard . Type Guard, como su nombre lo indica, es un tipo de protección. Justo ahora, TypeScript informará un error porque el tipo es diferente, así que siempre que creemos un tipo de protección, informe a TypeScript de que esto La variable definitivamente enumcoincidirá con value, la letra roja no aparecerá en este momento y, por lo general, Type Guard se escribirá functionasí :
const assertsIsGender = (gender: any) : gender is GENDER => {
return Object.values(GENDER).includes(gender)
}
En este momento, podemos encontrar que genderesta variable ha cambiado de stringtipo a GENDERtipo, por lo que incluso si estoy aburrido y hago includesotro juicio, TypeScript no informará ningún error.
Aquí asigno genderque la variable sea un stringtipo antes de asignar el valor. Esta acción es muy importante. Si no se asigna primero el tipo de variable y luego se asigna el valor, la variable no se puede typecambiar .
escena dos
No sé si te has encontrado con los datos devueltos en la API, y se producirán errores porque enumlos diferentes, como los siguientes:
Con el concepto anterior de Type Guard, los lectores en este momento deben saber escribir un functionpara lidiar con este mensaje de error:
Es cierto que el mensaje de error se ha ido, pero es muy genderextraño convertido en un nevertipo, y este es un mecanismo de protección de tipo que hará Type Guard: Narrowing .
Tipo Estrechamiento
El estrechamiento traducido al vernáculo es estrechamiento de tipo . En el mundo de TypeScript, cada uno enumes básicamente independiente y no tiene intersección entre sí. El diagrama de relaciones es el siguiente:
Por lo tanto, para realizar la conversión de tipo entre dos enumeraciones, es fácil generar un tipo que puede no existir. Para el tipo que puede no existir, TypeScript define este tipo como nevery, en este momento, cuando usamos la técnica de Type Guard, TypeScript reducirá automáticamente el tipo a never typeuno en lugar de convertirlo automáticamente a enumotro .
Por supuesto, puede pensar así si es inteligente: entonces solo necesito function returndefinir otro enum, para poder asegurarme de que el resultado de mi Type Guard se convertirá a la enumeración que quiero, como la siguiente:
Parece que no hay ningún problema en escribir de esta manera, y el resultado que queremos ha cambiado de estrechamiento de tipos a conversión de tipos , pero en realidad esto es un poco inconsistente con el espíritu de Type Guard. Después de todo, Type Guard hace verificación de tipos en lugar de Type. conversión, y si lo que queremos hacer es conversión de tipos, esto también hará que functionla reutilización de esto no sea alta, por lo que presentaremos un mejor método de conversión de tipos a continuación.
Enumeración del asignador
En primer lugar, podemos pensar en cómo hacer que la conversión de tipos se reutilice. También podríamos simplificar la idea, es decir, crear functionuna Aconversión de tipo a Btipo , y en este momento, debemos usar el tipo genérico Generics en TypeScript. , Me gusta esto:
const createEnumMapper = <T>(mapping: T) => (value: keyof T | null) : T[keyof T] | undefined => {
return value === null ? undefined : mapping[value]
}
createEnumMapperLa función de this es one currying function, y la primera variable que se pasa es la propia enumeración En este momento, Generics of TypeScript sabrá que my Testá relacionado enumconsigo mismo.
Para que Genericsesto empareje correctamente los dos enum mapping, primero debemos crear un emparejamiento objectde los enumdos key valuecomo este:
const mapper = {
[BE_GENDER.MALE]: FE_GENDER.MALE,
[BE_GENDER.FEMALE]: FE_GENDER.FEMALE
}
Dado que lo anterior mapperes tratar a enum valuecomo key, podemos convertir directamente datael , como se muestra a continuación:
[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leech, se recomienda guardar la imagen y subirla directamente (img-uaof0Gel-1645574343364)(/img/bVcXRjL)]
En este momento, podemos encontrar que hemos BE_GENDERconvertido exitosamente el valor de tipo en FE_GENDERel valor de tipo, y no necesitamos usar el concepto de Type Guard.
Resumir
Hoy, introduje los métodos usados para verificar tipos en TypeScript. Si los lectores encuentran problemas similares en el futuro, pueden usar Type Guard para verificar más, en lugar de usarlos directamente. @ts-ignoreO asestos dos métodos, además de introducir la verificación de tipos, también introducción En cuanto a cómo realizar la conversión de tipos, espero que estos métodos permitan a los lectores utilizarlos sin demasiados problemas en el futuro.
Soy Shawanzhi. En el nuevo año, cepillémonos juntos.
Los errores que pueden existir después de que se implementa el código no se pueden conocer en tiempo real. Para resolver estos errores después, se dedica mucho tiempo a la depuración de registros. Por cierto, recomiendo una útil herramienta de monitoreo de errores , Fundebug .