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…