乐趣区

抛弃JavaScript快速入门TypeScript

jiezi

TypeScript 简介

定义

总所周知，JavaScript 语言并不是一门面向对象的语言，而是一种解释性的函数式编程语言。在前端 Web 还不是很复杂的情况下，使用 JavaScript 是可以应付各种需求的，但当前端页面变的越来越复杂时，JavaScript 就显得比较力不从心了，而 TypeScript 就是为了解决这个情况而诞生的语言。
TypeScript 是面向对象的语言同时支持许多面向对象的特性，因此可以使用它创建出更加强壮和易于扩展的程序。同时，TypeScript 扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。

根据维基百科的定义：TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。

TypeScript 的优势

可以看到，越来越多的前端框架开始使用 TypeScript，那么它究竟有哪些优点呢？下面罗列一些常见的优点：

  • 更多的规则和类型限制，让代码预测性更高，可控性更高，易于维护和调试。
  • 对模块、命名空间和面向对象的支持，更容易组织代码开发大型复杂程序。
  • TypeScript 的编译步骤可以捕获运行之前的错误。
  • Angular2+ 和 Ionic2+ 默认使用 TypeScript，同时 Vue.js 和 React.js 等一些流行的前端框架也开始支持 TypeScript。
  • …

环境搭建

俗话说，“工欲善其事，必先利其器”，学习一门新的语言和技术必须先了解其开发环境。

安装 TypeScript

TypeScript 提供了两种主要的方式获取 TypeScript 工具：

  • 通过 npm（Node.js 包管理器）
  • 安装 Visual Studio 的 TypeScript 插件

最新版的 Visual Studio 2017 和 Visual Studio 2015 Update 3 默认包含了 TypeScript，如果你的 Visual Studio 还不支持 TypeScript，可以使用 Visual Studio 下载页面链接来获取安装插件。同时，针对使用 npm 的用户，可以使用下面的命令来安装 TypeScript 工具。

npm install -g typescript

除了上面两种方式外，我们还可以使用 TypeScript 提供的在线环境来体验 TypeScript 的魅力：http://www.typescriptlang.org…。

创建 TypeScript 文件

打开编辑器，将下面的代码输入到 greeter.ts 文件里。

function greeter(person) {return "Hello," + person;}

let user = "jack ma";

document.body.innerHTML = greeter(user);

编译代码

TypeScript 使用.ts 作为扩展名，但是这段代码仅仅是 JavaScript 而已，想要运行这段代码，还需要编译上面的代码。在命令行上，运行 TypeScript 编译器：

tsc greeter.ts

输出结果为一个 greeter.js 文件，它包含了和输入文件中相同的 JavsScript 代码。此时，我们就可以运行这段代码了。

类型注解

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。在这个例子里，我们希望 greeter 函数接收一个字符串参数，那么我们可以这么做：

function greeter(person: string) {return "Hello," + person;}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新编译，会看到一个错误：

greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

接口

让我们开发这样一个示例：使用一个接口，它描述了具有 firstName 和 lastName 字段的对象。在 TypeScript 中，如果两个类型其内部结构兼容，那么这两种类型兼容。这使我们实现一个接口，仅仅只需必要的结构形状，而不必有明确的 implements 子句。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {return "Hello," + person.firstName + " " + person.lastName;}

let user = {firstName: "Jane", lastName: "User"};

document.body.innerHTML = greeter(user);

类

TypeScript 支持 JavaScript 的新特性，比如支持基于类的面向对象编程。让我们创建一个 Student 类，它带有一个构造函数和一些公共字段。

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {this.fullName = firstName + "" + middleInitial +" " + lastName;}
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {return "Hello," + person.firstName + " " + person.lastName;}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

重新运行 tsc greeter.ts，你会看到生成的 JavaScript 代码和原先的一样。TypeScript 里的类只是 JavaScript 里常用的基于原型面向对象编程的简写。

语法特性

和 JavaScript 相比，TypeScript 带来了诸多语法上的变化，下面就其比较重要的罗列如下。

字符串特性

多行字符串

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

var html = `<div>
<span></span>
</div>`

字符串模板

可以在多行字符串中使用模板，示例：

var names = 'daocheng';
function getImg() {return '<i></i>'}

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

自动拆分字符串 

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

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

参数

参数类型

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

类型声明与默认参数

在 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); // 正常

可选参数

在 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);
// 注意：可选参数必须放在默认参数后面

函数

剩余函数

当需要同时操作多个参数，或者并不知道会有多少参数传递进来时，就需要用到 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);

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

析构表达式

析构表达式又称解构，是 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

箭头表达式

用来声明匿名函数，消除传统匿名函数的 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

循环

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
// 特点：忽略属性，可以打断。当循环为字符串时，会把字符串中每个字符打出来

类

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

类的声明 

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)

类的封装、继承、多态

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

继承

继承就是类与类之间一种特殊与一般的关系，可以理解成“is a”的关系。在继承关系中，子类可以无条件的继承父类的方法和属性。

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()，它会实现父类构造方法。

参数属性

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

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

抽象类

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

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

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

接口

接口在面向对象设计中具有极其重要的作用，在 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() {}
}
// 接口更注重功能的设计，抽象类更注重结构内容的体现

模块

ES6 中引入了模块的概念，在 TypeScript 中也支持模块的使用。使用 import 和 export 关键字来建立两个模块之间的联系。

装饰器

装饰器（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();

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

泛型

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

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())
退出移动版