第一个TypeScript程序

Posted 2021-04-25 孤独剑搞开发

首先感谢大家的持续关注，最近工作比较忙，没能及时更新，非常抱歉。之前给大家介绍了微软的新一代神器：VSCode，今天我们就用它来写个小程序试试，还是经典的hello world！

先来看看最后的输出，只有一句话：“欢迎关注 孤独剑搞开发”

首先新建工作目录如下：

test/
   ├─ src/

我们的源代码(也就是TS代码)将存放在test/src目录下。

---

编写TS代码

像学习其他语言一样，我们在src目录下新建一个名为main.ts的文件，写一个hello world的小程序：

现在问题来了，怎么才能让它跑起来呢？答案至需要编译。

---

使用gulp进行编译

TS代码只有别编译为JS代码后才能在node或浏览器中跑起来。这里我们用到一个工具：gulp，我们用它来编译上边的TS代码。

为此首先需要安装Node，限于篇幅，如何安装Node，本文不做详述，可自行baidu或google。

安装好Node后，首先使用npm init命令来初始化我们的工程，该命令会交互式的让我们填写一些信息，完成之后将在项目根目录下生成一个package.json的文件， 其内容大致如下：

接下来，要想使用gulp，我们还需要安装一些依赖，可以使用npm install命令：

npm install -g gulp-cli

npm install --save typescript gulp gulp-typescript

然后我们在项目根目录下新建名为tsconfig.json的文件，它是一个配置文件，至编译TS所必须的，其内容大致如下：

其中files选项是必须的，它是一个数组，存放着所有需要编译的TS代码的路径，可以是相对路径，也可以是绝对路径。

compilerOptions选项是可选的，如果没有，将采用默认选项进行编译。我们这里设置的两个参数：

target:编译之后生成的javascript文件需要遵循的标准；

noImpicitAny: true/false，true表示将进行强类型检查，无法推断类型时，提示错误; false表示如果编译器无法根据变量的使用来判断类型时，将用any类型代替。

最后在项目根目录下新建名为gulpfile.js的文件，它是使用gulp所必须的，其内容如下：

其中ts.createProject()用来指定编译所需要的TS配置文件，也就是我们前边创建的tsconfig.json文件；

tsProject.src()会根据配置文件tsconfig.json，将所有需要编译的TS文件全部加载进来；

tsProject()会将我们的TS代码编译为JS代码；

gulp.dest(path)会将编译好的JS代码输出到path指定的目录下；如果path指定的目录不存在，将会被自动创建。

最后的最后，我们终于可以开始编译了，如下图所示，在终端输入gulp，gulpfile.js中名为default的task将会自动执行：

结束后我们将在build目录下得到一个main.js的文件：

---

运行

我们在终端输入：node build/main.js 便会得到本文最开始给出的结果：