很多开发者对新生事物，会有畏惧的心情，其实，静下心来，大家会发现，编程语言之间都是相通的，大同小异。因最近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)
给大家推荐个学习交流群点击链接加入群聊【cocos/unity交流群】
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 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 的一部分。