Typescript class
Classes in Typescript behave very similar to classes you would see in C# or Java. The syntax is slightly different from the most notable change in constructor syntax.
A simple example of a class is shown below.
class Shape {
name: string;
constructor(n:string) {
this.name=n;
}
getName() { return this.name;}
}Note how the constructor uses the keyword constructor instead of the class name. Also note that when we refer to a class property, we need to prefix the name with "this." Both ideas are different from the C# or Java classes you've seen before.
We can create an object using this class by using new keyword as shown below.
let blob1 = new Shape("blob");Inheritance is also similar to other languages. For example, we can extend the above class as shown in the following example.
class Square extends Shape {
side: number;
constructor(n:string, s:number) {
super(n);
this.side = s;
}
area() { return this.side * this.side;}
details() {
return "shape:" + super.getName() + ", Area:" + this.area();
}
}This example also demonstrates how to use the super() function to call the constructor of a base class. It also demonstrates how to use the super keyword to access inherited members of a base class. An example of creating a Square object is as follows.
let square1 = new Square("square", 2);You may have noticed that we do not use the public, private, and protected keywords that are enforced in other languages. In Typescript, public is the default access modifier for all class members, and we used the default value in the class declaration above. Private and protected keywords operate exactly like in other languages. As an example of their usage, we can annotate the Shape class above as follows.
class Shape {
private name: string;
public constructor(n:string) { this.name=n; }
public getName() { return this.name;}
}By using the private keyword on the name property we prevent direct access to it (even within the super class). This limits the definition of the Square class above in that we can only access the property using the public getName() member function.
The following activities review these access modifiers.
Typescript also allows us to specify read-only properties in classes where the value can only be assigned in the property definition or in the constructor of the class. We can also specify static properties that are associated with a class rather than an object. These two methods behave exactly like the C# or Java equivalents you saw earlier. This will be revised in the activity below.
We can also specify abstract classes and use them in the same way as C# or Java. We designate a class as abstract class when there is no object to create from it and abstract class is only useful for inheritance hierarchy. Member functions are designated as abstract functions when the abstract class does not provide any implementation but the derived class must provide implementation. This is no different than what you've seen before in C# or Java, but revised in the activity below.
Activity
1. Write down the class definition of the Rectangle class (similar to the Square class above), which is defined by two additional parameters length and width. Compared to the Square class, this class will have an additional property and constructor parameters.
public class Rectangle extends Shape {
private double length; // 长度，默认私有访问修饰符，只能在类内部访问
private double width; // 宽度，默认私有访问修饰符，只能在类内部访问
public Rectangle(double length, double width) {
this.length = length;
this.width = width;
}
public double getLength() {
return length;
}
public void setLength(double length) {
this.length = length;
}
public double getWidth() {
return width;
}
public void setWidth(double width) {
this.width = width;
}
@Override
public double area() {
return length * width;
}
}2. Completely annotate it using public, private and protected access modifiers.
public class Rectangle extends Shape {
private double length; // 长度，默认私有访问修饰符，只能在类内部访问
private double width; // 宽度，默认私有访问修饰符，只能在类内部访问
public Rectangle(double length, double width) {
this.length = length;
this.width = width;
}
public double getLength() {
return length;
}
public void setLength(double length) {
this.length = length;
}
public double getWidth() {
return width;
}
public void setWidth(double width) {
this.width = width;
}
@Override
public double area() {
return length * width;
}
}3. Redefine the Shape class as an abstract class. Add an abstract Area() method to force derived classes to implement it.
public abstract class Shape {
public abstract double area(); // 抽象方法，需要在派生类中实现
}The last property of Typescript classes is that we can specify the interface implemented in the class, as we saw in the previous section of reading. Again, this should be familiar to you from previous research.
3. Implement the above Shape and Square classes. Create some Square objects and use console.log() to print the area of the square.
public class Rectangle extends Shape {
private double length;
private double width;
public Rectangle(double length, double width) {
this.length = length;
this.width = width;
}
public double getLength() {
return length;
}
public void setLength(double length) {
this.length = length;
}
public double getWidth() {
return width;
}
public void setWidth(double width) {
this.width = width;
}
@Override
public double area() {
return length * width;
}
}4. Implement a new Rectangle class, which is derived from the Shape class. This class will have two new properties, length and width. Create some Rectangle objects and print their areas using the console.log() function.
Rectangle rectangle1 = new Rectangle(4, 6);
Rectangle rectangle2 = new Rectangle(8, 12);
System.out.println("Area of Rectangle 1: " + rectangle1.area());
System.out.println("Area of Rectangle 2: " + rectangle2.area());