TypeScript简明教程

TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。

为什么会有TypeScript？

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

TypeScript优势

解决痛点

TypeScript的设计解决了JavaScript的“痛点”：弱类型和没有命名空间；这导致程序很难模块化，不适合开发大型程序。

语法提示

编写程序时，编辑器将提供精准的语法提示，以帮助大家更方便地实践面向对象的编程。

容易上手

TypeScript的一个设计亮点，是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集，任何合法的JavaScript的语句在TypeScript下都是合法的，且沿用了JavaScript的使用习惯和惯例，可以说学习成本很低。

痛点的消除

编译时的强类型

TypeScript设计了一套类型机制来保证编译时的强类型判断。

简单举例：当你申明变量的类型后，其他类型的赋值将会引起编译错误。

有意思的是，类似于C#的var变量声明，TypeScript会对赋值的变量进行类型推断。

例如：

模块化

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

例如：

从以上例子可以看出：

1. module可以嵌套，访问时用.作分隔符，也可以用.作为分隔符来简写module的嵌套；
2. 只有带关键词export的才可以被外部访问；
3. 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; } 

模块

模块的作用

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

基本语法

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