LayaAir + TypeScript 引擎开发环境搭建

一、摘要：

  经过几个月的紧张开发，我们项目组的项目终于到了调整上线阶段，所以手头上基本没什么活了。主程安排我们去学习LayaAir + TypeScript的框架，应该是打算开个新项目了，特此分享一下折腾了我一整天的LayaAir + TypeScript的开发环境搭建。（网页服务器这一大块的东西是真的让人头疼，有时候搭好都不知道为什么，安全感极差。）

二、详细步骤：

1.下载安装Node环境：

1.1：检查Node.js的环境是否已安装：

  Win+R——>输入cmd——>控制台输入npm -h。 如果弹出一大段关于node的版本信息，则可以直接跳过1.2步骤。

1.2：下载Node.js：

  进入官网 https://nodejs.org/en/ ，下载LTS版本的node.js，按步骤一直下一步安装好即可。安装完了，跳转回1.1步骤，成功显示node的版本信息即可进入下一步。

2.安装TypeScript环境：

2.1：如果你此时是处于联网环境，则可以直接通过npm命令直接下载安装配置TypeScript的开发环境：

  直接在命令行环境里输入指令：npm install -g typescript ,单击回车键，等待安装完成即可。 （注意这个-g参数，代表是全局环境，在设置环境变量的时候作区分，事关后面。）当看到命令行中出现“——typescript@版本号”的信息时，表示已经安装成功。

2.2：如果你必须在离线环境下安装（例如我们公司是内网开发环境），则需要你在联网环境下通过2.1步骤安装好TypeScript。

  然后进入以下路径：C://Windows/用户/用户名/AppData/ ，在此文件夹中找到npm文件夹，将它整个打包好，完整的复制在离线电脑的相同路径下即可。

3.下载并安装LayaAirIDE：

  进入官网：https://ldc2.layabox.com/layadownload/?type=layaairide ，下载最新版本的IDE即可，因为IDE都是绿色版，所以直接解压即可使用。

到达这一步，在LayaAir中已经可以正常的使用TypeScript语言来进行开发了，但是TypeScript作为一门独立的语言，要对它进行学习，单独的开发环境搭建也是必不可少的。所以接下来我主要说一下该如何在VSCode中正常的使用TypeScript语言进行开发。

三、VSCode环境下的TypeScript语言编译器设置：

1.随便创建一个文件夹，然后用VSCode打开这个文件夹。

2.创建一个ts文件，在VSCode中打开。例：Test.ts ，TypeScript语言的文件都是ts作为后缀的。

3.右键单击开始菜单。

4.选择Windows PowerShell（管理员）选项（注意，如果不选择管理员选项，后续操作中会因为没有权限而报错）。

5.在PowerShell命令行界面，通过指令跳转到第1步中创建的项目文件夹。

6.在此目录下，执行tsc --init指令，执行后会生成tsconfig.json文件即可。（注意，如果是在离线环境下，通过我前面的拷贝操作安装的typescript的话，很可能会报错，因为安装的ts不是全局环境下，无法检测到相关指令。所以这时候可以使用npx tsc --init指令，或者直接去全局环境Path中添加ts的环境目录）

注意：此时可以修改一下tsconfig.json的配置，找到“OutDir”："./"，取消它的注释，修改字符串数据，可以更改为自己想要的输出路径，该参数表示自动编译后的js文件的保存路径。

7.重启VSCode，重新进入前，将VSCode的启动方式，设置为管理员启动。（如果不进行这一步，后续会因为权限问题报错）

8.为ts文件输入代码，这里我提供一段官方的代码：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

9.编辑完ts文件，现在开始编译，依序点击VSCode菜单：终端——>运行任务——>typescript——>监视：tsconfig.json（这一项前面配置好会自动显示）。

注意：这一步可能会报错，因为当前文件夹的执行政策未开启，这时候可通过下述步骤开启：

9.1：在管理员运行状态下的PowerShell跳转到当前项目文件夹中。

9.2：执行指令：get-ExecutionPolicy，这时候如果显示Restricted，表示此时状态是禁止的。

9.3：执行指令：set-ExecutionPolicy RemoteSigned；

9.4：执行9.2步骤，这时候显示的如果是RemoteSigned，表示权限已打开，再次执行9步骤以后，该目录下TypeScript脚本都是自动编译的了。

四、总结：

以上便是整套开发环境的搭建全过程了，如果有什么纰漏，请指正。