关键词

写法冒号强类型变量名语法返回值变量类型定义变量

文字记录

大家好，欢迎来到 cocos 游戏开发入门的第七章，在这一章里边我们介绍一下 TypeScript 的具体用法。 TypeScript 其实就是一种 javascript ，只是说把它变成了强类型的语言，下边是它的官网的地址，我们打开它的官网，你可以直接百度搜索一下 TypeScript 也能够找它的官网地址。那么在这里边第一句话就告诉我们它是一个什么样的东西。
image.png
TypeScript extends javascript ，TypeScript 是扩展了 javascript ，by adding types 也就是通过添加了一些类型，把它变成了一些强类型的语言。
image.png
首先我们应该明白 javascript 本身并不太容易编辑，因为它是一个弱类型的语言。

比如说你在定一个变量或者是定一个对象的时候，前面都是没有类型的，无论是什么类型都是叫 var， 那这就对这个编辑器带来一些困扰，编辑器就无法根据它的类型来进行精确的提示。

比如说你定义了一个 str 它的类型是 var 然后定义了 a 也是 var 那你让编辑器怎么样来提示呢？编辑器并不知道它是一个 string 类型还是一个 number 类型或者是一个其他的类型，所以他就没有办法做出精确的提示。那么在编写大型的程序的时候，这个那就是一个很大的问题了。所以我们一般并不喜欢这种弱类型的语言，因为编辑器提示很困难。

那为了解决这个问题，就产生了 TypeScript ，我们下边可以来对照一下它的写法。首先我们看一下变量的写法，在 javascript 里边定义变量，这是我们所熟悉的，不需要写类型，在 TypeScript 里边的写法就变成这个样子。前面这个标志叫做 let ，image.png算是变量名，image.png是变量类型，后边是一样的，也说我们把变量类型放在这个变量名的后边，然后中间加上一个冒号，它都是这样的一个风格。
image.png
那下边我们可以来演示一下，比如说我们也创建了一个项目，这个项目你可以直接从我们的项目源码里面打开，这边有个节点，然后添加了一个组件，那这个组件我们在 VSCode 里边打开来 pigscript.ts ，我们在moveLeft这个方法里边我们来添加一些测试。
image.png
在 TypeScript 里边你也可以使用原来的 Javascript 写法，它是兼容的。但是我们现在把它改成TypeScript写法，比如说你要定一个string类型的变量，那就是

  1. let str = "dac0127";

这样还不够，你并没有声明这个变量类型，我们要在变量名后边加上一个冒号，然后再加上它的类型，这样就算是强类型的语言了。

  1. let str :string = "dac0127";

同样的，比如说你定义一个数字等于10，你可以这么样来定义，但是为了让它可以精确地提示，我们后边加上它的类型，这样才是正确的写法

  1. let a :number = 10;

那又或者我们要定义一个节点，那this.node 是什么类型呢？

看它是 cc.node 类型，所以我们就在后边加上一个冒号， cc.node
image.png
cc.node 是什么？ 是这个 API 里边定义的一个类型，我们把这个类型放在它的后边就可以了，加上一个冒号，总之都是这样的一个写法，这样的话就变成了一个所谓的强类型的语言。那么编辑器就知道每一个变量，每一个对象它是什么类型了。
image.png

方法

接下来我们再来看一下方法，方法的参数及方法的返回值的写法。
image.png
比如说我们 moveLeft 这个事件响应里边可以传一个参数进来，那按照普通的写法JavaScript写法，那直接写个名字就可以了。但这样的话很不友好。那么编辑器并不知道它什么东西，你看在这里边是可以传一个参数进来的。这个就是我们以前JavaScript 的写法，我们现在也可以这么样来写，但这样写并不好，因为这样写的话就没有法进行提示了。
image.png

这个 VScode的并不知道你这传进来的 evt 是个什么类型，所以输入evt .的时候后面出不来， 因为不知道类型，那现在我们就把它加上类型就好了，后边冒号，事件类型 ，**cc.Event.EventMouse**，具体的来说是一个鼠标事件， cc.Event.EventMouse这个类，那这样的话你在点的时候，evt. 就能够得出来很多方法。
image.png
也就是说加上这个类型之后，我们在编写代码的时候就有提示了，我们就很开心，然后开发的效率也就变高了。

那返回值也是可以添加的，也可以用声明类型的。
image.png
比如说我们添加了一个方法，因为普通的加写法，这是最简单的两数求和 X 和 Y 两个数字，求和返回。那么如果换成加 TypeScript 的话，就要把每一个东西声明一下，然后返回值加在这里边。这个并不是太重要，你看一下。

这是以前普通的写法
image.png
我们在后边加上一个冒号，加上一个 number ，这样的就可以了。
image.png
总之都是这么一个写法，就是一个冒号，然后加上类型就可以来声明它了。所以总体上大家记忆起来的话很简单，你要是没类型就加上一个冒号，加上它的类型就 OK 了，写法都是统一的。当然你要不加的话也没事，不加的话就当成普通的JavaScript来了。

好的，通过这样的一个类型的声明，然后 VSCode 就不会无所适从了。 VSCode 知道它的类型就能够根据它的类型提示它下边有什么东西，从而加快我们的这个开发效率。

那么提示一下大家， TypeScript 语法其实不限于此， TypeScript script 里边添加了无数的东西，非常非常的复杂，复杂到你都不想学它，还添加了这个所谓的 interface 接口，还有枚举泛型等等，搞得非常复杂。好，我们没必要关注那么多，我们就关注我们课程里边这些东西，就够我们来使用了，目前来说你不要去研究他，我们继续往学习就可以了。好的，我们这节课就讲到这里。再见。