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);  // stringmyName = 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();     // zxtest('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 2fun.next(); // 3 4 5fun.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 = '我还是数组？';// forEacharr.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 20let 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');    }}