3分钟快速了解TypeScript

很多开发者对新生事物，会有畏惧的心情，其实，静下心来，大家会发现，编程语言之间都是相通的，大同小异。因最近Cocos游戏开发建议使用TypeScript，故给大家介绍下TypeScript，帮助大家快速入门。

TypeScript是由微软开发的自由和开源的编程语言，是JavaScript的一个超集，支持 ECMAScript 6标准。设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的 JavaScript可以运行在任何浏览器上。

一、 JavaScript 与 TypeScript 的区别

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

1. TypeScript与JavaScript 基础类型的区别

JavaScript是一种弱类型的编程语言，其基本数据类型有number、string、boolean、Array、null、undefined。

而TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误，如下实例：

var num:number = "bycw"; // 这个代码会编译错误

但是，为了保持跟JavaScript的弱类型同步性，TypeScript中增加了any类型，表示任意类型，声明为 any 的变量可以赋予任意类型的值。如下：

var a : any = "bycw"; // 将字符串赋值给any类型的变量a
a = 666; // 将数值赋值给any类型的变量a

需要注意的是：TypeScript会进行类型推断，也就是当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。如下：

var num = 2; // 类型推断为 number
console.log("num 变量的值为 "+num);
num = "12"; // 编译错误，因为推断类型为number，再赋值字符串
console.log(num);

编译时，报错：error TS2322: Type '"12"' is not assignable to type 'number'.表示字符串“12”不能赋值给一个number类型的变量。

除此外，TypeScript还支持联合类型。

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。注意：只能赋值指定的类型，如果赋值其它类型就会报错。可以通过联合参数限定函数参数的类型。

创建联合类型的语法格式如下： Type1|Type2|Type3

TypeScript声明一个联合类型：

var val:string|number
val = 12
console.log("数字为 "+ val)
val = "Runoob"
console.log("字符串为 " + val)

2. TypeScript与JavaScript 基础语法的区别

相对于JavaScript，TypeScript语义化表述更清晰，更便于阅读理解，也方便使用其它面向对象编程语言的开发者快速上手。

【1】在变量声明和方法声明时，TypeScript需要在变量名及方法名后加上冒号(:)及数据类型。

【2】在语法结构上，TypeScript 还支持 for…of 、forEach、every 和 some 循环。

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

TypeScript for...of 循环

let someArray = [1, "string", false];
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

forEach、every 和 some 是 JavaScript 的循环语法，TypeScript 作为 JavaScript 的语法超集，当然默认也是支持的。

因为 forEach 在 iteration 中是无法返回的，所以可以使用 every 和 some 来取代 forEach。

TypeScript forEach 循环

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
  // val: 当前值 
  // idx：当前index 
  // array: Array
});

TypeScript every 循环

let list = [4, 5, 6];

list.every((val, idx, array) => {
  // val: 当前值 
  // idx：当前index 
  // array: Array 
  return true; // Continues 
  // Return false will quit the iteration
});

当然，相对于JavaScript、TypeScript做了一些优化和改进，在本文后续内容中给大家逐一解析。（参见本文后续TypeScript新增特性）

二、 TypeScript与Java等编程语言的区别

对于之前使用Java、C#等编程语言的学习者几乎可以在几分钟内快速上手。比如其变量和方法声明与Java语法的区别如下：

TypeScript中声明变量：

var county: string= “china”;

Java中声明变量：

String county = “china”;

TypeScript中声明方法：

public update(dt : number) : void{}

Java中声明变量：

public void update(dt){}

简言之，相对于Java，TypeScript将数据类型放到了变量名后，将返回值类型放到了方法名后且在中间插入了一个:，学Java的同学是不是感觉被山寨了！！

三、 TypeScript新增特性

1. 可选参数和默认参数

可选参数：在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。

以下实例，我么将 lastName 设置为可选参数：

function buildName(firstName: string, lastName?: string) {
  if (lastName)
    return firstName + " " + lastName;
  else 
    return firstName;
}
let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams", "Sr."); // 错误，参数太多了
let result3 = buildName("Bob", "Adams"); // 正确

可选参数必须跟在必需参数后面。如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。如果都是可选参数就没关系。

默认参数：我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，语法格式为：

function function_name(param1[:type],param2[:type] = default_value) {

}

