• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

学习typescript这一章就够了

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

因为本人主要是分享使用h5游戏引擎进行开发方面的小知识,所以此教程主要是针对一直使用javascript开发想尝试使用typescript作为游戏开发语言的同学,所以这里只讲解开发中最常用的ts基础语法,保证看完本章之后能够看懂并开发cocos creator/laya air游戏引擎的Typescript代码,要求读者有javascript基础并了解ES6特性。除了本章内容外ts还有很多其他的但不常用的特性这里不会介绍,想详细学习请参考官方手册:https://www.tslang.cn/docs/handbook/basic-types.html

本章内容分几个部分介绍:

  1. 了解什么是强类型、弱类型、静态类型、动态类型:
  2. TypeScritp介绍
  3. 基本数据类型
  4. 函数的使用
  5. 类的使用
  6. 模块的导入导出
  7. as的使用
  8. 泛型

注意:文中ts代码直接使用laya air游戏引擎作为运行环境,如果想使用原生环境请百度安装node.js配置环境。

一、强类型、弱类型、静态类型、动态类型:

1.强类型语言:

强类型语言简单来说就是一种强制类型定义的语言,如果某一个变量被定义类型,如果不经过强制或隐式转换,则它永远就是该数据类型了,强类型语言包括Java、c#、C++等高级语言。

2.弱类型语言:

弱类型语言是变量值的类型是可自动改变的,如果某一个变量被定义类型,该变量可以根据环境变化(赋值)自动进行转换,不需要经过显性强制转换。弱类型语言包括vb 、PHP、javascript等语言。

所以强类型语言还是弱类型语言的判断标准是是否会隐性的进行语言类型转变。

3.静态类型语言:

静态语言是变量的数据类型的检查是发生在编译阶段(运行之前)。

4.动态类型语言:

动态语言是变量的数据类型的检查是发生在代码运行阶段。

二、Typescript介绍:

 

而Typescript就是一种静态弱类型的解释型语言(按照定义ts应该是一直强类型,但因为ts最终会被编译成js代码所以被普遍认为是一种弱类型), Typescript作为Javascript的超集,在Javascript的基础上添加了静态类型的检查、类型定义、类(ES6虽然也有)、缺省参数值等等特性,并且完全支持ES6标准,且兼容Javascript的所有版本,JavaScript程序可以直接移植到TypeScript,在运行阶段Typescript其实会全部转成Javascript代码(语法转换),解释器本质上还是运行的js代码。

Typescritp的出现意味着将用于可以开发大型项目,并且帮助开发人员能够在编译阶段就发现问题(静态检查)。

关于ts使用这里推荐一个知乎链接:https://www.zhihu.com/question/64563945

三、基本数据类型:

下面直接开发ts语法教程:

(1)在ts中一共提供了十三种基本数据类型(Never、元组和枚举很少用到在此不做介绍),在ts声明变量的基本格式是:  类型声明 变量:数据类型 =  值;与js一致通过var或let(ES6)类声明一个变量:

  1. 布尔类型: 

let bool_num: boolean = false;

  1. Number:

         let decLiteral: number = 6;

  1. String:

         let name: string = "bob";

  1. 数组: 

 let list: number[] = [1, 2, 3];

布尔、string、数组这些基本学过一点点编程的都会知道这里不赘述,ts中的number就相当于是将高级语言中的int、long、float等等与数值有关的全部打包而成一个类型。

  1. Any: 

  let notSure: any = 4;

any类型其实就是js中的var类型,该类型会根据所赋的值自动转成相应类型

代码1::

  1. Void:

  let unusable: void = undefined;

空类型,表示没有任何类型,只能为它赋予undefined和null,主要用于函数(与c语言类似)  

  1. Object: 除上述所有类型之外都是object类型,通常情况下是指函数、类的对象、表;
  2. Null和Undefined: 与void类似,打印没有赋值的变量就是null或者undefined

 

 

四、函数的使用:

函数声明:

函数声明格式: function 函数名():函数返回值类型 { }(跟js一样function可以省略)

如果是void类型可以没有返回值,如果是其他类型必须通过return 对应类型的返回值(ts的打印跟js的打印是一样的);

五、类的使用:

与java、c++等高级语言一样,typescritpe通过也是通过class关键字来声明类,类中有成员属性和成员方法,并且拥有public、private、protected这三级权限,在类中默认情况下就是public类型(照顾小白,有面向对象语言基础的大佬可以直接跳过):

1.声明类:

  声明类的格式:Class 类名{类的属性或方法}

  通过class关键字创建一个类后,再通过new关键字创建一个类的对象,通过该对象就可以调用类的属性或方法

2.三级权限:

Public(公有):类的对象以及类的子类都可以使用类的该属性和该方法;

Protected(保护):只有继承了该类的子类(后续讲)才能调用类的中的该属性和该方法;

Private(私有):除了类本身外,任何对象(包括子类)都不可调用改类的该属性和该方法;

 

3. 类的属性和方法的使用:

所谓类的属性其实就是声明在类中的变量,所谓类的方法其实就是声明在类中的函数:

4.类的继承:”继承”是指该子类将拥有所有父类protected和public类型的方法。子类(衍生类)通过extends关键字继承父类(基类),再在子类的构造方法中写入关键字super()才能真正继承到父类:

5.类的(属性)方法重写:

在编写的过程中可能会遇到这么一种情况:子类的方法与父类方法出现重名。当发生这种情况时,因为编译器会首先在子类中进行查找,调用子类的方法,如果没有则通过隐藏的_proto_去父类中进行查找,如果有再调用该父类的方法(不知道_proto_的同学可以看看我前面的文章,或者去百度下”js 原型链”):

6.抽象类:

抽象类是一种通过abstract关键字修饰的类,在抽象类中可以通过abstract创建抽象方法留给子类去实现,抽象类只能用于给子类继承使用,且不能通过new创建对象。

这种类存在的意义就是为了提高开发效率,统一接口的使用。

7.Readonly(只读)static(静态)关键字:

被readonly声明过的变量将变为只读变量,在初始化后不可再修改变量值:

被static声明过的变量将变为静态变量,在类外面(里面同理)可以直接通过”类名.变量名”的方式访问:

六、模块导入导出:

ts中的模块导入其实跟ES6是一样的,通过export 导入,import from导出(关于ES6中import 和export 使用格式其实非常多,这里不赘述):

A模块代码:

B模块代码:

七、as的使用:

as的作用是做类型的强制转换,基本数据类型和类都可以使用,注意类如果要转换只能从子类向父类转:

八、泛型:

泛型的作用简单来说就是统一了类中属性和方法的类型,泛型的存在大大的提高的代码的重用性,先直接上代码:

如图在类的后面添加<T>, 这个”<>”中的值可以任意,他指定了类中使用”T”进行声明的变量或函数的类型,比如上面我在<>中传入了number类型,那么他的成员属性num和成员方法func都成number类型(注意方法要有返回值);

 

有了上面这些基础知识,做游戏开发基本没有什么问题,当然ts还有命名空间、交叉类型等等其他特性这里没有介绍,但laya开发过程中基本不会用到,这里不做介绍,想深入学习ts请查看上面给出的官方文档链接。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript调用javascript&amp;&amp;URI.js发布时间:2022-07-18
下一篇:
vs code安装使用ESLint,typescript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap