Typescript Tutorial 1

Boolean type
Aser: Same as AS3

1. var Isdone:boolean = false;

Copy Code

Number Type
ASER:AS3 often use int and uint, then only number can be used.

1. var height:number = 6;

Copy Code

String type
Aser: Same as AS3

1. var name:string = "Bob";

Copy Code

Array type
I used to use the third kind, like AS3.
The first type:

1. var list:number[] = [1, 2, 3];

Copy Code

The second type:

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

Copy Code

The Third Kind: "I use" " Yellowshorts "Response in vs2012 error, I use sublime no error, cautious use the first two kinds of bar."

1. var list:array = []

Copy Code

enum enum
ASER:AS3 is not enumerated, but it is very useful. Almost like a table using Lua recently.

1. Enum Color {Red, Green, Blue};

Copy Code

By default, the enumeration member number starts at 0. You can manually set the value of its members

1. Enum Color {Red = 1, Green = 2, Blue = 4};

Copy Code

It's about the same time and the array. Two different ways.
The first type:

1. Color.green

Copy Code

The second type:

1. Enum Color {Red = 1, Green, Blue};

Copy Code

Any type
Aser: Similar to AS3 's *. Thanks for the @ Little Rui Correction!
We may need to describe the type of the variable, but we do not know the type of the current variable. At this point, let him check the type at compile time. At this point, you can use any:

1. var notsure:any = 4;

Copy Code

For example, you might have an array but the array elements are of different types:

1. var list:any[] = [1, True, "free"];

Copy Code

void type
That is, the callout at the end of the method indicates that no value is returned.

1. function Warnuser (): void {
2. Alert ("This is my warning message");
3. }

Copy Code

==================================================

First, a simple example 1, look at the interface to work the simplest example:

1. function Printlabel (labelledobj: {label:string}) {
2. Console.log (Labelledobj.label);
3. }
5. var myObj = {size:10, Label: "Size Ten Object"};
6. Printlabel (MYOBJ);

Copy Code

type checker check called" Printlabel ". The Printlabel function has only one parameter, which requires an incoming object property called a "label" type string, such as "{size:10, Label:" "Size"} ".   Notice that our objects actually have more properties, such as "Size:10", but the compiler checks only   at least   The desired type of presence and match, such as " label:" Size ten Object "" is not a string Span style= "color: #333333;" > .  
< Span style= "font-size:medium;" >
2, another example, using a interface To describe the "label" property of a requirement, which is a string:

1. Interface Labelledvalue {
2. label:string;
3. }
5. function Printlabel (labelledobj:labelledvalue) {
6. Console.log (Labelledobj.label);
7. }
9. var myObj = {size:10, Label: "Size Ten Object"};
10. Printlabel (MYOBJ);

Copy Code

The interface "Labelledvalue" is a name that we can now use to describe the requirements in the previous example. It still represents the owning of a property called "label", which is of type string. Notice that we do not explicitly say the object, we implement this interface through "Printlabel". Here, focus only on the type. If we meet the requirements by the features listed, then it is allowed.

It is worth pointing out that the type checker for these properties does not require any form of implementation, only the type of interface required for the property, and the desired types.
Second, optional attributes

Not every property needs to be passed.

Here's the example:

1. Interface Squareconfig {
2. Color?: string;
3. Width?: number;
4. }
6. function Createsquare (config:squareconfig): {color:string; Area:number} {
7. var newsquare = {color: "White", area:100};
8. if (Config.color) {
9. Newsquare.color = Config.color;
10. }
11. if (config.width) {
12. Newsquare.area = Config.width * config.width;
13. }
14. return newsquare;
15. }
17. var mysquare = createsquare ({color: "BLACK"});

Copy Code

when you write an interface, the optional attribute variable name adds "?" as part of the property declaration. &NBSP; The advantage of

Optional Properties is that you can describe these properties that may be available, while also snapping properties that you know are not expected to be available. For example, we pass the name of the wrong attribute to "createsquare" and let us know that we will get an error message:  

