In the next version of JavaScript, ECMAScript 6, a standard has been proposed for the definition of classes. TypeScript brings this concept to the current versions of JavaScript. Classes consist of a variety of different properties and members. These members can be either public or private and static or instance members.
Creating classes in TypeScript is essentially the same as creating interfaces. Let's create a very simple Point
class that keeps track of an x
and a y
position for us:
class Point { public x: number; public y: number; constructor(x: number, y = 0) { this.x = x; this.y = y; } }
As you can see, defining a class is very simple. Use the keyword class
and then provide a name for the new type. Then you create a constructor for the object with any parameters you wish to provide upon creation. Our Point
class requires two values that represent a location on a plane.
We provided a default value for the property y
. This default value tells the compiler to generate an extra JavaScript statement than if we had only given it a type. This also allows TypeScript to treat parameters with default values as optional parameters. If the parameter is not provided then the parameter's value is assigned to the default value you provide. This provides a simple method for ensuring that you are always operating on instantiated objects. The best part is that default values are available for all functions, not just constructors. Now let's examine the JavaScript output for the Point
class:
var Point = (function () { function Point(x, y) { if (typeof y === "undefined") { y = 0; } this.x = x; this.y = y; } return Point; })();
As you can see, a new object is created and assigned to an anonymous function that initializes the definition of the Point
class. As we will see later, any public methods or static members will be added to the inner Point
function's prototype. JavaScript closures are a very important concept in understanding TypeScript. Classes, modules, and enums in TypeScript all compile into JavaScript closures. Closures are actually a construct of the JavaScript language that provide a way of creating a private state for a specific segment of code. When a closure is created it contains two things: a function, and the state of the environment when the function was created. The function is returned to the caller of the closure and the state is used when the function is called.
For more information about JavaScript closures and the module pattern visit http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html.
The optional parameter was accounted for by checking its type and initializing it if a value is not available. You can also see that both x
and y
properties were added to the new instance and assigned to the values that were passed into the constructor.