Traditional JavaScript uses functions and prototype-based inheritance to build up reusable components, but this may feel a bit awkward to programmers more comfortable with an object-oriented approach, where classes inherit functionality and objects are built from these classes.\nStarting with ECMAScript 2015, also known as ECMAScript 6, JavaScript programmers will be able to build their applications using this object-oriented class-based approach.\nIn TypeScript, we allow developers to use these techniques now, and compile them down to JavaScript that works across all major browsers and platforms, without having to wait for the next version of JavaScript.
\nLet’s take a look at a simple class-based example:
\n\ntsclass Greeter {\n greeting: string;\n constructor(message: string) {\n this.greeting = message;\n }\n greet() {\n return \"Hello, \" + this.greeting;\n }\n}\n\nlet greeter = new Greeter(\"world\");
The syntax should look familiar if you’ve used C# or Java before.\nWe declare a new class Greeter. This class has three members: a property called greeting, a constructor, and a method greet.
You’ll notice that in the class when we refer to one of the members of the class we prepend this..\nThis denotes that it’s a member access.
In the last line we construct an instance of the Greeter class using new.\nThis calls into the constructor we defined earlier, creating a new object with the Greeter shape, and running the constructor to initialize it.
In TypeScript, we can use common object-oriented patterns.\nOne of the most fundamental patterns in class-based programming is being able to extend existing classes to create new ones using inheritance.
\nLet’s take a look at an example:
\n\ntsclass Animal {\n move(distanceInMeters: number = 0) {\n console.log(`Animal moved ${distanceInMeters}m.`);\n }\n}\n\nclass Dog extends Animal {\n bark() {\n console.log(\"Woof! Woof!\");\n }\n}\n\nconst dog = new Dog();\ndog.bark();\ndog.move(10);\ndog.bark();
This example shows the most basic inheritance feature: classes inherit properties and methods from base classes.\nHere, Dog is a derived class that derives from the Animal base class using the extends keyword.\nDerived classes are often called subclasses, and base classes are often called superclasses.
Because Dog extends the functionality from Animal, we were able to create an instance of Dog that could both bark() and move().
Let’s now look at a more complex example.
\n\ntsclass Animal {\n name: string;\n constructor(theName: string) {\n this.name = theName;\n }\n move(distanceInMeters: number = 0) {\n console.log(`${this.name} moved ${distanceInMeters}m.`);\n }\n}\n\nclass Snake extends Animal {\n constructor(name: string) {\n super(name);\n }\n move(distanceInMeters = 5) {\n console.log(\"Slithering...\");\n super.move(distanceInMeters);\n }\n}\n\nclass Horse extends Animal {\n constructor(name: string) {\n super(name);\n }\n move(distanceInMeters = 45) {\n console.log(\"Galloping...\");\n super.move(distanceInMeters);\n }\n}\n\nlet sam = new Snake(\"Sammy the Python\");\nlet tom: Animal = new Horse(\"Tommy the Palomino\");\n\nsam.move();\ntom.move(34);
This example covers a few other features we didn’t previously mention.\nAgain, we see the extends keywords used to create two new subclasses of Animal: Horse and Snake.
One difference from the prior example is that each derived class that contains a constructor function must call super() which will execute the constructor of the base class.\nWhat’s more, before we ever access a property on this in a constructor body, we have to call super().\nThis is an important rule that TypeScript will enforce.
The example also shows how to override methods in the base class with methods that are specialized for the subclass.\nHere both Snake and Horse create a move method that overrides the move from Animal, giving it functionality specific to each class.\nNote that even though tom is declared as an Animal, since its value is a Horse, calling tom.move(34) will call the overriding method in Horse:
Slithering...\nSammy the Python moved 5m.\nGalloping...\nTommy the Palomino moved 34m.\nIn our examples, we’ve been able to freely access the members that we declared throughout our programs.\nIf you’re familiar with classes in other languages, you may have noticed in the above examples we haven’t had to use the word public to accomplish this; for instance, C# requires that each member be explicitly labeled public to be visible.\nIn TypeScript, each member is public by default.
You may still mark a member public explicitly.\nWe could have written the Animal class from the previous section in the following way:
\ntsclass Animal {\n public name: string;\n public constructor(theName: string) {\n this.name = theName;\n }\n public move(distanceInMeters: number) {\n console.log(`${this.name} moved ${distanceInMeters}m.`);\n }\n}
With TypeScript 3.8, TypeScript supports the new JavaScript syntax for private fields:
\n\ntsclass Animal {\n #name: string;\n constructor(theName: string) { this.#name = theName; }\n}\n\nnew Animal(\"Cat\").#name; // Property '#name' is not accessible outside class 'Animal' because it has a private identifier.
This syntax is built into the JavaScript runtime and can have better guarantees about the isolation of each private field.\nRight now, the best documentation for these private fields is in the TypeScript 3.8 release notes.
\nprivateTypeScript also has it’s own way to declare a member as being marked private, it cannot be accessed from outside of its containing class. For example:
\ntsclass Animal {\n private name: string;\n constructor(theName: string) {\n this.name = theName;\n }\n}\n\nnew Animal(\"Cat\").name; // Error: 'name' is private;
TypeScript is a structural type system.\nWhen we compare two different types, regardless of where they came from, if the types of all members are compatible, then we say the types themselves are compatible.
\nHowever, when comparing types that have private and protected members, we treat these types differently.\nFor two types to be considered compatible, if one of them has a private member, then the other must have a private member that originated in the same declaration.\nThe same applies to protected members.
Let’s look at an example to better see how this plays out in practice:
\n\ntsclass Animal {\n private name: string;\n constructor(theName: string) {\n this.name = theName;\n }\n}\n\nclass Rhino extends Animal {\n constructor() {\n super(\"Rhino\");\n }\n}\n\nclass Employee {\n private name: string;\n constructor(theName: string) {\n this.name = theName;\n }\n}\n\nlet animal = new Animal(\"Goat\");\nlet rhino = new Rhino();\nlet employee = new Employee(\"Bob\");\n\nanimal = rhino;\nanimal = employee; // Error: 'Animal' and 'Employee' are not compatible
In this example, we have an Animal and a Rhino, with Rhino being a subclass of Animal.\nWe also have a new class Employee that looks identical to Animal in terms of shape.\nWe create some instances of these classes and then try to assign them to each other to see what will happen.\nBecause Animal and Rhino share the private side of their shape from the same declaration of private name: string in Animal, they are compatible. However, this is not the case for Employee.\nWhen we try to assign from an Employee to Animal we get an error that these types are not compatible.\nEven though Employee also has a private member called name, it’s not the one we declared in Animal.
protectedThe protected modifier acts much like the private modifier with the exception that members declared protected can also be accessed within deriving classes. For example,
\ntsclass Person {\n protected name: string;\n constructor(name: string) {\n this.name = name;\n }\n}\n\nclass Employee extends Person {\n private department: string;\n\n constructor(name: string, department: string) {\n super(name);\n this.department = department;\n }\n\n public getElevatorPitch() {\n return `Hello, my name is ${this.name} and I work in ${this.department}.`;\n }\n}\n\nlet howard = new Employee(\"Howard\", \"Sales\");\nconsole.log(howard.getElevatorPitch());\nconsole.log(howard.name); // error
Notice that while we can’t use name from outside of Person, we can still use it from within an instance method of Employee because Employee derives from Person.
A constructor may also be marked protected.\nThis means that the class cannot be instantiated outside of its containing class, but can be extended. For example,
\ntsclass Person {\n protected name: string;\n protected constructor(theName: string) {\n this.name = theName;\n }\n}\n\n// Employee can extend Person\nclass Employee extends Person {\n private department: string;\n\n constructor(name: string, department: string) {\n super(name);\n this.department = department;\n }\n\n public getElevatorPitch() {\n return `Hello, my name is ${this.name} and I work in ${this.department}.`;\n }\n}\n\nlet howard = new Employee(\"Howard\", \"Sales\");\nlet john = new Person(\"John\"); // Error: The 'Person' constructor is protected
You can make properties readonly by using the readonly keyword.\nReadonly properties must be initialized at their declaration or in the constructor.
\ntsclass Octopus {\n readonly name: string;\n readonly numberOfLegs: number = 8;\n constructor(theName: string) {\n this.name = theName;\n }\n}\nlet dad = new Octopus(\"Man with the 8 strong legs\");\ndad.name = \"Man with the 3-piece suit\"; // error! name is readonly.
In our last example, we had to declare a readonly member name and a constructor parameter theName in the Octopus class. This is needed in order to have the value of theName accessible after the Octopus constructor is executed.\nParameter properties let you create and initialize a member in one place.\nHere’s a further revision of the previous Octopus class using a parameter property:
\ntsclass Octopus {\n readonly numberOfLegs: number = 8;\n constructor(readonly name: string) {}\n}
Notice how we dropped theName altogether and just use the shortened readonly name: string parameter on the constructor to create and initialize the name member.\nWe’ve consolidated the declarations and assignment into one location.
Parameter properties are declared by prefixing a constructor parameter with an accessibility modifier or readonly, or both.\nUsing private for a parameter property declares and initializes a private member; likewise, the same is done for public, protected, and readonly.
TypeScript supports getters/setters as a way of intercepting accesses to a member of an object.\nThis gives you a way of having finer-grained control over how a member is accessed on each object.
\nLet’s convert a simple class to use get and set.\nFirst, let’s start with an example without getters and setters.
\ntsclass Employee {\n fullName: string;\n}\n\nlet employee = new Employee();\nemployee.fullName = \"Bob Smith\";\nif (employee.fullName) {\n console.log(employee.fullName);\n}
While allowing people to randomly set fullName directly is pretty handy, we may also want enforce some constraints when fullName is set.
In this version, we add a setter that checks the length of the newName to make sure it’s compatible with the max-length of our backing database field. If it isn’t we throw an error notifying client code that something went wrong.
To preserve existing functionality, we also add a simple getter that retrieves fullName unmodified.
\ntsconst fullNameMaxLength = 10;\n\nclass Employee {\n private _fullName: string;\n\n get fullName(): string {\n return this._fullName;\n }\n\n set fullName(newName: string) {\n if (newName && newName.length > fullNameMaxLength) {\n throw new Error(\"fullName has a max length of \" + fullNameMaxLength);\n }\n\n this._fullName = newName;\n }\n}\n\nlet employee = new Employee();\nemployee.fullName = \"Bob Smith\";\nif (employee.fullName) {\n console.log(employee.fullName);\n}
To prove to ourselves that our accessor is now checking the length of values, we can attempt to assign a name longer than 10 characters and verify that we get an error.
\nA couple of things to note about accessors:
\nFirst, accessors require you to set the compiler to output ECMAScript 5 or higher.\nDownleveling to ECMAScript 3 is not supported.\nSecond, accessors with a get and no set are automatically inferred to be readonly.\nThis is helpful when generating a .d.ts file from your code, because users of your property can see that they can’t change it.
Up to this point, we’ve only talked about the instance members of the class, those that show up on the object when it’s instantiated.\nWe can also create static members of a class, those that are visible on the class itself rather than on the instances.\nIn this example, we use static on the origin, as it’s a general value for all grids.\nEach instance accesses this value through prepending the name of the class.\nSimilarly to prepending this. in front of instance accesses, here we prepend Grid. in front of static accesses.
\ntsclass Grid {\n static origin = { x: 0, y: 0 };\n calculateDistanceFromOrigin(point: { x: number; y: number }) {\n let xDist = point.x - Grid.origin.x;\n let yDist = point.y - Grid.origin.y;\n return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;\n }\n constructor(public scale: number) {}\n}\n\nlet grid1 = new Grid(1.0); // 1x scale\nlet grid2 = new Grid(5.0); // 5x scale\n\nconsole.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));\nconsole.log(grid2.calculateDistanceFromOrigin({ x: 10, y: 10 }));
Abstract classes are base classes from which other classes may be derived.\nThey may not be instantiated directly.\nUnlike an interface, an abstract class may contain implementation details for its members.\nThe abstract keyword is used to define abstract classes as well as abstract methods within an abstract class.
\ntsabstract class Animal {\n abstract makeSound(): void;\n move(): void {\n console.log(\"roaming the earth...\");\n }\n}
Methods within an abstract class that are marked as abstract do not contain an implementation and must be implemented in derived classes.\nAbstract methods share a similar syntax to interface methods.\nBoth define the signature of a method without including a method body.\nHowever, abstract methods must include the abstract keyword and may optionally include access modifiers.
\ntsabstract class Department {\n constructor(public name: string) {}\n\n printName(): void {\n console.log(\"Department name: \" + this.name);\n }\n\n abstract printMeeting(): void; // must be implemented in derived classes\n}\n\nclass AccountingDepartment extends Department {\n constructor() {\n super(\"Accounting and Auditing\"); // constructors in derived classes must call super()\n }\n\n printMeeting(): void {\n console.log(\"The Accounting Department meets each Monday at 10am.\");\n }\n\n generateReports(): void {\n console.log(\"Generating accounting reports...\");\n }\n}\n\nlet department: Department; // ok to create a reference to an abstract type\ndepartment = new Department(); // error: cannot create an instance of an abstract class\ndepartment = new AccountingDepartment(); // ok to create and assign a non-abstract subclass\ndepartment.printName();\ndepartment.printMeeting();\ndepartment.generateReports(); // error: method doesn't exist on declared abstract type
When you declare a class in TypeScript, you are actually creating multiple declarations at the same time.\nThe first is the type of the instance of the class.
\n\ntsclass Greeter {\n greeting: string;\n constructor(message: string) {\n this.greeting = message;\n }\n greet() {\n return \"Hello, \" + this.greeting;\n }\n}\n\nlet greeter: Greeter;\ngreeter = new Greeter(\"world\");\nconsole.log(greeter.greet()); // \"Hello, world\"
Here, when we say let greeter: Greeter, we’re using Greeter as the type of instances of the class Greeter.\nThis is almost second nature to programmers from other object-oriented languages.
We’re also creating another value that we call the constructor function.\nThis is the function that is called when we new up instances of the class.\nTo see what this looks like in practice, let’s take a look at the JavaScript created by the above example:
\ntslet Greeter = (function() {\n function Greeter(message) {\n this.greeting = message;\n }\n Greeter.prototype.greet = function() {\n return \"Hello, \" + this.greeting;\n };\n return Greeter;\n})();\n\nlet greeter;\ngreeter = new Greeter(\"world\");\nconsole.log(greeter.greet()); // \"Hello, world\"
Here, let Greeter is going to be assigned the constructor function.\nWhen we call new and run this function, we get an instance of the class.\nThe constructor function also contains all of the static members of the class.\nAnother way to think of each class is that there is an instance side and a static side.
Let’s modify the example a bit to show this difference:
\n\ntsclass Greeter {\n static standardGreeting = \"Hello, there\";\n greeting: string;\n greet() {\n if (this.greeting) {\n return \"Hello, \" + this.greeting;\n } else {\n return Greeter.standardGreeting;\n }\n }\n}\n\nlet greeter1: Greeter;\ngreeter1 = new Greeter();\nconsole.log(greeter1.greet()); // \"Hello, there\"\n\nlet greeterMaker: typeof Greeter = Greeter;\ngreeterMaker.standardGreeting = \"Hey there!\";\n\nlet greeter2: Greeter = new greeterMaker();\nconsole.log(greeter2.greet()); // \"Hey there!\"
In this example, greeter1 works similarly to before.\nWe instantiate the Greeter class, and use this object.\nThis we have seen before.
Next, we then use the class directly.\nHere we create a new variable called greeterMaker.\nThis variable will hold the class itself, or said another way its constructor function.\nHere we use typeof Greeter, that is “give me the type of the Greeter class itself” rather than the instance type.\nOr, more precisely, “give me the type of the symbol called Greeter,” which is the type of the constructor function.\nThis type will contain all of the static members of Greeter along with the constructor that creates instances of the Greeter class.\nWe show this by using new on greeterMaker, creating new instances of Greeter and invoking them as before.
As we said in the previous section, a class declaration creates two things: a type representing instances of the class and a constructor function.\nBecause classes create types, you can use them in the same places you would be able to use interfaces.
\n","headings":[{"value":"Introduction","depth":1},{"value":"Classes","depth":1},{"value":"Inheritance","depth":1},{"value":"Public, private, and protected modifiers","depth":1},{"value":"Public by default","depth":2},{"value":"ECMAScript Private Fields","depth":2},{"value":"Understanding TypeScript’s private","depth":2},{"value":"Understanding protected","depth":2},{"value":"Readonly modifier","depth":1},{"value":"Parameter properties","depth":2},{"value":"Accessors","depth":1},{"value":"Static Properties","depth":1},{"value":"Abstract Classes","depth":1},{"value":"Advanced Techniques","depth":1},{"value":"Constructor functions","depth":2},{"value":"Using a class as an interface","depth":2}],"frontmatter":{"permalink":"/docs/handbook/classes.html","title":"Classes"}}},"pageContext":{"slug":"/docs/handbook/classes.html","isOldHandbook":true}}}tsclass Point {\n x: number;\n y: number;\n}\n\ninterface Point3d extends Point {\n z: number;\n}\n\nlet point3d: Point3d = { x: 1, y: 2, z: 3 };