TypeScript快速入门

一：Typescript简介

维基百科： TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯•海尔斯伯格参与了TypeScript的开发。Typescript是ES6的超集。添加了可选的静态类型（注意并不是强类型）和基于类的面向对象编程。（如果对ES6熟悉那么可以只关注类、装饰器部分的内容。）

中文官网：https://www.tslang.cn/。

特点：微软开发，javascript超集，遵循ES6标准，任何js语法都可以直接在ts里编写运行。Angular2框架是用Typescript开发的，背景是谷歌和微软，有可能是未来的前端脚本语言发展的主流方向。优点：支持ES6规范，学到的typescript语法未来是客户端脚本语言的主流语法。强大的IDE支持： 1、类型检查。 2、语法提示。 3、重构（修改方法名称的时候会自动把引用的地方都重构）是Angular2的首选开发语言。

二：环境搭建

主要是安装Typescript的代码编译器。

在线环境：http://www.typescriptlang.org/play/index.html

本地环境：一、安装好nodeJS环境。二、npm install -g typescript。三、tsc --version。

三：Typescript特性

1. 字符串特性

1.1多行字符串

使用``包裹跨行的字符串，示例：

var html = `<div>

<span></span>

</div>`

1.2：字符串模板

可以在多行字符串中使用模板，示例：
var names = 'daocheng';
function getImg() {
  return '<i></i>'
}

var html = `<div>${names}
<span>${getImg()}</span>
<div>
`

1.3：自动拆分字符串

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

var names = 'daocheng';
var age = 23;
getData`你好，我的名字是${names}，我今年${age}岁了`

2. 参数新特征

2.1：参数类型

Typescript中的参数类型包括：boolean/number/string/array/tuple/enum/any/（null和undefined）/ void /never。其中元祖（tuple）、枚举、任意值、void类型和never是有别于Javascript的特有类型。

2.2：类型声明与默认参数

在Typescritpt中声明变量，需要加上类型声明，如boolean或string等。通过静态类型约束，在编译时执行类型检查，这样可以避免一些类型混用的低级错误。示例：

var names = 'daocheng';
function getData(name: stirng, age: number): boolean {
    return true
}

Typescript还支持初始化默认参数。如果函数的某个参数设置了默认值，当该函数被调用时，如果没有给这个参数传值或者传值为undefined时，这个参数的值就是设置的默认值。示例：

function max(x: number, y: number = 4): number {
    return x > y ? x : y;
}
let result1 = max(2); //正常
let result2 = max(2, undefined); //正常
let result3 = max(2, 4, 7); //报错
let result4 = max(2, 7); //正常

2.3： 可选参数

在javascript里，被调用函数的每个函数都是可选的，而在typescript中，被调用的每个函数的每个参数都是必传的。在编译时，会检查函数每个参数是否传值。简而言之，传递给一个函数的参数个数必须和函数定义的参数个数一致。但是实际开发中经常需要根据实际需求来确认参数，这时可以添加？来定义可选参数。示例：

function max(x: number, y: number) {
    if(y){
        return x > y ? x : y;
    } else {
        return x
    }
}
let result1 = max(2);
let result2 = max(2, 4, 7); //报错
let result3 = max(2, 4);
//注意：可选参数必须放在默认参数后面

3：函数特性

3.1：剩余参数

上面介绍的必选参数、默认参数以及可选参数共同点是只能表示某一个参数。当需要同时操作多个参数，或者并不知道会有多少参数传递进来时，就需要用到Typescript 里的剩余参数。示例：

function sum(x: number, ...restOfNumber: number[]){
    let result = x;
    restOfNumber.forEach(value => result += value);
    return result;
}
let result1 = sum(1, 2, 3, 4, 5, 6);
console.log(result1);

let result2 = sum(2);
console.log(result2);

let result3 = sum(2, 5);
console.log(result3);

3.2: generator函数

控制函数的执行过程，可以手动的干预函数执行。示例：

