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)

给大家推荐个学习交流群点击链接加入群聊【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<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 的一部分。

推荐阅读更多精彩内容