1. Interface Squareconfig {
2. Color?: string;
3. Width?: number;
4. }
6. function Createsquare (config:squareconfig): {color:string; Area:number} {
7. var newsquare = {color: "White", area:100};
8. if (Config.color) {
9. Newsquare.color = Config.collor; Type-checker can catch the mistyped name here
10. }
11. if (config.width) {
12. Newsquare.area = Config.width * config.width;
13. }
14. return newsquare;
15. }
17. var mysquare = createsquare ({color: "BLACK"});

Copy Code

Iii. type of function
In addition to describing the properties of an object, an interface can also describe a function type.

As follows:

1. Interface Searchfunc {
2. (Source:string, substring:string): boolean;
3. }

Copy Code

Once defined, we can use this function type interface like our other types of interfaces. As follows:

1. var Mysearch:searchfunc;
2. Mysearch = function (source:string, substring:string) {
3. var result = Source.search (subString);
4. if (result = =-1) {
5. return false;
6. }
7. else {
8. return true;
9. }
10. }

Copy Code

The parameter types must match, and the names of the parameters do not need to match. For example, we can write the example above:

1. var Mysearch:searchfunc;
2. Mysearch = function (src:string, sub:string) {
3. var result = Src.search (sub);
4. if (result = =-1) {
5. return false;
6. }
7. else {
8. return true;
9. }
10. }

Copy Code

The function return type also matches the check.
Four, array type
Similar to how we can use interfaces to describe function types, we can also describe array types. An array type has an indexed type that describes the types that allow indexed objects, along with the corresponding return types to access the index.

1. Interface Stringarray {
2. [Index:number]: string;
3. }
5. var Myarray:stringarray;
6. MyArray = ["Bob", "Fred"];

Copy Code

below this did not understand, who understand the following back, thank you! Thanks for the "foodyi" explanation.

This is an indexed array, is declared in the form of key value, just like the name of this interface, he is a dictionary structure, can not have the length of the property, which is my understanding, TS interface is too flexible.

1. Interface Dictionary {
2. [index:string]: string;
3. Length:number; Error, the type of ' length ' is not a subtype of the indexer
4. }

Copy Code

v. Types of Classes Implementing an interface
One of the most common uses of language is explicit execution of C # and Java interfaces.

1. Interface Clockinterface {
2. Currenttime:date;
3. }
5. Class Clock implements Clockinterface {
6. Currenttime:date;
7. Constructor (H:number, M:number) {}
8. }

Copy Code

You can also describe methods to implement interfaces in a class, as follows our example of solidification time:

1. Interface Clockinterface {
2. Currenttime:date;
3. SetTime (d:date);
4. }
6. Class Clock implements Clockinterface {
7. Currenttime:date;
8. SetTime (d:date) {
9. This.currenttime = D;
10. }
11. Constructor (H:number, M:number) {}
12. }

Copy Code

Vi. Expansion Interface
Like classes, interfaces can be extended. Allows you to be more free to make your interfaces reusable components.

1. Interface Shape {
2. color:string;
3. }
5. Interface Square extends Shape {
6. Sidelength:number;
7. }
9. var square = <Square>{};
10. Square.color = "Blue";
11. Square.sidelength = 10;

Copy Code

An interface can extend multiple interfaces, creating a combination of all interfaces.

1. Interface Shape {
2. color:string;
3. }
5. Interface Penstroke {
6. Penwidth:number;
7. }
9. Interface Square extends Shape, Penstroke {
10. Sidelength:number;
11. }
13. var square = <Square>{};
14. Square.color = "Blue";
15. Square.sidelength = 10;
16. Square.penwidth = 5.0;

Copy Code

Seven, mixed type
As mentioned earlier, interfaces can describe rich types of javascript that appear in the real world. Due to the dynamic and flexible nature of JavaScript, occasionally encountered objects are the combinations of some of the types described above.

An example is an object, which, as a function and an object, attaches properties:

1. Interface Counter {
2. (start:number): string;
3. Interval:number;
4. Reset (): void;
5. }
7. var c:counter;
8. C (10);
9. C.reset ();
10. C.interval = 5.0;

Copy Code

==================================================

Typescript Tutorial 1