注意：参数不能同时设置为可选和默认。

以下实例函数的参数 rate 设置了默认值为 0.50，调用该函数时如果未传入参数则使用该默认值：

function calculate_discount(price:number,rate:number = 0.50) {
  var discount = price * rate;
  console.log("计算结果: ",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)

编译以上代码，得到以下 JavaScript 代码：

输出结果为：

function calculate_discount(price, rate) {
  if (rate === void 0) { 
    rate = 0.50; 
  }
  var discount = price * rate;
  console.log("计算结果: ", discount);
}

calculate_discount(1000);

calculate_discount(1000, 0.30);

计算结果: 500

计算结果: 300

3. 剩余参数

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。这个语法跟Java中JDK1.5版本新增功能一致。

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。

function addNumbers(...nums:number[]) {
    var i;
    var sum:number = 0;
    for(i = 0;i<nums.length;i++) {
        sum = sum + nums[i];
    }
    console.log("和为：",sum)
}
addNumbers(1,2,3)
addNumbers(10,10,10,10,10)

编译以上代码，得到以下 JavaScript 代码，如下：

function addNumbers() {
    var nums = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        nums[_i] = arguments[_i];
    }
    var i;
    var sum = 0;
    for (i = 0; i < nums.length; i++) {
        sum = sum + nums[i];
    }
    console.log("和为：", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

输出结果为：

和为： 6

和为： 50

4. Lambda 函数

Lambda 函数也称之为箭头函数。箭头函数表达式的语法比函数表达式更短。这一点跟Java中JDK1.8版本后的新增特性一致。

函数只有一行语句： ( [param1, parma2,…param n] )=>statement;

以下实例声明了 lambda 表达式函数，函数返回两个数的和：

var foo = (x:number)=>10 + x
console.log(foo(100)) //输出结果为 110

编译以上代码，得到以下 JavaScript 代码：

var foo = function (x) { 
    return 10 + x; 
};
console.log(foo(100)); //输出结果为 110

输出结果为：110

5. 数组解构

我们也可以把数组元素赋值给变量，如下所示：

var arr:number[] = [12,13]
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x, y)

编译以上代码，得到以下 JavaScript 代码：

var arr = [12, 13];
var x = arr[0], y = arr[1]; // 将数组的两个元素赋值给变量 x 和 y
console.log(x,y);

输出结果为：12 , 13

四、面向对象相关设计

TypeScript 是面向对象的 JavaScript。

TypeScript 支持面向对象的所有特性，比如类、接口等。

TypeScript在面向对象设计这块跟Java如出一辙。Java基础好的同学，可以无痛过渡。

1. 类

类描述了所创建的对象共同的属性和方法。跟Java中几乎完全一样，仅仅构造函数略有区别。

class Car {
    // 字段 
    engine:string;
    // 构造函数 
    constructor(engine:string) {
        this.engine = engine
    }
    // 方法 
    disp():void {
        console.log("发动机为 : "+this.engine)
    }
}

使用 new 关键字来实例化类的对象，语法格式如下：

var object_name = new class_name([ arguments ])

类实例化时会调用构造函数，例如：

var obj = new Car("Engine 1")

类中的字段属性和方法可以使用 . 号来访问：

// 访问属性
obj.field_name
// 访问方法
obj.function_name()

其它封装、继承、多态等跟Java中几乎一毛一样。在此不做过多介绍。只是细微区别，例如默认访问修饰符为public（默认） : 公有，可以在任何地方被访问。

2. TypeScript 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。TypeScript 接口定义如下：

interface interface_name {
}

以下实例中，我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。

customer 实现了接口 IPerson 的属性和方法。

interface IPerson {
    firstName:string,
    lastName:string,
    sayHi: ()=>string
}
var customer:IPerson = {
    firstName:"Tom",
    lastName:"Hanks",
    sayHi: ():string =>{return "Hi there"}
}
console.log("Customer 对象 ")
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())
var employee:IPerson = {
    firstName:"Jim",
    lastName:"Blakes",
    sayHi: ():string =>{return "Hello!!!"}
}
console.log("Employee 对象 ")
console.log(employee.firstName)
console.log(employee.lastName)

需要注意接口不能转换为 JavaScript。它只是 TypeScript 的一部分。

3分钟快速了解TypeScript