TypeScript入门教程

TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。

关于调试

以下代码均在http://www.typescriptlang.org/play/index.html上运行通过。

自动拆分字符串

function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var myName = "zx";
var getAge = () => 20;

//可以这样调用test函数
test`Hello, my name is ${myName}, I am ${getAge()} years old`;

编译后的javascript代码

function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}
var myName = "zx";
var getAge = function () { return 20; };
//可以这样调用test函数
(_a = ["Hello, my name is ", ", I am ", " years old"], _a.raw = ["Hello, my name is ", ", I am ", " years old"], test(_a, myName, getAge()));
var _a;

参数类型

声明变量时指定类型

var myName: string = 'zx';
console.log(typeof myName);  // string

myName = 20; // 报错，因为已经声明为string类型

常见的数据类型：

- Boolean：布尔类型
- Number：TypeScript所有的数值类型采用浮点型计数
- String：字符串类型
- Array：数组
- Enum：枚举
- Any：任何类型，可以用来跳过TypeScript的编译时类型的检查
- void：表明函数无返回值

自定义类型

class Person {
    name: string;
    age: number;
}

var people: Person = new Person();

console.log(zx); // Person

编译后的javascript代码

var Person = (function () {
    function Person() {
    }
    return Person;
}());
var zx = new Person('zx', 10);
console.log(zx);

给参数指定默认值

function test(a: string = 'zx') {
    console.log(a);
}

test();     // zx
test('xz'); // xz

编译后的javascript代码

function test(a) {
    if (a === void 0) { a = 'zx'; }
    console.log(a);
}
test();
test('xz');

可选参数

function test(a: string, b?:string) {
    console.log(a);
    console.log(b);
}

参数b的后面有个?，这就声明了b是可选的。

Rest and Spread 操作符

function test(...args) {
    console.log(args);
}

test(1, 2,  3); // 控制台输出Array(4)

注意控制台输出Array(4)，这说明 …args 是真正的数组，而不是类似数组的对象。
（可以用 Array.form() 转换类似数组的对象）

generator函数

示例

function* log() {
    console.log(1);

    yield console.log(2);

    console.log(3);
    console.log(4);

    yield console.log(5);

    console.log(6);
}

let fun = log();

fun.next(); // 1 2

fun.next(); // 3 4 5

fun.next(); // 6

通过示例应该可以看出：
- 用 function* 声明一个generator函数
- 在其内的代码以 yield 为一个断点
- 调用 generator 函数需要使用一个辅助变量，并通过 next() 来执行一次（到断点即停）

意义

关于这种函数的意义当然是用经典的股票来说明：

function* getLowerPrice() {
  while (true) {
    yield Math.ceil(Math.random() * 100);
  }
}

let test = getLowerPrice(),
    price = 100,
    targetPrice = 20;

while (price > targetPrice) {
    price = test.next().value;
}

console.log("Oh, yeah! I get the lowest price ", price);

你会看到输出一个比20小的数字，这就是意义？

循环

let arr = [2, 4, 6, 8];

arr.desc = '我还是数组？';

// forEach
arr.forEach(x => x > 2 ? console.log(x) : null); // 4 6 8

// for in 
for (let index in arr) {
    console.log(index);  
}
// 输出 0 1 2 3 desc （显然 forin 是循环获取下标，但是desc？）

// for of 
for (let item of arr) {
    console.log(item);
}
// 输出 2 4 6 8 （没有desc）

从上面可以看出一个 forin 的弊端（也许不是），它打印出了 desc （显然不是数组下标）。

泛型

举个例子：

let people: Array<Person> = [];

这就声明了一个数组，该数组只能存放Person类型数据。

类

声明一个类

class Person {
    name;
    age: number = 20;

    getAge () {
        console.log(this.age);
    }
}

let zx = new Person();
zx.getAge(); // 20

属性修饰符

与java类似：

- public
- protect
- private

构造函数

统一为：

constructor () {

}

举个例子：

class Person {
    private name: string;
    private age: number;

    constructor (name, age) {
        this.name = name;
        this.age = age;
    }

    log () {
        console.log(this.name);
        console.log(this.age);
    }
}

let zx = new Person('zx', 20);
zx.log(); // zx 20

let txj = new Person('txj', 13);
txj.log(); // txj 13

继承

自然是关键字 extends 。

举个例子：

class Father {
    private name: string;
    private age: number;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    log () {
        console.log(this.name);
        console.log(this.age);
    }
}

class Son extends Father {
  private privateMoney: number;

    constructor(name, age, privateMoney) {
    super(name, age);
    this.privateMoney = privateMoney;
  }

  showOff() {
    console.log("You do not know my private money! ", this.privateMoney);
  }
}


let txj = new Father('txj', 13);
txj.log();

let zx = new Son('zx', 20,  10);
zx.log();
zx.showOff();

可以看到子类拥有父类的属性和方法，但是父类就不能拥有子类自己的方法。

接口

关键字 interface。
举个例子：

interface Human {
    sex: string;
}

class Person {
  name: string;
    constructor (public sex : Human, name) {
        this.sex = sex;
    this.name = name;
    }
}

let zx = new Person({sex : 'male'}, 'zx');

这就硬性规定了应传入的参数。

当然也可规定必须实现的方法：

interface Animal {
    eat();
}

class Dog implements Animal {
    eat () {
        console.log('I am eating');
    }
}