screeps 系列教程

介绍

作为使用javascript作为基础语言的游戏，screeps 自然支持使用typescript进行编程。本文就将介绍一下在游戏中使用ts的优缺点以及如何使用ts进行游戏。如果你有ts的相关基础的话对于理解本文会非常有帮助。访问 ts 官方文档来获得更多内容。

TypeScript 三分钟简介

首先简单普及一下typescript (简称: ts)：ts 是基于 js 的拓展型语言，它和 js 最大的区别就是 加入了静态类型检查 (像 java 那样)。除此之外 ts 的语法和 js 几乎完全一致。

在你完成代码编写后，可以使用 ts 编译器将.ts文件编译成原生的.js文件。这个阶段 ts 编译器只做了如下两件事：

根据.ts文件中的静态类型检查代码是否有问题，检查完成后 移除所有的静态类型代码。
将移除了静态类型的代码转化成目标版本(如es5)的原生js代码。

可以看到，ts 并不会让你的代码变的更高级，也不会让你的代码运行的更快。它做的只是增加了一个类型检查阶段。让大多数 “运行错误”转化成“编译错误”，从而提高代码在运行时的稳定性。

ts 官方介绍

在 Screeps 中使用 TS 的优缺点

这一小节介绍一下在游戏里使用 ts 会带来什么影响，在动手将你的项目迁移至 ts 之前，你需要好好考虑下面的内容，然后再做出选择。

优点

让代码运行的更稳定：这个是 ts 的主要作用，有一些隐晦的问题（如空值或者类型转换问题）不太容易发现，但是会引起大问题。相信每个人都经历过一觉起来 creep 死完了的情况。而 ts 的静态类型检查可以轻松的发现这些问题并告诉你：嗨，这代码有问题，如果你不解决就别想用它。
更加清晰的代码逻辑：通过添加类型，可以让你快速的理解某个变量究竟是代表着什么意思，从而让代码维护更加轻松。
更低的重构成本：重构几乎是每个玩家都会遇到的事情，而由于很多代码直接的依赖关系，你要重构的代码越底层，那么要修改的代码就越多，在使用 js 时，你需要费很大功夫把可疑的代码读一遍然后手动修改，哪怕你读的再仔细，都有可能遗漏一些比较隐晦的问题从而降低代码稳定性。而使用 ts 之后，ts 编译器会自动识别出你重构后的类型接口变更，进而发现因代码修改造成的问题。这样我们只需要修改编译器给出的报错代码即可轻松的完成重构。

缺点

更高的学习成本：是的，学习新的 ts 语法！没人觉得这是个有趣的事情吧。
稍显麻烦的调试：记住，你不能直接向screeps服务器提交你的 ts 代码。而是要 先将其编译成原生 js 代码然后再进行提交。所以，一旦运行时代码出现问题，那么你可能就要面对编译后的代码了。虽然编译前后的代码相差并不大，但是一些语法转换可能会让你产生困惑。

我可以优化我的调试么？

是的你可以，通过一些配置手段和额外代码，你可以让错误堆栈追踪你源代码的信息而不是编译后的代码。但是，想这么做依旧有一定的难度，并且会不可避免的消耗你那么一丢丢的 cpu。所以为了简单起见，本文不会加入调试优化的内容。

当然，如果你确实有兴趣的话。你可以按照下面两个链接来升级你的项目：

stackoverflow - 在 screeps 中使用 ts 和 source-map

使用了 source-map 的 screeps-typescript-starter

开始构建 TS 项目！

ok，看来你已经准备好了，那么接下来我们就从零开始，搭建一个用于 screeps 的 ts 项目。注意，下面的内容对于没有 ts 基础的同学可能有些难以理解，我会尽量对出现的名词进行解释。

1> 基本项目搭建

首先我们找个安静祥和的地方新建个名为ts-screeps的文件夹，或者其他你喜欢的名字，没影响。然后切换到文件夹内执行如下命令来进行基本的依赖安装，如果你安装很慢的话请自行百度"npm 切换国内源"：

// 初始化项目
npm init // 然后一路回车
// 安装项目依赖
npm install @types/[email protected] @types/screeps @types/node grunt typescript grunt-ts
// 全局安装 grunt 命令行，如果之前安过可以跳过
npm install grunt-cli -g

先来简单介绍一下我们安装的依赖

