Typescript Code Instance resolution __typescript

Introduction:

Typescript, a free and open source programming language developed by Microsoft, is a superset of JavaScript that extends the syntax of JavaScript. Syntax attribute class Classes interface interfaces module Modules type annotation type annotations compile-time type check compile Arrow function (similar to C # Lambda expression) the difference between JavaScript and typescript

Typescript is a superset of JavaScript that extends the syntax of JavaScript, so existing JavaScript code can work with typescript without any modification, TYPESCRIPT provides compile-time static type checking through type annotations.
Typescript can handle existing JavaScript code and compile only the typescript code in it. first, the underlying type 1. New character of String

You can use the template string, which defines multiple lines of text and an inline expression. This string is surrounded by inverted quotes (') and is embedded in the expression in ${expr}

Let name:string = ' Gene ';
Let Age:number = Panax Notoginseng;
Let sentence:string = ' Hello, I name is ${name}.

I ' ll be ${the Age + 1} years the old next month. '

2, the use of the array

Typescript can manipulate array elements like JavaScript. There are two ways to define an array. First, you can connect the element type with [] to represent an array of this type of element:

Let list:number[] = [1, 2, 3];

The second way is to use the array generic,array< element type:

Let list:array<number> = [1, 2, 3];

3, enumeration

The enum type is a supplement to the JavaScript standard data type. Like C # and other languages, the enumeration type allows you to give a friendly name to a set of values.

Enum Color {Red, Green, Blue} let
c:color = Color.green;

You can assign values manually

Enum Color {Red = 1, Green = 2, Blue = 4} let
c:color = Color.green;

An enumeration type provides a convenience that you can make by enumerating the names worthy of it. For example, we know the value is 2, but we're not sure which name it maps to in color, so we can look for the corresponding name:

Let colorname:string = color[2];
alert (colorname);

An enumeration is an object that really exists at run time. One reason for this is that it is possible to reverse map from an enumeration value to an enumeration name.

enum Enum {
    a
} let
a = ENUM.A;
Let Nameofa = Enum[a]; A

Sometimes the demand is more stringent. You can use constant enumeration when accessing enumeration values in order to avoid generating extra code and indirect references. A constant enumeration is the use of the const modifier before the enum keyword.

const enum Enum {
    a = 1,
    B = a * 2
}

4, any

Sometimes we want to specify a type for variables that are not known in the programming phase. These values may come from dynamic content, such as from user input or from a Third-party code base. In this case, we do not want the type checker to check these values, but to let them pass the compile-time check directly. Then we can use any type to mark these variables:

Let Notsure:any = 4;
Notsure = "Maybe a string instead";
Notsure = false; Okay, definitely a Boolean

You might think that object has a similar effect, as it does in other languages. But a variable of type object only allows you to assign an arbitrary value to it-but you cannot invoke any method on it, even if it does have these methods 5, Void

In some ways, the void type is the opposite of any type, and it means that there is no type. When a function does not return a value, you usually see that the return value type is void:

function Warnuser (): void {
    alert ("This are my warning message");
}

6, Null and Undefined and Never

Little action 7, type assertion

There are two forms of type assertion. One is the "angle bracket" syntax:

Let Somevalue:any = "It is a string";
Let Strlength:number = (<string>somevalue). length;

Let Strlength:number = (somevalue). length;
The other is the AS syntax:

Let Somevalue:any = "It is a string";

Let Strlength:number = (somevalue as String). length;

ii. New characteristics of parametersParameter type default value optional parameter

function test (a:string,b?:string,c:string= "JoJo") {
    console.log (a);
    Console.log (b);
    Console.log (c);
}

Test ("AAA");

Iii. declaration of variables

Let and const are the new features in ES6 1, let and const have block-level scope blocks or for outside inaccessible can not be declared before read or write cannot redefine the inner layer shielding, should avoid 2, different

Although Const has the same block-level scope rule as let, it cannot be assigned a value. Iv. new features of functions 1. Rest and spread

Pass in any number of parameter
function test (... args) {
    Args.foreach (function (ARG) {
        console.log (ARG);
    })
}

Console.log (1,2,3,4,5,6);

The passed parameters are not fixed, but the actual incoming function
test2 (a,b,c) {
    console.log (a)
    is determined by functions. Console.log (b);
    Console.log (c);
}

var args1 = [1,2,3,4,5];
Test2 (... args1);
Although the error, but the generated JS file to achieve the function
//In ANGULAR4 Project ng build--prod automatically aot precompiled,
//ts code error can not compile through, therefore can not be used in precompiled projects

2, Generator

control function execution process, pausing and resuming code execution manually

function* Test () {
    console.log ("start");
    Yield;
    Console.log ("Start");
}

3. destructor function distructuring

function Getstock () {return
    {
        code: "IBM",
        price:100
    }
}

var {code,price} = Getstock ();
Console.log (code);
Console.log (price);


function GetStock2 () {return
    {
        code: "IBM",
        price:{
            price1:600,
            price2:400
        }
    }
}
var {code:codex,price:{price2}} = GetStock2 ();
Console.log (codex);
Console.log (PRICE2);


var arr1 = [1,2,3,4];
var [a,b]=arr1;
Console.log (a);
Console.log (b);
var [,, C,d]=arr1;
Console.log (c);
Console.log (d);
var [m,n,... others]=arr1;
Console.log (m);
Console.log (n);
Console.log (others);

iv. expressions and loops 1, arrow expressions

var fun1 = () =>{
}

var arr1 = [1,2,3,4];
Console.log (Arr1.filter (value) => value%2==0));
/////
The main function is to correctly point to this
function Getnum () {
    this.i=1;
    SetInterval (() => {
        console.log (this.i);
    },1000);

2, the cycle

The difference between a loop and an in loop:

var arr1 = [1,2,3,4];
for (var n in arr1) {
    console.log (arr1[n]);
}

for (var n of arr1) {
    console.log (n);
}

v. Object-oriented features 1, class

Class person{
    Constructor (public name:string) {

    }
    Eat () {
        console.log (this.name);
    }

var p = new Person ("Frank");
P.eat ();

Inherit Person class –extends

Class Employee extends person {
    code:string;
    Work () {
        Console.log (this.name+ "is working");
    }
var e = new Employee ("Eric");
E.work ();

super– classes to tune the constructor of the parent class

Class Employee2 extends Person {
    Constructor (name:string,code:string) {
        super (name);
        This.code = code;
    }
    code:string;
    Work () {
        super.eat ();
    }
}
var e2 = new Employee2 ("Eric", "0");
E2.work ();

2. Generic type

A parameterized type that is typically used to restrict the contents of a collection

Class person{
    Constructor (public name:string) {

    }
    Eat () {
        console.log (this.name);
    }
var workers:array<person> = [];

3, interface

Interface iperson{
    name:string;
    Age:number;
}
Class person{
    Constructor (public Config:iperson) {

    }
}
var p = new Person ({
    name: "Frank")
    age:18
});

Implements

interface animal{
    eat ();
}
Class Tiger implements animal{
    eat () {
        Console.log ("I like Meat");
    }
Class Sheep implements animal{
    eat () {
        Console.log ("I like Grass");
    }

4. Module

Reusable unit, the developer decides which resources (classes, variables, functions) in the module are exposed to external use and which are used by themselves.

Module1.ts:

Export var Prop1;
Export function Fun1 () {};
Export Class person{};

Module2.ts:

Import {Prop1,fun1,person} from './module1 ';

var p = new person ();
var prop = Prop1;

Export class moduletest{
    constructor (private Props:prop1) {

    }
}

5. Annotation annoation

Annotations: Adds a more intuitive description of the program's Elements (classes, methods, variables), which are not related to the business logic of the program, but are used by the specified tool or framework.

Import {Component, OnInit} from ' @angular/core ';

@Component ({
  selector: ' Platform ',
  templateurl: './platformaccount.component.html ',

})
Export Class test{...
}