function getPrice(stock) {
    while (1) {
        yield Math.random() * 100;
    }
}
var priceGenerator = getPrice('dcc');
var limitPrice = 51;
var price = 100;
while (price > limitPrice) {
    price = priceGenerator.next().value;
    console.log(`this generator return ${price}`);
}
console.log(`buying at ${price}`);

3.3: 析构表达式

析构表达式又称解构，是ES6的一个重要特性，Typescript在1.5版本中开始增加了对结构的支持，所谓结构，就是将声明的一组变量与相同结构的数组或者对象的元素数值一一对应。分数组解构（[]）和对象解构（{}）两种。

数组解构示例:

let imput = [1, 2];
let [first, second] = input;
console.log(first); //相当于inputp[0]
console.log(second); //相当于input[1]
function f([first, second]) {
    console.log(first + second)
}
f{[1, 3]}   //结果是4

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); //1
console.log(second); //[2,3,4]

对象解构示例：

let test = {
    x: 0,
    y: 0,
    width: 15,
    heights: {
        height1: 10,
        height2: 20
    }
};
let { x, y: myY, width, heights: {height2} } = test;
console.log(x, myY, width, height2); //输出：0,10,15,20

4: 箭头表达式

用来声明匿名函数，消除传统匿名函数的this指针问题。示例：

function Test1(names: string) {
    this.names = names;
    setInterval(function() {
        console.log('my name is ' + this.names);
    }, 1000)
}
function Test2(names: string) {
    this.names = names;
    setInterval(() => {
        console.log('my names is ' + this.names)
    }, 1000)
}

var a = new Test1('daocheng'); //undefined
var b = new Test2('daocheng'); //daocheng

5: 循环

typescritpt中涉及三种高级循环方式：forEach()、for in、for of

forEach示例：

var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';

myArray.forEach(value => console.log(value)); //结果为1,2,3,4
//特点：不支持break，会忽略(name)

for in 示例：

var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';

for (var n in myArray ) {
    console.log(n)
}   //结果为1,2,3,4
//特点： 循环的结果是对象或者数组的键值。可以break

for of 示例：

var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';

for (var n of myArray) {
    console.log(n)
}   //结果是1,2,3,4
//特点：忽略属性，可以打断。当循环为字符串时，会把字符串中每个字符打出来

6：类

传统的JavaScript程序使用函数和基于原型（Prototype）继承来创建可重用的“类”，这对于习惯了面向对象编程的开发者来说不是很友好，Typescript中可以支持基于类（class）的面向对象编程

6.1: 类的声明

class Car {
    engine: string,
    constructor(engine: string) { 
        this.engine = engine;
    }
    drive(distanceInMeters: number = 0) { 
        console.log(`aaa is running` + this.engine)
    }
}

let car = new Car('petrol');
car.drive(100)

6.2: 类的封装、继承、多态
封装、继承、多态是面向对象的三大特性。上面的例子把汽车的行为写到一个类中，即所谓的封装。在Typescript中，使用extends关键字可以方便的实现.

继承。示例：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeter: number = 0){
        console.log(`A car runs ${distanceInMeter}m
        powered by` + this.engine)
    }
}

class MotoCar extends Car {
    constructor(engine: string) {
        super(engine)
    }
}

let tesla = new MotoCar('electricity');
tesla.drive();
//其中子类MotoCar的实例对象tesla调用了父类Car的drive()方法。

多态示例：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeter: number = 0){
        console.log(`A car runs ${distanceInMeter}m
        powered by` + this.engine)
    }
}

class Jeep extends Car {
    constructor(engine: string) {
        super(engine)
    }
    drive(distanceInMeters: number = 100) {
        console.log('jeep...')
        return super.drive(distanceInMeters);
    }
}
let landRover: Car = new Jeep('petrol'); //实现多态
> Jeep子类中的drive()方法重写了Car的drive()方法，这样drive()方法在不同的类中就具有不同的功能，这就是多态。注意：子类和派生类的构造函数中必须调用super()，它会实现父类构造方法。

6.3： 修饰符

在类中的修饰符可以分为公共（public）、私有（private）、和受保护（protected）三种类型。在Typescript里，每个成员默认为public，可以被自由的访问。