@types/screeps screeps 游戏的声明文件, 注意，这个依赖并不是游戏本体，而仅仅是对游戏 api 的描述文件，下面lodash相同。
@types/[email protected] lodash 的声明文件
@types/node node.js 的声明文件
grunt 自动化脚本
typescript ts 编译器本体
grunt-ts 使用 grunt 进行 ts 自动编译的任务
grunt-cli 可以使用grunt命令

这里多解释下上面安装的几个@types声明文件，由于 ts 带有静态类型检查，而如何让 ts 编译器知道我们使用的第三方包的类型呢？就是通过安装这些@types声明文件。并且如果你使用同样由 ts 开发的VScode进行代码编写时，VScode还能自动根据这些安装的声明文件为你 提供代码补全。

安装完成之后我们的项目目录是这样的：

项目目录

2> 创建 Grunfile 自动化脚本

接下来我们配置 ts 编译任务，在和package.json同级的目录下新建Gruntfile.js文件，并填入如下内容：

module.exports = function(grunt) {
    // 从 npm 载入任务
    grunt.loadNpmTasks("grunt-ts")
    // 配置任务
    grunt.initConfig({
        // typescripts 编译任务
        'ts': {
            default : {
                options: {
                    sourceMap: false,
                    // 编译到的目标版本
                    target: 'es5',
                    rootDir: "src/"
                },
                // 要进行编译的目录及文件
                src: ["src/*.ts"],
                // 编译好的文件的输出目录
                outDir: 'dist/'
            }
        }
    })
    // 将 ts 编译任务注册到默认执行命令
    grunt.registerTask('default',  [ 'ts' ])
}

简单介绍一下，Gruntfile是定义本项目中的自动化脚本如何执行。里边分为三部分：

载入 ts 编译任务 grunt.loadNpmTasks
配置 ts 编译任务 grunt.initConfig
将编译任务注册到默认命令 grunt.registerTask

怎么执行任务我们一会再讲，我们先来新建源代码的存放目录。

3> 新建代码存放目录

在项目目录下新建名为src的文件夹，我们的 ts 源文件都要放到这里。如果不想叫这个名字的话请同步修改Gruntfile.js里 ts 编译任务中的rootDir和src属性。

新建完文件夹后我们写一个最基本的 ts screeps 入口文件main.ts：

// screeps 代码入口
module.exports.loop = function(): void {
    console.log(sayHello('world!'))
}

// 定义一个 ts 风格的方法
function sayHello(str: string): string {
    return 'hello' + str
}

可以看到，代码中定义的函数通过:字符指定了参数和返回值的类型，想简单了解一下 ts 的语法可以参考《ts 官方文档 - 五分钟上手》。

到目前为止，我们的项目目录就变成了这个样子：

项目路径

ok, 完事具备，接下来我们就可以动手编译了！

4> 编译项目！

我们在项目根目录下打开控制台，执行如下命令，就可以看到编译任务开始执行了：

grunt

等待几秒钟之后，就可以看到编译完成了，控制台输出如下：

Running "ts:default" (ts) task
Compiling...
Using tsc v3.6.3

TypeScript compilation complete: 3.57s for 1 TypeScript files.

Done.

这时候我们就可以看到项目根目录下自动生成了一个名为dist的文件夹，里面就是编译好的文件：

main.js

module.exports.loop = function () {
    console.log(sayHello('world!'));
};
function sayHello(str) {
    return 'hello' + str;
}

可以看到 ts 把我们的源码中的类型定义剔除了并转换到了我们指定的es5版本(这个转换不太看得出来，不过了解就好 )。接下来，我们只需要通过grunt-screeps或者grunt-contrib-copy任务将其提交到游戏服务器即可。至于提交如何实现请查看 screeps 配置无需游戏客户端的开发环境，文中还介绍了如何在文件保存时自动进行编译。

总结

本文介绍了如何在 screeps 游戏项目中使用 ts 进行开发，通过grunt执行grunt-ts任务将我们的 ts 源码编译成原生的 js 文件。然后就可以将编译好的文件提交到游戏服务器。

除此之外，github 上还有人开源了如何在 screeps 中使用 ts 的模板项目 screeps-typescript-starter 有兴趣也可以尝试下。

如果你在使用的时候遇到了什么疑问的话，欢迎加群565401831提问~

Screeps 使用TypeScript

介绍