Desde que comenzamos esta serie, el aprendizaje de TypeScript tiene un largo camino por recorrer. El primer tutorial proporcionó una breve introducción a TypeScript y sugirió varios IDE que puede usar para crear TypeScript. El segundo tutorial se centró en los tipos de datos y el tercer tutorial cubrió los conceptos básicos de la interfaz de TypeScript.
Como sabrá, JavaScript acaba de agregar soporte nativo para clases y programación orientada a objetos. Sin embargo, TypeScript permite a los desarrolladores usar clases en su código durante largos períodos de tiempo. Luego, este código se compila en JavaScript y funciona en todos los principales navegadores. En este tutorial, aprenderá acerca de las clases de TypeScript. Son similares a la contraparte ES6, pero más rigurosos.
Tabla de contenidos
Creando primera clase
Empecemos con lo básico. Las clases son una parte fundamental de la programación orientada a objetos. Use una clase para representar una entidad que tiene algunas propiedades y funciones que pueden afectar una propiedad en particular. TypeScript le brinda control completo sobre las propiedades y funciones a las que puede acceder dentro y fuera, incluidas sus propias clases. Este es un ejemplo muy básico de creación. Person clase.
class Person {
name: string;
constructor(theName: string) {
this.name = theName;
}
introduceSelf() {
console.log("Hi, I am " + this.name + "!");
}
}
let personA = new Person("Sally");
personA.introduceSelf();
El código anterior crea una clase muy simple llamada Person..Esta clase tiene una propiedad llamada name Función llamada introduceSelf.. Esta clase también tiene un constructor, que también es básicamente una función. Sin embargo, el constructor es especial porque se llama cada vez que crea una nueva instancia de la clase.
También puede pasar parámetros al constructor para inicializar varias propiedades. Este ejemplo usa un constructor para inicializar el nombre de la persona que lo crea. Person clase. los introduceSelf La función es un método de Person Es una clase y se usa aquí para enviar el nombre de la persona a la consola. Los constructores de todas estas propiedades, métodos y clases se denominan colectivamente miembros de clase.
deberías recordarlo Person La clase no crea automáticamente personas por sí misma. Funciona como un plano que contiene toda la información sobre un atributo que una persona debería haber creado una vez. Con eso en mente, creamos una nueva persona y la llamamos Sally.llamada de método introduceSelf Imprime la línea «¡Hola, soy Sally!» para esta persona. A la consola.
Calificadores públicos y privados
En la sección anterior, creamos una persona llamada Sally. Ahora puede cambiar el nombre de una persona de Sally a Mindy en cualquier parte de su código, como se muestra en el siguiente ejemplo.
class Person {
name: string;
constructor(theName: string) {
this.name = theName;
}
introduceSelf() {
console.log("Hi, I am " + this.name + "!");
}
}
let personA = new Person("Sally");
// Prints "Hi, I am Sally!"
personA.introduceSelf();
personA.name = "Mindy";
// Prints "Hi, I am Mindy!"
personA.introduceSelf();
Como habrás notado, pude usar ambos. name Propiedades y introduceSelf Métodos fuera de la clase contenedora.Esto significa que todos los miembros de la clase TypeScript public Por defecto.También puede agregar palabras clave para especificar explícitamente que la propiedad o el método es público. public antes de que.
En algunos casos, es posible que no desee que se pueda acceder a una propiedad o método desde fuera de la clase que lo contiene. Esto se puede lograr haciendo que estos miembros sean privados. private palabra clave.En el código anterior puede crear una propiedad de nombre private Evita que se modifique fuera de la clase contenida.Después de este cambio, TypeScript mostrará un error similar al siguiente: name la propiedad es private Y solo puedes acceder a su interior Person clase. La siguiente captura de pantalla muestra un error en Visual Studio Code.
Herencia con TypeScript
La herencia le permite comenzar con una clase base y crear clases más complejas. por ejemplo, Person Crear basado en la clase de la sección anterior Friend Clase con todos los miembros de Person Agregue sus propios miembros. Similar, Family también Teacher clase.
Todos ellos heredan los métodos y propiedades de Person Agregue sus propios métodos y propiedades para que se destaquen. El siguiente ejemplo debería hacerlo más claro.También agregué el código para Person Crearemos una clase aquí para que podamos comparar fácilmente el código de la clase base y la clase derivada.
class Person {
private name: string;
constructor(theName: string) {
this.name = theName;
}
introduceSelf() {
console.log("Hi, I am " + this.name + "!");
}
}
class Friend extends Person {
yearsKnown: number;
constructor(name: string, yearsKnown: number) {
super(name);
this.yearsKnown = yearsKnown;
}
timeKnown() {
console.log("We have been friends for " + this.yearsKnown + " years.")
}
}
let friendA = new Friend("Jacob", 6);
// Prints: Hi, I am Jacob!
friendA.introduceSelf();
// Prints: We have been friends for 6 years.
friendA.timeKnown();
Como puedes ver extend Palabras clave Friend Una clase que hereda todos los miembros de Person clase. Es importante recordar que el constructor de una clase derivada siempre debe llamar al constructor de la clase base. super()..
Es posible que haya notado el constructor de Friend No tenía que tener el mismo número de parámetros que la clase base.Sin embargo, el parámetro de nombre se pasó a super() Esto también aceptó un parámetro para llamar al constructor del padre.No necesitaba ser redefinido introduceSelf Función interna Friend Porque fue heredado de la clase. Person clase.
Uso de calificadores protegidos
Hasta ahora, solo he creado miembros de la clase. private también public.. Publicarlos los hace accesibles desde cualquier lugar, pero mantener a los miembros privados los limita a las clases que contienen. Es posible que desee que los miembros de la clase base sean accesibles en todas las clases derivadas.
Puedes usar protected Los calificadores en tales casos limitan el acceso de los miembros a las clases derivadas únicamente.También puedes usar protected Una palabra clave con un constructor de clase base. Esto evita que alguien cree una instancia de esa clase. Sin embargo, puede extender la clase en función de esta clase base.
class Person {
private name: string;
protected age: number;
protected constructor(theName: string, theAge: number) {
this.name = theName;
this.age = theAge;
}
introduceSelf() {
console.log("Hi, I am " + this.name + "!");
}
}
class Friend extends Person {
yearsKnown: number;
constructor(name: string, age: number, yearsKnown: number) {
super(name, age);
this.yearsKnown = yearsKnown;
}
timeKnown() {
console.log("We have been friends for " + this.yearsKnown + " years.")
}
friendSince() {
let firstAge = this.age - this.yearsKnown;
console.log(`We have been friends since I was ${firstAge} years old.`)
}
}
let friendA = new Friend("William", 19, 8);
// Prints: We have been friends since I was 11 years old.
friendA.friendSince();
En el código anterior, age propiedad protected.. Esto resultará en age Fuera de las clases derivadas de Person..también usamos protected Palabras clave del constructor para Person clase.Declare el constructor de la siguiente manera protected Esto significa que no podrá instanciar directamente Person clase. La siguiente captura de pantalla muestra un error que aparece al intentar crear una instancia de una clase. protected constructor.
última idea
En este tutorial, traté de cubrir los conceptos básicos de las clases de TypeScript.Empecé el tutorial creando algo muy básico. Person Una clase que envía el nombre de la persona a la consola.Entonces tú private palabra clave. Esto se puede usar para evitar el acceso a los miembros de la clase en cualquier punto del programa.
Finalmente, aprendió cómo extender varias clases en su código usando clases base con herencia.Hay mucho más que puedes aprender sobre tu clase Documentación oficial..
Si tiene alguna pregunta relacionada con este tutorial, háganoslo saber en los comentarios.
