（三萬字長文）類型即正義：TypeScript 從入門到實踐系列，正式完結！

時間 2020-05-30

標籤三萬字長類型正義 typescript 入門實踐系列正式完結简体版

原文原文鏈接

做者：一隻圖雀
倉庫：Github
圖雀社區主站（首發）：圖雀社區
博客：掘金、知乎、慕課
公衆號：圖雀社區
聯繫我：關注公衆號後能夠加圖雀醬微信哦
原創不易，❤️點贊+評論+收藏 ❤️三連，鼓勵做者寫出更好的教程。。html

源起

Tim Berners-Lee 於1989年發明了萬維網並於1991年對外發布了世界上第一個網頁瀏覽器 WorldWideWeb，今後拉開了 Web 時代的序幕。前端

1994 年網景公司（Netscape）發佈了 Navigator 瀏覽器 0.9 版本，這是歷史上第一個比較成熟的網絡瀏覽器，轟動一時。react

1995 年，受僱於 Netscape 的 Brendan Eich 用了十天時間設計出了 JavaScript。以後便開啓了瀏覽器兼容和爭奪的至暗時刻，到 1997 年 ECMA 組織開始發佈公開標準，JavaScript 即將進入標準化進程。得益於 ECMA 的標準，JavaScript 愈發的強大，並藉助 Babel 實現了標準制定和瀏覽器實現的兼容，使得咱們能夠寫最現代化的代碼而不用過多的考慮瀏覽器兼容性，而且還誕生 Node.js、React Native 等服務器端、移動端的 JavaScript 運做方式，誰也想不到二十年後的今天 JavaScript 彷佛印證了 Write Once Run Anywhere 的優點，Brendan Eich 做爲 JavaScript 之父，在編程的歷史上留下了他的印記。git

隨着時間的推移，微軟發現外部客戶在開發大規模 JavaScript 應用的過程當中遭遇了語言自己的短板，在 2012 年 10 月，微軟發佈了首個公開版本的TypeScript，2013年6月19日，在經歷了一個預覽版以後微軟正式發佈了正式版TypeScript，當前最新版本爲TypeScript 3.9。程序員

TypeScript 是 JavaScript 的嚴格超集，所以任何 JavaScript 都是合法的 TypeScript（很是像 C 和 Objective-C 的關係）。TypeScript 爲 JavaScript 帶來了強大的類型系統和對 ES2015的支持，它的編譯工具能夠運行在任何服務器和任務系統上。類型系統其實是很是好的文檔，加強了編輯器在 智能提示，跳轉定義，代碼補全 等方向上的功能，而且在編譯階段能發現大部分的錯誤，對於大型工程的代碼可讀性和可維護性起到了了不得的做用。github

TypeScript 的流行趨勢

事實上 TypeScript 擁有活躍的社區，大部分第三方庫都有提供 TypeScript 類型定義文件，甚至知名的前端或後端庫都徹底使用 TypeScript 來進行開發，好比 Google 的 Angular，Nest.js, 還有一些著名的 UI 組件庫，如螞蟻金服的 Ant Design，Google 的 Material Design：typescript

咱們在平時工做中實實在在使用的庫或框架都使用了 TypeScript 構建或正在調研使用中...編程

咱們能夠經過一些數據來了解 TypeScript 的流行趨勢：json

TypeScript 的優點和收益是什麼？

類型系統可在編譯階段發現大部分的錯誤
類型系統也是一個很直觀的編程文檔，能夠查看任何函數或API的輸入輸出類型
類型系統加強了編輯器或IDE的功能
TypeScript 能夠自動的推導類型
一切 JavaScript 都是合法的 TypeScript 下降了使用成本
TypeScript 擁抱 ES2015 以及 ESNext 草案規範
幾乎第三方庫都有 TypeScript 類型定義文件

固然，凡事都有兩面性，TypeScript 有必定的學習成本，好比：Interfaces，Generics，Enums 等前端工程師不是很熟悉的概念，短時間內多少會增長一些開發成本，集成和構建一些庫會有必定的工做量。後端

個人觀察

瞭解到 TypeScript 的優點和流行趨勢以後，相比大部分人都躍躍欲試的想學習這門強大的語言了，可是筆者在學習過程當中發現市面上的 TypeScript 學習資源少之又少，優質且免費的就更加的少了，筆者在學習過程當中主要參考了下面幾個資料：

TypeScript 官方文檔：如今在 A/B 測試 V2 版，以前的 V1 版本寫得比較枯燥，不少人都死在看這個文檔上，可是如今的 V2 層次比較分明，在必定程度上緩解了學習的疲勞，不過僅僅對須要對英文好的同窗比較友好，若是對本身英文比較自信的同窗能夠學習和觀看 V2 版本的文檔。
查閱 React 裏面寫 TypeScript 的一些技巧：typescript-cheatsheets
阮一峯老師推薦的 TypeScript 入門教程，內容比較短小精悍，淺嘗輒止。
DefinitedType 社區的維護者 Basarat 寫得 TypeScript Deep Dive，以及其中文版，這本書很大而全，可是建議用做 TypeScript 查詢手冊，不適合學習。
TypeScript 中文網，可是好久沒更新了（建議不看...）
還有更多...

努力與收穫

