技术选型 TypeScript

Nodejs很亲民，无论是前端还是后端的研发，都可以在相对较短的时间内掌握它，而且其运行环境相对也较简单，仅需要安装node就可以运行，社区环境也不错，该有的组件都有，所以对于很多没有复杂逻辑的小型项目，可能会考虑尝试使用Nodejs来构筑。本站一开始的技术选型为 ASP.NET Core，但后来考虑到项目的实际情况——经常不是在同一台电脑上进行开发，且VS相对又较为“笨重”，所以就换成了更易“携带”的Nodejs。

经过一定时间的开发，本站的主要技术选型如下：框架为 Express，其中模板引擎为 EJS，由于我主要是做后端的，所以语言选择了强类型的 TypeScript，DB为 MySQL，缓存选择使用 Redis。为了验证自己之前写的一个IoC组件的性能，首次在正式的项目中安装了 luckystarry-ioc。为了方便未来做SEO，前端没有选择利用 Vue 作成单页应用，而是基于LayUI的一套免费模板进行了少许改造。

对于一个后端研发来说，虽然弱类型语言有很多诱惑，但没有类型检查有时候总感觉不是很放心，这时使用 TypeScript 就成为了一个很自然的选择。虽然单纯使用 TypeScript 的内容可以很方便的找到，但可惜的是网上 TypeScript 与其他框架或组件协同使用的例子并不是很丰富，例如在使用 Vue 开发站点时选择使用 TypeScript，但如果没有设置好，那么语法检查、代码格式化之类的功能往往无法正常发挥效用。

前端部分

Vue的异军突起使后端转型前端容易了许多，很多像我一样的后端研发在做后台等前端项目时，都会首选 Vue，在此感谢尤大的无私奉献。对于我来说，平时喜欢使用 Visual Studio Code 进行开发，而 Vue 项目大家往往会选择 Vetur 插件，但单纯依靠这个插件是没办法很好的支持 Typescript 的。例如使用less+typescript开发的话，独立的.vue文件往往是下面这个样子。

<style lang="less">

</style>
<template>

</template>
<script lang="ts">
  import Vue from 'vue'
  export default Vue.extend({

  })
</script>

按照这种模式直接写代码的话，并不是不能用，但是会遇到以下几点问题：

• TS代码没有类型提示
• TS代码的格式化很难设置
• TS代码量大之后，文件会变得很长，难以检查
• 如果使用 Vuex，不利于使用注解

在尝试了很多次之后，最终我采用了一种比较土的办法，但却轻易地解决了上述所有问题，并且不需要做很复杂的配置。这个方法就是将样式与TS代码从.vue文件中拆出去。效果类似如下：

component.less 文件略

// component.ts
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class Sample extends Vue {
}

<!-- component.vue -->
<style lang="less">
  @import url('./component.less');
</style>
<template>

</template>
<script src="./component.ts" lang="ts" />

// index.ts
import Sample from './component.vue'
export { Sample }

按照上述方法拆分文件后，由于 component.ts 文件直接就是 .ts 后缀的普通 TypeScript 代码文件，无需做任何特别的设置，就可以直接做格式化操作，也可以直接获得代码提示。

后端部分

就像这个站点一样，很多站点都会选择使用 Express。而使用官方指令初始化项目时，往往都是自动生成了一个 ES6 的项目。当我们想要使用 TypeScript 时应该怎么办？

一般是先将所有的 .js 先改成 .ts，然后将代码中的 require('xxxxx') 替换为 import 'xxxxx'，剩下的就是解决代码中的一些语法小问题，就可以正常写 TS 代码了。通常我还会将www.ts的路径从\bin移动到\src下，还有类似于app.ts之类的文件也会从根目录移动到\src下，这样就可以使我的所有源码都在同一个\src目录中，这样做是为了让tsconfig.json内容不至于太复杂。

给出一个当前站点的部分目录结构。

├─.vscode
│   └─launch.json
├──src
│   ├─models
│   ├─public
│   │  ├─images
│   │  ├─javascripts
│   │  └─stylesheets
│   ├─repositories
│   ├─routes
│   ├─services
│   ├─views
│   ├─app.ts
│   └─www.ts
├─.gitignore
├─.jsbeautifyrc
├─.prettierrc
├──Dockerfile
├──package.json
├──tsconfig.json
└──tslint.json

写代码通常从来不会成为问题，问题是如何对代码进行调试？这个资料其实网上并不多。我个人的话喜欢在IDE（Visual Studio Code）中通过按 F5 进入到调试环境，但项目被我们按照上面的方法改完之后，按 F5 已经无法正常运行了，该如何解决？

首先我们需要设置调试所需的launch.json，直接给出一个参考：

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "name": "启动程序",
    "program": "${workspaceFolder}\\src\\www.ts",
    "sourceMaps": true,
    "runtimeArgs": ["--nolazy", "--require", "ts-node/register"],
    "env": {
      "NODE_ENV": "development"
    },
    "outFiles": []
  }]
}

除此之外，还需要额外安装ts-node用来运行项目。
完成以上所有步骤后，就可以正常的使用 F5 启动调试了。

TypeScript 是一个非常好用的语言，希望大家有机会可以多多尝试。