TypeScript ---- function and class

TypeScript in class

Traditional uses JavaScript functions and to create reusable components of the prototype-based inheritance, but for those familiar with object-oriented programmers in terms of the way a bit tricky, because they are using a class-based inheritance and the object is constructed out of class of. From ECMAScript 2015, ECMAScript 6 is started, JavaScript programmers will be able to use the object-oriented class. Use TypeScript, we now allow developers to use these features, and after compiling JavaScript can run on all major browsers and platforms, without the need to wait until the next version of JavaScript.

// class
 // When we refer to any member of a class have used this. It means that we visit are members of the class.
// In fact, this is the essence of knowledge ES6, but on the basis of multi-ES6 on the type declaration of this field and reference parameters. 
class the Person { 
    name: String ; // this is the definition of the type hereinafter this.name 
    Age: Number; 
    constructor (name: String , Age: Number) {
         the this .name = name;
         the this .age = Age; 
    } 
    Print ( ) { 
        return  the this .name + the this .age; 
    } 
} 

the let Person: the Person = new new the Person ( ' CD', 23);
console.log(person.print()); // cd23

// 继承
class Person2 {
    public name: string;  // public、private、static 是 typescript 中的类访问修饰符
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    tell() {
        console.log(this.name + this.age);
    }
}

class Student extends Person2 {
    Gender: String; 
    Constructor (Gender: String ) { 
        Super ( ' CD ' , 23 is );
         the this .gender = Gender; 
    } 
    Tell () { 
        the console.log ( the this .name + the this .age + the this .gender); 
    } 
} 

the let Student: Student = new new Student ( ' MALE ' ); 
student.tell ();   // cd23male
 // this example shows some of the features TypeScript inherited, plus the fact you can see the type of knowledge is also a statement on the ES6.
// But here one more point of knowledge - public, private, and protected modifiers.
// the typescript, the members of the default is public; When a member is marked as private, you can not access it in a statement outside the class;
 // protected and private modifiers modifier of behavior is very similar, but a little different, protected members can still access the derived class. 

// memory
 // the typescript to intercept access to the object support members by getters / setters. It can help you effectively control access to the object members.
// There is access for the following points should be noted:
 // First, access requires that you set the compiler output ECMAScript 5 or higher. It does not support the downgrade to ECMAScript 3.
// Next, with only get access is set automatically without inferred as readonly.
// This file is generated from the code .d.ts is helpful, because users will take advantage of this property is not allowed to see enough to change its value. 
class the Hello {
     Private the _name: String ;
     Private _age: Number;
     GET name (): String {
        return this._name;
    }
    set name(value: string) {
        this._name = value;
    }
    get age(): number{
        return this._age;
    }
    set age(age: number) {
        if(age < 0 && age > 100){
            console.log('年龄在0-100之间'); // 年龄在0-100之间
            return;
        }
        this._age = age;
    }
}

Hello the let= new new the Hello (); 
hello.name = ' CD ' ; 
hello.age = 23 
the console.log ( `Name: $ {hello.name} Age: hello.age} {$`); // Name: cd Age: 23

TypeScript in function

JavaScript function is the basis for the application. It helps you achieve abstraction layer, simulation class, information hiding, and modules. In TypeScript, although already support classes, namespaces and modules, but the function remains the main place of defined behaviors. TypeScript adds additional functionality to the JavaScript function, so that we can more easily use.

// a function defined type
 // we can give each parameter type after another as a function of itself add return type is added.
// typescript can automatically infer return statement in accordance with the type of the return value, so we usually omit it.
// function add the following effects add2, add3 is the same. 
function the Add (X: String , Y: String ): String {
     return  ' Hello the typescript ' ; 
} 
the let ADD2 = function (X: String , Y: String ): String {
     return  ' Hello the typescript ' ; 
} 
the let ADD3 = (X: String , Y: String ) =>' The Hello the typescript ' ; 

// optional parameter and default parameters
 // JavaScript, each parameter is optional and may not be available for transfer. He did not pass the Senate when its value is undefined. 
// we can use? Realize the function of the optional parameter next parameter names in TypeScript years. For example, we want the lastname is optional. 
buildName function (firstName: String , LastName ?: String ) { 
    the console.log (LastName firstName +? '' + LastName: firstName); 
} 

the let RES1 = buildName ( ' road ' , ' flying ' ); // channel fly 
let res2 buildName = ( ' Road ' ); //Road
 // the let RES3 = buildName ( 'Road', 'fly', 'Luffy'); // error 

// parameter if with default values must appear in front of the parameter, the user must explicitly pass undefined values to obtain default value 
function buildName2 (firstName = ' Road ' , lastName ?: String ) { 
    the console.log (firstName + '' + lastName); 
} 

the let RES4 = buildName2 ( ' fly ' ); // fly undefined 
the let Res5 = buildName2 (undefined, ' fly ' ); // Luffy 

// remaining parameter
 // In one case, we do not want to know how many arguments passed in function, this time we can use the remaining parameters to define.
// The remaining parameter syntax allows us to an indeterminate number of arguments passed as an array. 

buildName3 function (firstName: String , ... restOfName: String []) { 
    the console.log (firstName + '' + restOfName.join ( '' )); 
} 

the let res6 = buildName3 ( ' road ' , ' flying ' , ' road ' , ' flying ' ); // Luffy Luffy

 

Guess you like

Origin www.cnblogs.com/cczlovexw/p/11199071.html