7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. TypeScript

TypeScript para principiantes, Parte 4: Clases

Scroll to top
Read Time: 7 mins
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 3: Interfaces
TypeScript for Beginners, Part 5: Generics

Spanish (Español) translation by Ruben Solis (you can also view the original English article)

Hemos recorrido un largo camino en el aprendizaje de TypeScript desde que comenzamos esta serie. El primer tutorial te dio una breve introducción a TypeScript y sugirió algunos IDEs que puedes usar para escribir TypeScript. El segundo tutorial se centró en los tipos de datos, y el tercer tutorial discutió los conceptos básicos de las interfaces en TypeScript.

Como ya sabrás, JavaScript hace poco tiempo ha agregado soporte nativo para clases y programación orientada a objetos. Sin embargo, TypeScript ha permitido a los desarrolladores usar clases en su código durante mucho tiempo. Este código se compila a JavaScript que funcionará en todos los principales navegadores. En este tutorial, aprenderás sobre las clases en TypeScript. Son similares a sus homólogas en ES6 pero son más estrictas.

Creando tu primera clase

Empecemos con lo básico. Las clases son una parte fundamental de la programación orientada a objetos. Utilizas clases para representar cualquier entidad que tenga algunas propiedades y funciones que puedan actuar sobre determinadas propiedades. TypeScript te brinda control total sobre las propiedades y funciones a las que se puede acceder dentro y fuera de su propia clase contenedora. Aquí hay un ejemplo muy básico de crear una clase Person (Persona, en español).

El código anterior crea una clase muy simple llamada Person. Esta clase tiene una propiedad llamada name (nombre, en español) y una función llamada introduceSelf. La clase también tiene un constructor, que es básicamente una función. Sin embargo, los constructores son especiales porque son llamados cada vez que creamos una nueva instancia de nuestra clase.

También puedes pasar parámetros a los constructores para inicializar diferentes propiedades. En nuestro caso, estamos usando el constructor para inicializar el nombre de la persona que estamos creando usando la clase Person. La función introduceSelf es un método de la clase Person, y la estamos usando aquí para imprimir el nombre de la persona en la consola. Todas estas propiedades, métodos y el constructor de una clase se denominan de forma genérica miembros de la clase.

Debes tener en cuenta que la clase Person no crea automáticamente una persona por sí misma. Actúa más como un diseño con toda la información sobre los atributos que una persona debería tener, una vez creada. Con eso en mente, creamos una nueva persona y la llamamos Sally. Al llamar al método introduceSelf en esta persona se imprimirá la línea "Hi, I am Sally!" ("¡Hola, soy Sally!", en español) en la consola.

Modificadores privados y públicos

En la sección anterior, creamos una persona llamada Sally. En este momento, es posible cambiar el nombre de la persona de Sally a Mindy en cualquier parte de nuestro código, como se muestra en el siguiente ejemplo.

Es posible que hayas notado que pudimos usar tanto la propiedad de name como el método introduceSelf fuera de la clase que lo contiene. Esto se debe a que todos los miembros de una clase en TypeScript son public (públicos, en español) por defecto. También puedes especificar explícitamente que una propiedad es pública o que un método es público agregando la palabra clave public antes de la propiedad o el método.

A veces, no quieres que se pueda acceder a una propiedad o a un método fuera de la clase que lo contiene. Esto se puede lograr haciendo que esos miembros sean privados utilizando la palabra clave private. En el código anterior, podemos hacer que la propiedad de name sea private y evitar que se cambie fuera de la clase que lo contiene. Después de este cambio, TypeScript te mostrará un error diciendo que la propiedad de name es private y que solo puedes acceder a ella dentro de la clase Person. La siguiente captura de pantalla muestra el error en Visual Studio Code.

A private property not accessible outside its classA private property not accessible outside its classA private property not accessible outside its class

Herencia en TypeScript

La herencia te permite crear clases más complejas a partir de una clase base. Por ejemplo, podemos usar la clase Person de la sección anterior como base para crear una clase Friend (Amigo, en español) que tendrá todos los miembros de Person y agregará algunos miembros propios. Del mismo modo, también puedes agregar una clase Family (Familia, en español) o Teacher (maestro, en español).

Todas esas clases heredarán los métodos y propiedades de Person al tiempo que agregan sus propios métodos y propiedades para diferenciarlas. El siguiente ejemplo debería aclararlo. También he agregado el código para la clase Person aquí para que puedas comparar fácilmente el código de la clase base y la clase derivada.

Como puedes ver, debes usar la palabra clave extend para que la clase Friend pueda heredar todos los miembros de la clase Person. Es importante recordar que el constructor de una clase derivada siempre debe invocar al constructor de la clase base con una llamada a super().

Es posible que hayas notado que el constructor de Friend no necesitaba tener el mismo número de parámetros que la clase base. Sin embargo, el primer parámetro name se pasó a super() para invocar al constructor del padre, que también aceptó un parámetro. No tuvimos que redefinir la función introduceSelf dentro de la clase Friend porque fue heredada de la clase Person.

Usando el modificador protegido

Hasta este punto, solo hemos hecho que los miembros de una clase sean private o public. Si bien hacerlos públicos nos permite acceder a ellos desde cualquier lugar, hacer que los miembros sean privados los limita a su propia clase contenedora. A veces es posible que quieras que los miembros de una clase base sean accesibles dentro de todas las clases derivadas.

Puedes utilizar el modificador protected (protegido, en español) en tales casos para limitar el acceso de un miembro solo a clases derivadas. También puedes usar la palabra clave protected con el constructor de una clase base. Esto evitará que alguien cree una instancia de esa clase. Sin embargo, aún podrás extender clases basadas en esta clase base.

En el código anterior, puedes ver que hicimos la propiedad age (edad, en español) protected. Esto evita el uso de age fuera de las clases derivadas de Person. También hemos usado la palabra clave protected para el constructor de la clase Person. Declarar el constructor como protected significa que ya no podremos instanciar directamente la clase Person. La siguiente captura de pantalla muestra un error que aparece al intentar crear una instancia de una clase con el constructor protected.

TypeScript protected constructorTypeScript protected constructorTypeScript protected constructor

Reflexiones finales

En este tutorial, he tratado de cubrir los conceptos básicos de las clases en TypeScript. Comenzamos el tutorial creando una clase muy básica Person que imprimía el nombre de la persona en la consola. Después de eso, aprendiste sobre la palabra clave private, que se puede utilizar para evitar que se acceda a los miembros de una clase en cualquier punto arbitrario del programa.

Finalmente, aprendiste cómo extender diferentes clases en tu código usando una clase base con herencia. Hay mucho más que puedes aprender sobre las clases en la documentación oficial.

Si tienes alguna pregunta relacionada con este tutorial, házmelo saber en los comentarios.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.