引言
很多开发者对新生事物，会有畏惧的心情，其实，静下心来，大家会发现，编程语言之间都是相通的，大同小异。因最近Cocos游戏开发建议使用TypeScript，故给大家介绍下TypeScript，帮助大家快速入门。
TypeScript是由微软开发的自由和开源的编程语言，是JavaScript的一个超集，支持 ECMAScript 6标准。设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的 JavaScript可以运行在任何浏览器上。https://space.bilibili.com/351545447
一、JavaScript 与 TypeScript 的区别
TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。
- 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)
- 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 中声明变量：publicvoid update(dt){}
简言之，相对于Java，TypeScript将数据类型放到了变量名后，将返回值类型放到了方法名后且在中间插入了一个:，学Java的同学是不是感觉被山寨了！！
三、TypeScript新增特性
- 可选参数和默认参数
可选参数：在 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 functionname(param1[:type],param2[:type] = defaultvalue) {
}注意：参数不能同时设置为可选和默认。
以下实例函数的参数 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 === void0) { rate = 0.50; }
var discount = price * rate;
console.log(
"计算结果: ", discount);}
calculate_discount(1000);
calculate_discount(1000, 0.30);
计算结果: 500
计算结果: 300
- 剩余参数
有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。这个语法跟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
- 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
- 数组解构
我们也可以把数组元素赋值给变量，如下所示：
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基础好的同学，可以无痛过渡。
- 类
类描述了所创建的对象共同的属性和方法。跟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 = newCar("Engine 1")
类中的字段属性和方法可以使用 . 号来访问：
// 访问属性
obj.field_name
// 访问方法
obj.function_name()
其它封装、继承、多态等跟Java中几乎一毛一样。在此不做过多介绍。只是细微区别，例如默认访问修饰符为public（默认） : 公有，可以在任何地方被访问。
- 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 的一部分。
网友评论