TypeScript学习笔记

与JS对比

优点：

1 ts是js的一个超集，兼容js，可以载入JS代码然后运行。

2 加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销。

3 通过类型注解提供编译时的静态类型检查。

4 ts 最大的特点就是类型化，因此才叫做TypeScript。比起弱类型的js，类型化的TypeScript显得更加容易维护

 

语法特点：

1.声明变量类型

通过var关键字 变量名后面+冒号 + 数据类型来指定

var name: string = "bob";

var list: number[] = [1, 2, 3];
var name: string[] = ["阿龙","阿猫","阿狗"];

var arr:Array = [1,2,3,"a","b","c"]; // 任意类型数组

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

2.enum

enum Color {
  Red,　　　//枚举元素列表
  Green,
  Blue
};
var c: Color = Color.Green;

3.函数

可选参数：在参数名后面，冒号前面添加一个问号，则表明该参数是可选的。
function buildName(firstName: string, lastName?: string) {}//lastName为可选参数

默认参数：在参数名后直接给定一个值，如果这个值没有被传入，那么将会被赋值为默认值。
function buildName(firstName: string, lastName = "Smith") {}

4.类

class 类名{
  name:string;  //定义类的属性
 
  fun(){ //定义了一个无返回值的方法
           //定义该方法所要实现的功能
  }
  say():string{ //定义返回值类型为string的方法
           //定义该方法所要实现的功能
         return "返回值"; // 用return关键字返回函数值
  }
}

5.接口

在TypeScript中，接口是用作约束作用的，在编译成JavaScript的时候，所有的接口都会被擦除掉，因为 JavaScript中并没有接口这一概念。TypeScript中接口是用关键字interface进行声明

interface LabelledValue { //定义接口
  label: string;          //定义属性
}

//在 TypeScript 中，我们可以使用接口来约束方法的签名。
interface SearchFunc {  
  (source: string, subString: string): boolean; //定义一个匿名方法
}
 
var mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {  //实现接口
  var result = source.search(subString);  //调用系统方法search查找字符串的位置
  if (result == -1) {
    return false;
  }
  else {
    return true;
  }
}

//约束数组类型
interface StringArray { //定义数组接口
  [index: number]: string;  //每个数组元素的类型
}
 
var myArray: StringArray; 
myArray = ["Bob", "Fred"];

//约束class类型
interface IPrint{
  print();
}
 
class A implements IPrint  { //实现接口
  print(){  //实现接口中的方法
      document.write("实现接口");
  }
}
 
var B=new A();  
B.print();

//接口继承
interface Shape {
    color: string;
}
 
interface PenStroke {
    penWidth: number;
}
 
interface Square extends Shape, PenStroke {
    sideLength: number;
}
//需要注意的是，尽管支持继承多个接口，但是如果继承的接口中，定义的同名属性的类型不同的话，是不能编译通过的。如下代码：
interface Shape {
    color: string;
    test: number;
}
 
interface PenStroke extends Shape{
    penWidth: number;
    test: string;
}

备注：

1 使用 ts 必须先编译，编译的结果是生成 js 文件，你可通过 TypeScript编译器 tsc 命令来完成这个过程。

2：不要将TypeScript看作是一门新的语言，它只是为了提升JavaScript代码质量的一个工具，最终TypeScript仍然要编译成JavaScript。

在线编译链接：http://www.typescriptlang.org/play/index.html