Cómo comprobar tipos en JavaScript sin usar TypeScript

Descubra cómo agregar tipos a JavaScript sin usar TypeScript

Si no has estado viviendo bajo una piedra, sabrás algo sobre TypeScript . Es un nuevo lenguaje presentado por Microsoft y básicamente es JavaScript con tipos (y se compila a JavaScript para ejecutarse en el navegador).

Ahora lo he usado en algunos proyectos de prueba, pero tiendo a evitar escribir mis tutoriales en TypeScript por varias razones.

Lo primero es que escribo principalmente tutoriales para principiantes y TypeScript no es normalmente con lo que la gente comienza.

Además, creo que si empiezo a escribir cosas en TypeScript, generaré confusión: ¿de qué estoy hablando?

Los fanáticos de TypeScript aún pueden hacer uso de los tutoriales de JavaScript, ya que JavaScript puede adaptarse muy bien a sus archivos TypeScript, mientras que lo opuesto no es cierto.

Por lo tanto, me quedo con los fundamentos de la plataforma web en lugar de con las tecnologías que se basan en ella.

Dicho esto…

Hay ocasiones en las que me resultaría beneficioso tener tipos en JavaScript. Son útiles.

este vídeo del increíble Paul Lewis, descubrí que realmente podemos tener tipos en JavaScript , ¡usando VS Code !

Primero, necesitas tener instalado TypeScript, si aún no lo tienes:

npm install -g typescript

Luego, agrega un tsconfig.jsonarchivo a la raíz de tu proyecto. Suponiendo que tienes los archivos JavaScript en la srccarpeta, esta es la cantidad mínima de configuración que necesitas en ese archivo:

{ "compilerOptions": { "outFile": "../../built/local/tsc.js", "checkJs": true, "allowJs": true }, "include": [ "src/*" ]}

Puedes decidir excluir carpetas, por ejemplo es una buena idea excluir node_modules:

{ "compilerOptions": { "outFile": "../../built/local/tsc.js", "checkJs": true, "allowJs": true }, "include": [ "src/*" ], "exclude": [ "node_modules", ]}

Ahora, VS Code puede señalar errores de tipo en nuestro código JavaScript.

Y puede hacerlo automáticamente, sin que nosotros tengamos que hacer nada.

En particular, puede inferir los tipos de parámetros de función utilizando el valor predeterminado.

Digamos que tenemos esta función, donde timesse le asigna el valor predeterminado de 2:

const multiply = (aNumber, times = 2) = { return aNumber * times}

Ahora, como el segundo parámetro tiene un valor predeterminado, podemos llamar a esta función conTe recomendamos El Blog de la ginebra y el whisky on the rocks

multiply(20)

para multiplicar 20 por 2, o así multiplicarlo por 10:

multiply(20, 10)

Pero si pasas, por ejemplo, una cadena como segundo parámetro como multiply(20, 'hey'), VS Code ahora te dirá que hay un problema:

El argumento de tipo ‘“hey”’ no se puede asignar al parámetro de tipo ‘número’

¡Impresionante!

También podemos realizar este tipo de comprobación de tipos para argumentos que no tienen un valor predeterminado. Puedes hacerlo usando JSDoc , que normalmente se usa como generador de API, y agregando sugerencias de tipos:

/** * @param {number} aNumber */const multiply = (aNumber, times = 2) = { return aNumber * times}

⚠️ No olvides el doble **al inicio del comentario, de lo contrario las cosas no funcionarán como se espera.

Ahora si intentas llamar multiply('ho!')también recibirás un error:

El argumento de tipo ‘“ho!”’ no se puede asignar al parámetro de tipo ‘número’

Además de number, puedes configurar los siguientes tipos:

• null
• undefined
• boolean
• string
• Array
• Object

Ejemplo:

/** * @param {null} aNull * @param {undefined} anUndefined * @param {boolean} aBoolean * @param {string} aString * @param {Array} anArray * @param {Object} anObject */const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) = { console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)}

Ahora bien, por supuesto, sería mejor no tener que añadir anotaciones en los comentarios y que el propio código te diga la verdad . Si puedes vivir con esta forma de hacer las cosas, ¡genial! De lo contrario, existe TypeScript.

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript

Cómo comprobar tipos en JavaScript sin usar TypeScript

Si no has estado viviendo bajo una piedra, sabrás algo sobre TypeScript . Es un nuevo lenguaje presentado por Microsoft y básicamente es JavaScript con tipos

programar

es

2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente