002.typescript初体验（ 一 ）

初衷

十多年前，Java的繁琐让不少人仇恨类型系统， 他们改用Python、Ruby等动态类型语言， 这使咱们可以快速而松散地完成工做。 通过大约十年的热血编程，咱们最终发现，动态语言编写的巨大单体项目是很是脆弱的。

好吧不知道多少次被小伙伴安利过typeScript了，一直感受这无非是ESMAscript的超集而已，还不着急，但是当项目线逐渐膨胀，我感受到了脆弱无力。主要无力是两点，1、设计模型的脆弱。2、参数类型的混乱。设计模型是内功须要长时间的修为，还好参数类型的混乱我能用过工具方法阻止。

安装简单的学习环境

首先我须要安装最简单的测试环境，让我能够测试全部typeScript的全部语法。

目录结构

typescript-demo
|----- config             // 脚本文件
        |----- watch.js   // 监听变化执行tsc命令
|----- src                // 产出目录
        |----- js         // build的js文件集合
        |----- index.html // 主index.html文件
|----- ts                 // ts文件集合
|----- package.json
|----- tsconfig.json
复制代码

涉及的npm包

"devDependencies": {
  "chokidar": "^3.0.0",
  "concurrently": "^4.1.0",
  "glob": "^7.1.4",
  "live-server": "^1.2.1",
  "shelljs": "^0.8.3"
}
复制代码

涉及的指令

"scripts": {
  "start": "concurrently \"npm run server\" \"npm run watch\"",
  "server": "live-server ./src --port=8080",
  "ts": "tsc",
  "watch": "node ./config/watch.js"
}
复制代码

为何要这样折腾webpack不是就能够用吗？

首先，我须要的是基本0配置的环境，我不想过多折腾环境，我要是的学习。若是我用webpack的话，我可能要配置各类devServer、loader、entry、output等等。但是个人需求只是，开个服务器，监听文件变化，build ts，而后就木了，因此我选择了5个包。

• chokidar 监听文件变化
• concurrently 同时执行多个命令
• live-server 简易服务器
• shelljs 执行shell命令

好吧，个人需求是否是就达到了。而后我只要组合一下就好了。

// watch.js 文件
const shell = require('shelljs');
const chokidar = require('chokidar');

// 监听文件
const watcher = chokidar.watch('./ts',{
  persistent: true,
});
// 执行命令
const command = ()=> shell.exec('npm run ts');
// 监听回调用
watcher
  .on('add', () => command())
  .on('change', () => command())
  .on('unlink', () => command());
复制代码

组合package script

我写了4个script，分别是start、watch、ts、server

• start 组合watch和server
• watch 监听文件变化
• ts build typeScript
• server 启动服务器

当我须要学习的时候，我只要执行一下start就能够了。对了我没有加入自动刷新，为啥呢？由于我以为学习的话，自动刷新反而会让我忽略一些细节。还有一个问题就是，这里会所有build全部ts文件，这我却是感受没啥问题，毕竟小demo能有几行代码，性能问题就不想了。

提醒

• 记得全局安装一下typescript哟

npm install -g typescript
复制代码

• 我所用到的npm版本以及node版本

"node": ">=8.9.1",
"npm": ">=6.1.0"
复制代码

结尾

好吧，我用了大概10多分钟，搭建起了这一套简单易用可扩展的测试环境，而且写了两个demo，而后我就能够愉快的学习了。有时候吧，什么需求选择什么构架，慢慢迭代，不用操之过急。

献上github欢迎clone：github.com/Zjingwen/ty…