TypeScript语法

近几年前端对 TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。

特点：

TypeScript 是微软推出的开源语言，使用 Apache 授权协议（大厂出品，必属精品）
TypeScript是JavaScript的超集（即扩展了JavaScript）
TypeScript 增加了可选类型、类和模块，JavaScript是弱类型的，且没有命名空间
TypeScript 可编译成可读的、标准的 JavaScript
TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性
TypeScript 扩展了 JavaScript 的语法，因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
TypeScript 文件扩展名是 ts，而 TypeScript 编译器会编译成 js 文件
TypeScript 语法与 Java逐渐类似，易学易于理解

展开说说：

编译时的强类型：

当你申明变量的类型后，其他类型的赋值将会引起编译错误

TypeScript会对赋值的变量进行类型推断

模块化:

利用TypeScript的关键词module，可以达到类似于命名空间的效果，而export可以控制是否被外部访问。

从以上例子可以看出：

module可以嵌套，访问时用.作分隔符，也可以用.作为分隔符来简写module的嵌套；
只有带关键词export的才可以被外部访问；
module可以合并，但是非export的对象在其他module下，即使是同一个名称，也不能被访问，如funcA()。

TypeScript基本语法:

TypeScript的数据类型分为Boolean、Number、String、Array、Enum、Any、Void这七种类型。

Boolean类型

Number类型

String类型

Array类型

Enum枚举类

Any不确定类型

Void类型

类:

基本语法：

// 通过class创建类
class Animal {
    // 类的属性
    name: string;
    // 类的构造器
    constructor(name: string) {
        this.name = name;
    }
    // 类的方法
    sayHello():void{
        alert("hello animal:"+this.name);
    }
}
// 实例化类
var tom = new Animal("tom");
tom.sayHello();

类的继承:

// 通过class创建类
class Animal {
    // 类的属性
    name: string;

    // 类的构造器
    constructor(name: string) {
        this.name = name;
    }

    // 类的方法
    sayHello(): void {
        alert("hello animal:" + this.name);
    }
}

// 继承Animal
class Cat extends Animal {
    // 重写方法
    sayHello(): void {
        alert("hello cat:" + this.name);
    }
}

class Dog extends Animal {
    sayHello(): void {
        alert("hello dog:" + this.name);
    }
}

修饰符:

class Animal {
    private name: string; // 这里把name修饰符改为private

    constructor(name: string) {
        this.name = name;
    }

    sayHello(): void {
        alert("hello animal:" + this.name);
    }
}

class Cat extends Animal {
    sayHello(): void {
        alert("hello cat:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    }
}

class Dog extends Animal {
    sayHello(): void {
        alert("hello dog:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    }
}

当把属性的修饰符改成私有时，子类继承以后便会报错。

Get/Set访问器:

class Animal {
    private name: string;

    get name(): string { //通过get和set解决子类不能引用父类private修饰的属性的问题
        return this.name;
    }

    set name(name: string) {
        this.name = name;
    }

    constructor(name: string) {
        this.name = name;
    }

    sayHello(): void {
        alert("hello animal:" + this.name);
    }
}

class Cat extends Animal {
    sayHello(): void {
        alert("hello cat:" + this.name); 
    }
}

class Dog extends Animal {
    sayHello(): void {
        alert("hello dog:" + this.name); 
    }
}

静态属性:

class Table {
    static width: Number = 100;
    static height: Number = 50
}

var width: Number = Table.width;//类名直接引用

接口：

基本语法：

interface Graphic {
    width: Number;
    height: Number;
}

class Square implements Graphic {
    width: Number;
    height: Number;

    constructor() {
        this.width = 100;
        this.height = 100;
    }

    constructor(width: Number, height: Number) {
        this.height = height;
        this.width = width;
    }
}

继承接口:

interface Graphic {
    width: Number;
    height: Number;
}

interface PenStroke {
    penWidth: Number;
}

interface Square extends Graphic, PenStroke {
    sideLength: number;
}

模块:

模块的作用:

防止命名空间冲突；
将一个功能模块很容易的划分到不同文件中，更容易维护。

基本语法:

module MyDemo{
    export class Animal {
        private name: string;

        get name(): string { 
            return this.name;
        }

        set name(name: string) {
            this.name = name;
        }

        constructor(name: string) {
            this.name = name;
        }

        sayHello(): void {
            alert("hello animal:" + this.name);
        }
    }

    export class Cat extends Animal {
        sayHello(): void {
            alert("hello cat:" + this.name);
        }
    }
}

别名:

module Shapes {
    export module Polygons{
        export class Square{}
        export class Triangle{}
    }
}

import polygons = Shapes.Polygons;
var sq = new polygons.Square(); //类似于 new Shapes.Polygons.Square()
var sq1 = new Shapes.Polygons.Square();

函数:

基本语法:

function add(x:number,y:number):number{
    return x+y;
}

var myAdd = function(x:number,y:number):number{
    return x+y;
}