看上面的資料學習無疑是痛苦的，因而在通過本身的一番普遍查閱資源和學習實踐以後，但願本身能夠寫一個 TypeScript 實戰入門系列，幫助更多的想學習 TypeScript 可是找不到門路的小夥伴們快速找到入門的法子，所以有了本系列文章：類型即正義：TypeScript 從入門到實踐，它知識凝練而又不失深度，講解 TypeScript 最最最經常使用的知識點，並經過動手作一個 React 待辦事項小應用來串聯講解這些 TypeScript 知識點。目前一共有五篇文章，整個系列文章寫下來一共三萬字有餘，而且收穫了 111 個贊，4845 次閱讀，16條評論，但願這系列實戰入門文章可以幫助你在學習 TypeScript 的路上走得輕鬆些。

加星的代碼倉庫

由於圖雀社區全部的實戰技術教程都是使用圖雀社區自研的開源寫做工具：Tuture 寫做而成，且都是基於一個項目進行寫做的，因此類型即正義：TypeScript 從入門到實踐背後的源碼也是通過驗證的且能夠直接運行的，這也鼓勵了不少讀者去下載源碼，本身跑服務，也所以給倉庫點了 Star，在這裏感謝大家的鼓勵：

倉庫地址：github.com/tuture-dev/…

固然，若是你偏心 Gitee，那麼也能夠找到咱們的源碼：gitee.com/tuture/type…

會總結的人運氣都不會太差

爲了幫助掘友們更好的學習 TypeScript 開發，整理是一種很好的方式，通過掘友的反饋和建議，圖雀社區決定將以前發的文章作一個總結，方便查漏補缺和系統學習，下面會列一個大綱，而後給出對應的摘要，接着給出對應的可視化圖數據，展現此文章收穫的：閱讀、點贊、評論，以及對於的字數，幫助掘友創建一個體系化的同時，還能很方便的瞭解每篇文章的一個概要和數據詳情。

大綱

咱們將在下面放上每篇文章的封面、連接和摘要，供讀者欣賞：

類型即正義：TypeScript 從入門到實踐（序章）：使用 Create-React-App 快速初始化一個 React TypeScript 項目，並使用 Ant Design 組件庫來輔助界面編寫，使用了 antd V4 的黑暗模式。使得咱們能夠專一於學習 TypeScript 的核心知識，並快速實踐運用在 React 項目裏面，而避免一上來就談 tsconfig.json、TypeScript 編譯原理等枯燥、難懂的知識。

類型即正義：TypeScript 從入門到實踐（一）：講解 TypeScript 類型系統，以及枚舉和接口的知識，並完成咱們 React 待辦事項應用的界面和數據準備過程。

類型即正義：TypeScript 從入門到實踐（二）：講解 TypeScript 函數、交叉類型、聯合類型、字面量類型和類型守衛等知識，只講 TypeScript 相比較 JavaScript 的不一樣，並經過 JavaScript 的形式講解 TypeScript，接着咱們使用學到的知識完成 React 待辦事項一些狀態修改，函數觸發，事件處理等功能邏輯。

類型即正義：TypeScript 從入門到實踐（三）：類型別名和類：講解了 TypeScript 中和接口很像的類型別名和類的知識，由表及裏的剖析了 TypeScript 類的獨特之處，並繼續完成 React 待辦事項小應用中一些類型的處理以及類組件的編寫，並引出了泛型的概念。

類型即正義：TypeScript 從入門到實踐（四）：5000字長文帶你從新認識泛型：寫了一整篇文章講解 TypeScript 泛型，也是 TypeScript 類型編程的基礎，並額外講解了如何從零搭建 TypeScript 的開發環境。

字數總覽

文字數據

其中一共寫做字數：3.03 萬字，在各篇分佈以下：

類型即正義：TypeScript 從入門到實踐（序章）：2983 字
類型即正義：TypeScript 從入門到實踐（一）：8412 字
類型即正義：TypeScript 從入門到實踐（二）：6933 字
類型即正義：TypeScript 從入門到實踐（三）：類型別名和類：6919 字
類型即正義：TypeScript 從入門到實踐（四）：5000字長文帶你從新認識泛型：5752 字

圖示數據

圖雀醬的話

第一篇是個小插曲，可是後面幾篇都很均勻，最高的有 8000 呢✌️

閱讀數總覽

文字數據

其中一共收穫閱讀數：4845 次，在各篇分佈以下：

圖示數據

圖雀醬的話

爲啥最重要的泛型，閱讀卻少的可憐🤕，能不能燥起來！

點贊總覽

文字數據

其中一共收穫點贊數：111 贊，在各篇分佈以下：

圖示數據

圖雀醬的話

總體獲贊仍是有點低的，點贊點贊點贊，是我最大的動力😆

評論數總覽

文字數據

其中一共收穫評論數：16 條，在各篇分佈以下：

類型即正義：TypeScript 從入門到實踐（序章）：0 評論
類型即正義：TypeScript 從入門到實踐（一）：2 評論
類型即正義：TypeScript 從入門到實踐（二）：5 評論
類型即正義：TypeScript 從入門到實踐（三）：類型別名和類：9 評論
類型即正義：TypeScript 從入門到實踐（四）：5000字長文帶你從新認識泛型：0 評論

圖示數據

圖雀醬

難道程序員真的是人狠話很少？評論有點少，想聽見你的聲音！

總結與展望

這一系列文章經過實戰的方式呈現了 TypeScript 最最最經常使用的一些知識點，時代在變化， JavaScript 能夠說是目前爲止惟一實現了 Write Once Run Anywhere 的腳本語言，它的熱度和趨勢長久不衰，但 JavaScript 自己也有其語言的缺陷，也許在將來新的標準會慢慢補齊它，至少如今讓咱們用 TypeScript 來解決你可能面臨的問題吧！