typescript

## 寫在前面

注：如下 TypeScript 簡寫爲 ts。

2018 年 Vue 3.0 用 ts 重寫，你多少能嗅到一些行業的變化，變化的本質是對工程上成本和收益的思考。2.0 選用 Flow 進行靜態代碼檢查，3.0 直接使用 ts 重寫，Flow 的投入顯然能 cover 其自己帶來成本。ts 相對於 Flow 在成本方面是較高的，畢竟 ts 是一門語言而 Flow 只是個工具，在收益方面 ts 帶來的是整個編程體驗的提高，搭配 VSCode 能夠作更多的智能提示和校驗。

Angular 也從 2.0 開始採用 TS 編寫，三大 MVVM 框架有兩個用 ts 編寫，是時候入坑了。

咱們大致的學習路徑是這樣：
- 一、先用 webpack 配置一個簡單的工程，這個工程能實時編譯 ts 到 js；
- 二、從官網上學習語法，在上面工程中編寫 Demo 加深理解；
- 三、結合框架和場景學習 ts 應用。

## 純 ts 工程構建

原本打算直接從 webpack 官網考幾段配置就把工程搭建起來，可是遇到了各類奇奇怪怪的問題折騰了一下午沒搞定，後來轉變思路從 vue-cli 腳手架入手，採用減法的形式獲得了一個極簡腳手架。

爲了記念這段折騰，我 release 了一個版本，有興趣的能夠去看看：https://github.com/xiaoqiang-zhao/typescript-study/releases/tag/0.1

而後從 webpack 官網找到 [webpack-typescript](https://webpack.js.org/guides/typescript/) 配置，添加了 loader 等一些配置，升級了 webpack 版本(須要 4.0 以上)，到此爲止環境終於跑起來了：https://github.com/xiaoqiang-zhao/typescript-study/releases/tag/0.2

後面的學習 Demo 都在開源項目 [typescript-study](https://github.com/xiaoqiang-zhao/typescript-study) 中編寫。文件目錄結構也簡單明瞭：

${typescript-study}
├── build 構建和啓動開發環境
└── src 源碼
├── main.js 入口文件
└── ts-demo ts demo 源碼

demo 源碼和 ts 官方文檔一一對應。

花夏:
666

趙曉強vue羣:
想一塊兒入坑學習的能夠找我加 Collaborators，免費培訓開源協做流程

趙曉強vue羣:再放一遍工程地址：https://github.com/xiaoqiang-zhao/typescript-study