私有修饰符示例：

class Car {
    private engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
}
new Car('petrol').engine; //报错，私有属性无法在类的外部访问

受保护修饰符示例：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    protected drive() {
        console.log('drving')
    }
}

class MotoCar extends Car {
    constructor(engine: string) {
        super(engine)
    }
    moToDrive() {
        super.drive()
    }
}

let tesla = new MoToCar('electricity');
tesla.drive(); // 报错，受保护成员只有子类访问，实例对象不可
tesla,moToDrive()

6.4: 参数属性

参数属性是通过给构造函数的参数添加一个访问限定符来声明。参数属性可以方便地让我们在一个地方定义并初始化类成员。我们来改造6.1中的例子：

class Car {
    constructor(public engine: string) {}
    drive() { }
}

6.5: 抽象类

Typescript有抽象类的概念，它是供其他类继承的基类，不能直接被实例化。不同于接口，抽象类必须包含一些抽象方法，同时也可以包含非抽象的成员。抽象类中的抽象方法必须在派生类中实现。

abstract class Person {
    abstract speak(): void;
    walking(): void {
        console.log('walking');
    }
}

class Male extends Person {
    speak(): void {
        console.log('man wakling')
    }
}

6.6: 接口

接口在面向对象设计中具有极其重要的作用，在Gof的23种设计模式中，基本上都可见到接口的身影。长期以来，接口模式一直是Javascript这类弱类型语言的软肋，Typescript接口的使用方式类似于Java。
在Typescript中接口有属性类型、函数类型、可索引类型、类类型这几种，在Angular的开发中主要使用类类型接口，我们使用interface关键字定义接口并用implements关键字实现接口。

类类型接口示例：

interfance Animal {
    name: string;
    setName();
}

class Dog implements Animal {
    name: string;
    setName() {
        console.log(this.name)
    }
    constructor() { }
}
//接口更注重功能的设计，抽象类更注重结构内容的体现

6.7: 模块

ES6中引入了模块的概念，在TypeScript中也支持模块的使用。使用import和export关键字来建立两个模块之间的联系。懂点node都知道模块是什么了，不BB了。

7：装饰器

装饰器（Decorators）是一种特殊类型的声明，它可以被附加到类声明、方法、属性或参数上。装饰器有@符号紧接一个函数名称，如：@expression，expression求职后必须是一个函数，在函数执行的时候装饰器的声明方法会被执行。装饰器是用来给附着的主题进行装饰，添加额外的行为。（装饰器属于ES7规范）

在Typescript的源码中，官方提供了方法装饰器、类装饰器、参数装饰器、属性装饰器等几种每种装饰器类型传入的参数大不相同。这里我演示两种装饰器。

复合使用的例子：

function Component(component) {
    console.log('selector: ' + component.selector);
    console.log('template: ' + component.template);
    console.log('component init');
    return (target: any) => {
        console.log('component call');
        return target;
    }
}

function Directive() {
    console.log('directive init');
    return (target: any) => {
        console.log('directive call');
        return target;
    }
}

@Component({
    selector: 'person',
    template: 'person.html'
})
@Directive()
export class Person {}

let p = new Person();
//看不懂没关系，知道有这么个东西就可以了，Angular框架在依赖注入、组件等部分中有多个复合装饰器应用的场景.毕竟装饰器是ES7的草案标准。

8：泛型

参数化的类型，一般用来限制集合的内容。
示例：

class MinHeap<T> {
    list: T[] = [];
    
    add(element: T): void {
        //这里进行大小比较，并将最小值放在数组头部，功能代码省略。
    }
    min(): T {
        return this.list.length ? this.list[0] : null
    }
}

let heap = new MinHeap<number>();
heap.add(3);
heap.add(5);
console.log(heap.min())

9：声明文件

声明文件也称为类型定义文件，当我们项目中要使用第三方的Javascript库如jQuery、lodash等就需要用声明文件，声明文件是以.d.ts为后缀的形式存在的，其作用是描述一个Javascript模块文件所有导出的接口类型信息。

例如使用jquery:
npm install –save @types/jquery