"TypeScript" TypeScript Learning 3--Class

Source: Internet
Author: User
Tags modifiers

In EcmaScript 6, we will have the native class, rather than the prototype chain as it is now implemented. With TypeScript We can experience this feature in advance.

Let's take a look at a simple example:

class Greeter {    greeting:string;    Constructor (message:string) {        this. Greeting= message;    }    Greet () {        returnthis. Greeting;    }} var New Greeter ("World");

We defined using the class keyword, using constructor to define the constructor, using the This keyword to refer to the current object.

In addition to the constructor keyword, syntax is more like C # and Java.

    • Inherited

As one of the three basic features of object-oriented, TypeScript certainly supports inheritance.

class Animal {name:string; Constructor (thename:string) { This. Name =thename;} Move (Meters:number= 0) {alert ( This. Name + "moved" + meters + "M.");    }}class Snake extends Animal {constructor (name:string) {super (name);} Move (meters= 5) {alert ("Slithering ...");    Super.move (meters);    }}class Horse extends Animal {constructor (name:string) {super (name);} Move (meters= 45) {alert ("Galloping ...");    Super.move (meters); }}varSam =NewSnake ("Sammy The Python");varTom:animal =NewHorse ("Tommy The Palomino"); Sam.move (); Tom.move (34);

As with the inheritance of interfaces, they are inherited using the extends keyword. In subclasses, we use the Super keyword to access the parent class. In the above code we see the equals sign in the method's argument, which represents the default value of the method parameter. If we call this method without writing the parameter or passing in the undefined, then this parameter will be given the default value.

Sam.move (); Sam.move (undefined);

That is, the above two pieces of code are equivalent.

Note: TypeScript, like C # and Java, does not support multiple inheritance (although it can be implemented through a prototype chain).

    • Access modifiers

In TypeScript, there are now only two types of access modifiers, public and private, respectively.

In the previous code, we were able to access the properties defined in the class normally. Then, the default access modifier for the properties of the class is public.

class Animal {private name:string; Constructor (thename:string) { This. Name =thename;}} Class Rhino extends Animal {constructor () {Super ("Rhino");    }}class Employee {private name:string; Constructor (thename:string) { This. Name =thename;} }varAnimal =NewAnimal ("Goat");varRhino =NewRhino ();varEmployee =NewEmployee ("Bob"); Animal=Rhino;animal= Employee;//Error:animal and Employee is not compatible

After we have modified the access modifiers for the properties in the previous code to private, we find that the compilation cannot be passed.

    • Parameter properties

Access modifiers can be used not only for attributes, but also for constructor parameters. This is a syntactic sugar in the TypeScript.

class Animal {    constructor (private name:string) {}    Move (meters:number) {        alert (this. Name + "moved" + meters + "M." );    }}

Then the name parameter in the constructor generates a private property.

Accessors

Sometimes when we set the property, we want to check the input, then we need to use the accessor.

varPasscode = "Secret passcode"; class Employee {private _fullname:string; Get FullName (): string {return  This. _fullname; } set FullName (newname:string) {if(Passcode && Passcode = = "Secret passcode") {             This. _fullname =NewName; }        Else{alert ("Error:unauthorized Update of employee!"); }    }}varEmployee =NewEmployee (); Employee.fullname= "Bob Smith";if(employee.fullname) {alert (employee.fullname);}

Above we define the get and set accessors for the FullName property.

    • Static properties

In the preceding, we define the instance properties. So how do you define static properties? Use the static keyword to do so.

class Grid {static Origin= {x:0, y:0}; Calculatedistancefromorigin (point: {x:number; y:number;}) {        varXdist = (Point.x-grid.origin.x); varYdist = (Point.y-GRID.ORIGIN.Y); returnMATH.SQRT (xdist * xdist + ydist * ydist)/ This. Scale; } constructor (public Scale:number) {}}varGRID1 =NewGrid (1.0);//1x ScalevarGrid2 =NewGrid (5.0);//5x ScaleAlert (Grid1.calculatedistancefromorigin ({x:Ten, Y:10}); alert (Grid2.calculatedistancefromorigin ({x:(Y:10}));

Note that to access a static property, you must prefix the class that contains the static property.

In addition, static properties can be used with access modifiers.

class Test {    private static _age:number;    Static Get Age (): number {        return  test._age;    }    Static set Age (Value:number) {        = value;    }}

"TypeScript" TypeScript Learning 3--Class

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.