3分钟让你快速了解TypeScript，还不快来瞧瞧？

2022-03-15 18:51 作者:小小游戏开发程序员 0人读过 | 我要投稿

引言

很多开发者对新生事物，会有畏惧的心情，其实，静下心来，大家会发现，编程语言之间都是相通的，大同小异。因最近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
returntrue;// 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新增特性

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 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

2. 剩余参数

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。这个语法跟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

3. 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){return10+ x;};
console.log(foo(100));//输出结果为 110

输出结果为：110

4. 数组解构

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

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中几乎完全一样，仅仅构造函数略有区别。

classCar{
// 字段
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（默认） : 公有，可以在任何地方被访问。

2. TypeScript 接口

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

interface interface_name {
}

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

interfaceIPerson{
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 的一部分。

引言

一、JavaScript 与 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

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还支持联合类型。

创建联合类型的语法格式如下： 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需要在变量名及方法名后加上冒号(:)及数据类型。

TypeScript for...of 循环

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

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
returntrue;// 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新增特性

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");// 正确

以下实例函数的参数 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

2. 剩余参数

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

3. 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){return10+ x;};
console.log(foo(100));//输出结果为 110

输出结果为：110

4. 数组解构

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

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中几乎完全一样，仅仅构造函数略有区别。

classCar{
// 字段
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()

2. TypeScript 接口

interface interface_name {
}

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

interfaceIPerson{
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 的一部分。

更多教学视频及素材源码：

https://www.bycwedu.com/promotion_channels/829468798

标签：

3分钟让你快速了解TypeScript，还不快来瞧瞧？

引言

一、JavaScript 与 TypeScript 的区别

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

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

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

三、TypeScript新增特性

1. 可选参数和默认参数

2. 剩余参数

3. Lambda 函数

4. 数组解构

四、面向对象相关设计

1. 类

2. TypeScript 接口

引言

一、JavaScript 与 TypeScript 的区别

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

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

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

三、TypeScript新增特性

1. 可选参数和默认参数

2. 剩余参数

3. Lambda 函数

4. 数组解构

四、面向对象相关设计

1. 类

2. TypeScript 接口