码迷，mamicode.com
首页 > 其他好文 > 详细

TypeScript教程1

时间：2015-09-23 17:03:44      阅读：228      评论：0      收藏：0      [点我收藏+]

标签：

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;
复制代码

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

 

TypeScript教程1

标签：

原文地址：http://www.cnblogs.com/lingzhihua/p/4832588.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！