TypeScript教程1

Boolean类型
aser：和as3一样

1. var isDone: boolean = false;

复制代码

Number类型
aser：as3经常用int和uint，以后只用number就可以啦

1. var height: number = 6;

复制代码

String类型
aser：和as3一样

1. var name: string = "bob";

复制代码

Array类型
我习惯用第三种，和as3一样。
第一种：

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

复制代码

第二种：

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

复制代码

第三种：【我用的】【yellowshorts】反应在vs2012报错，我使用sublime没有报错，谨慎的用前两种吧。

1. var list:Array = []

复制代码

Enum枚举 
aser：as3没有枚举，但是很好用。和最近使用lua的table差不多

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

复制代码

默认情况下,枚举成员编号从0开始。 您可以通过手动设置其成员的值 

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

复制代码

使用的时候和数组差不多。两种方式 。
第一种：

1. Color.Green

复制代码

第二种：

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

复制代码

Any类型
aser：类似于as3的*。感谢@少瑞指正！
我们可能需要描述变量的类型,但是我们又不知道当前变量的类型。 这时候，让他在编译时检查类型。这时候就可以使用any: 

1. var notSure: any = 4;

复制代码

例如,您可能有一个数组但数组元素是不同类型: 

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

复制代码

void类型
也就是标注在方法最后，表示不返回任何值。

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

复制代码

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

一、简单例子1、看看接口工作最简单的一个例子: 

1. function printLabel(labelledObj: {label: string}) {
2.   console.log(labelledObj.label);
3. }
5. var myObj = {size: 10, label: "Size 10 Object"};
6. printLabel(myObj);

复制代码

类型检查器检查调用“printLabel”。 printLabel的函数只有一个参数,要求传入的对象属性称为“标签”类型的字符串，例如【{size: 10, label: "Size 10 Object"}】。 请注意,我们的对象实际上有更多的属性，例如【size：10】,但是编译器只检查 至少 需要的存在和匹配所需的类型，例如【label: "Size 10 Object"】是不是字符串。 

2、另一个例子,使用一个接口来描述需求的“标签”属性,是一个字符串:

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 10 Object"};
10. printLabel(myObj);

复制代码

接口“LabelledValue”是一个名字,我们现在可以使用在前面的例子描述的要求。 它仍然代表着拥有一个属性被称为“标签”,是string类型的。 注意到我们没有显式地说 对象,我们通过“printLabel”实现这个接口。 在这里,只注重类型。 如果我们通过列出的功能满足需求,那么它是允许的。 

值得指出的是,这些属性的类型检查器不需要任何形式的实现,只存在属性的接口要求,所需的类型。 
二、可选属性

并不是每一个属性都需要传递。 

这里的这个例子: 

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"});

复制代码

编写接口时可选属性变量名后边增加“?” 作为属性声明的一部分。 

可选属性的优点是,你可以描述这些可能可用的属性,同时还捕捉属性,你知道预计不会是可用的。 例如,我们打错属性的名称传递给“createSquare”, 让我们知道我们将得到一个错误信息: 

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"});

复制代码

三、函数类型
除了描述一个物体的属性,接口也能够描述函数类型。 

如下：

1. interface SearchFunc {
2.   (source: string, subString: string): boolean;
3. }

复制代码

一旦定义,我们可以使用这个函数类型接口像我们其他类型的接口。 如下： 

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. }

复制代码

参数类型必须匹配，而参数的名称不需要匹配。 例如,我们可以写上面的例子是这样的: 

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. }

复制代码

函数返回类型也会匹配检查。 
四、数组类型
类似于我们可以使用接口来描述函数类型,我们也可以描述数组类型。 数组类型有一个索引的类型,描述了类型允许索引对象,连同相应的返回类型来访问索引。 

1. interface StringArray {
2.   [index: number]: string;
3. }
5. var myArray: StringArray;
6. myArray = ["Bob", "Fred"];

复制代码

下面这个没看懂，谁看懂了下面回一下，谢谢！感谢 【foodyi】的解释

这个是索引数组，是以KEY VALUE的形式来声明的，就像这个接口的名字一样，他是一个字典结构，不可以有length的属性，这是我的理解，TS的接口太灵活了。

 

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

复制代码

五、类类型实现一个接口
最常见的一种使用语言c#和Java接口的显式地执行。 

1. interface ClockInterface {
2.     currentTime: Date;
3. }
5. class Clock implements ClockInterface  {
6.     currentTime: Date;
7.     constructor(h: number, m: number) { }
8. }

复制代码

你也可以描述方法在类中实现接口,如下我们与凝固时间的例子: 

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. }

复制代码

六、扩展接口
像类、接口可以扩展。 让你更自由的使你的接口为可重用的组件。 

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;

复制代码

一个接口可以扩展多个接口,创建一个组合的所有接口。 

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;

复制代码

七、混合类型
如前所述,接口可以描述丰富的类型出现在现实世界的JavaScript。 由于JavaScript的动态和灵活自然,偶尔会遇到的对象是上面描述的一些类型的组合。 

一个例子是一个对象,作为一个函数和一个对象,附加属性: 

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;

复制代码

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