¡Eyy hola que tal dev! Muy buenas. Bievenid@ al canal, Aitor otra vez por aquí. Y hoy continuamos con la sección de TyperScript.
Es posible, que ya sabiendo que son las variables, cómo vimos en ese artículo, te preguntes cómo puedes usarlas en TyperScript. Pues bien, déjame que te diga que esto nos ha sucedido a todos los que empezamos en el lenguaje. No es solo cosa tuya.
Cómo sabrás, mi nombre es Aitor y soy desarrollador desde hace más de 6 años ya. Y en este artículo te voy a enseñar cómo puedes definir, inicializar y utilizar las variables en un programa realizado en TypeScript.
Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.
P.D: Darse de alta es gratis y de baja, también.
Una última cosa, déjame decirte que he grabado una clase en video sobre este tema para el que le guste ver más que leer. Si te mola el contenido solo te pido, por favor, que te suscribas al canal desde aquí. Es importante para mí saber que te ha gustado/ayudado ¿Y qué mejor manera para saberlo que esta? 🙂
Consultar estructura del artículo
Información previa
Antes de continuar es importante comentar que las variables pueden tener dos estados diferentes cuando son usadas en código y esto es aplicable a todos los lenguajes de programación, no solo a TypeScript.
El primer estado es la “definición”. Una variable está definida cuando la hemos creado (definido) en el código, pero aún no le hemos asignado ningún valor. Básicamente le hemos dicho al sistema que reserve un espacio de memoria pero que aún no vamos a meter nada.
El segundo es la “inicialización”. Una variable está inicializada cuando ya hemos introducido un valor en el espacio reservado que hemos definido en el punto anterior, en el estado de definición.
Para terminar este punto, una variable no puede ser inicializada sin ser definida, pero si que pueden suceder los dos pasos en la misma línea cómo vamos a ver ahora en este ejemplo:
//Definicióin e inicialización separadas var edad: number; edad = 20; //Definición e inicialización en la misma línea. var edadAitor: number = 18; // :)
Sintaxis de nuestras variables
En TS las variables constan de 3 partes. Dichas partes van separadas por un espacio.
- Primera parte, el rango de alcance (var, let)
- Var -> Hace que la variable pueda ser accedida de forma global desde nuestro programa. Se hereda de Javascript y su uso es recomendado en casos escasos.
- Let -> Hace que la variable sea solo accesible desde el bloque de código donde se está programando.
- Segunda parte, el nombre de la variable
- Siempre tendrá que iniciar una letra, no valen número ni símbolos cómo primer caracter.
- Dependiendo del lenguaje hay convenciones para su nombramiento.
- En TS por ejemplo se recomienda el camelCase. (Veremos lo que es esto más adelante en la web, por eso pásate por aquí y suscríbete para no perdértelo)
- Pueden ser lo largas que quieras, pero tampoco te pases, algo que le diga al programador lo que está leyendo y poco más. (Bien: edadJuan, Mal: estaEsLaEdadDeJuan)
- Tercera parte, el tipo de la variable
- Esto daría para un artículo entero en la web y un video. Pero, en resumen, le estamos diciendo al sistema que tipo de dato vamos a meter ahí. Podría ser un tipo primitivo o un tipo por referencia.
Cómo hemos hablado de los tipos primitivos, aquí voy a poner otro video que subí al canal hablando de lo que son y sus diferencias. Échale un ojo antes de continuar:
Ejemplo real de uso
Bien, pues solo queda que te muestre cómo se pueden utilizar de una manera “útil”. Si has visto el primer video ya lo habrás podido ver, pero aquí va el ejemplo y después lo comentamos:
//Definimos nuestra variable let webUtrl:string; //... //Posteriormente, en otra parte del programa le asignamos un primer valor. (La inicializamos) webUrl = "http://como-programar.net"; //... //Más adelante, dentro de una función en necesario que la variable cambie. (Actualizamos su valor) webUrl = "https://www.youtube.com/channel/UCSrwYV3ftCprDzZwIslfqVQ"; //... //El programa sigue su ejecución.
Bien, pues para el ejemplo hemos hecho uso de let, en lugar de var. Hemos llamado a nuestra variable webUrl y va a ser de tipos cadena/string.
Posteriormente la hemos inicializado con la url de nuestra web.
Y para terminar hemos cambiado su valor, por eso es una variable, por la url del canal de YT.
Info adicional
Es importante que, si te ha ayudado este contenido, y quieres seguir avanzando en tu camino cómo desarrollador, te suscribas al canal de YT desde aquí. Te enseñaré un montón de cosas que te vendrán genial para recorrerlo.
Pero si por una casualidad no te gusta YT, o no ves contenido en él, te puedes pasar por aquí también. Se trata de El Circulo y es una comunidad que estoy montando alrededor del desarrollo de software en la que te enseñaré a hacer un sueldo pasivo programando apps.
Sin nada más que agregar al artículo, quiero decirte que nos vemos en el siguiente. Hasta entonces, que vaya bien.