寫給Java程序員的TypeScript入門教程（一）

0 前言

最近幾年，TypeScript愈來愈多的出如今各類技術分享博客上，愈來愈多的前端框架也提供了對TypeScript的支持，好比大名鼎鼎的Angular2就選擇了TypeScript做爲開發語言。若是你沒聽過TypeScript，那必定聽過JavaScript。實際上，TypeScript是JS的一個超集，它能夠兼容JS的語法，並能夠編譯成純JS。

TypeScript是微軟開發並開源的一種編程語言，主要設計應用於大型應用上。以前，JS在開發大型應用時爲人所詬病的一點就是代碼結構和模塊劃分的混亂，而TypeScript的出現則彌補了這個缺陷。TypeScript擴展了JS的語法，新增了諸如接口、類、模塊、註解等面向對象的特性，使其在代碼結構和模塊劃分上更加清晰，代碼可讀性更好。所以也有人說，「TypeScript讓JavaScript又變成了Java」。TypeScript即提供了靜態語言強類型支持，同時也兼容動態語言弱類型的語法，所以在學習TypeScript的過程當中會發現TypeScript和Java仍是有蠻大的區別的。

目前爲止，筆者平時開發工做中用的最多的是Java，對於TypeScript也是很陌生，甚至JavaScript以前都不多用過。所以，本教程也是筆者在學習TypeScript過程當中的總結。學習一門語言，首先看的應該是其官方文檔，TypeScript也不例外，官方文檔把TypeScript從基本類型到高級用法都介紹了一遍，內容很充實。不過我的感受仍是稍微枯燥了些，並且看完以後沒有實踐過感受很虛。筆者認爲，官方文檔更適合做爲一個手冊，遇到不懂時去翻一下。入門教程而言，更適合結合一個小項目一邊學習一邊實踐，因而就有了本教程。

本教程將會結合一個簡單的小項目，在實踐中教學，旨在讓你們對TypeScript中一些常常用到的知識有一個初步的認識，達到入門的目的。本教程主要面向Java開發者，所以在教程中介紹TypeScript的一些特性時會與Java作一些比對。本教程的將會結合一個簡單的雲服務結算系統項目，在開發的過程當中，介紹TypeScript相關知識特性。對於Java開發者而言，Spring應該是一個很經常使用到的開發框架。本教程在開發結算系統時，選用了Nest.js做爲開發框架，它個用於構建高效，可擴展的Node.js服務器端應用程序的框架。同時，它也是一個Spring風格的框架，支持依賴注入、面向切面編程等。所以，Java開發者在學習本教程時，會有很深的親切感，從必定程度上平緩了學習曲線。

本教程教學項目的代碼都放在了github項目: typescript-tutorial-for-java-coder

下面，咱們一塊兒來進入TypeScript的世界。

1 開發環境搭建

TypeScript是平臺無關的語言，使用Linux或Windows均可以進行開發，筆者的開發系統爲Mac OS。目前，TypeScript的主流開發編輯器/IDE爲VS Code和WebStorm，前者是開源免費，海量插件支持；後者則屬於JetBrains全家桶之一（Java開發者應該很熟悉），功能強大，但須要收費。VS Code和WebStorm孰好孰壞見仁見智，做爲一個Java開發者，平時開發所用的E就是JetBrains全家桶之一的IntelliJ IDEA，對JetBrains的風格比較熟悉，所以本次教程使用WebStorm進行開發。

1.1 TypeScript安裝

TypeScript的安裝途徑有兩個，一是經過npm（Node.js包管理器）安裝，另外一個是經過VS Code的TypeScript插件進行安裝，本教程選用前者。在終端上運行以下命令便可完成安裝：

npm install -g typescript
複製代碼

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-od2KPWwo-1573489473459)(安裝ts.png)]

1.2 Nest.js安裝&初始化

爲了讓Java開發者更有親切感，本教程選擇Nest.js這個號稱Node.js界的Spring框架做爲咱們雲服務結算系統的開發框架，所以還須要安裝Nest.js。

咱們先安裝好Nest CLI工具，而後在經過其初始化Nest.js工程。Nest CLI是一個命令行界面工具，可幫助咱們初始化和開發應用程序。一樣經過npm安裝，在終端上運行以下命令：

npm i -g @nestjs/cli
複製代碼

下一步就是使用Nest CLI初始化咱們的項目工程，在終端中運行以下命令，便可將項目工程初始化在當前的目錄下。

nest new learn-nest
複製代碼

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eAKyZRIP-1573489473459)(安裝nest.png)]

能夠把npm類比爲Java世界中的Maven，在Java世界裏，若是須要使用新的庫/框架，首先在Maven的pom文件中添加對應的依賴，Maven就會自動把庫/框架引入到工程裏。同理，若是在TypeScript中須要使用新的庫/框架，首先經過npm安裝，後面工程就能夠正常使用新的庫/框架了。

1.3 初始工程目錄結構

使用WebStorm打開剛剛咱們建立的Nest初始化工程，能夠看到其目錄結構以下：

其中node_modules是是項目的依賴模塊安裝目錄，package.json文件中dependencies、devDependencies全部依賴的模塊，在npm install後都會安裝在此目錄；src目錄存放工程源代碼；test目錄存放單元測試代碼；package\*.json文件爲整個工程的配置文件；tsconfig\*.json是TypeScript的編譯配置文件；tslint.json則是TypeScript的書寫規範（TSLint）配置文件。

咱們主要看一下tsconfig.json這個配置文件，其餘的後面涉及到再進行講解。tsconfig.json文件到內容以下：

{
  "compilerOptions": {
    "module": "commonjs",                 // 指定使用模塊: 'commonjs'
    "declaration": true,                  // 生成相應的 '.d.ts' 文件
    "removeComments": true,               // 刪除編譯後的全部的註釋
    "emitDecoratorMetadata": true,        // 爲裝飾器提供元數據的支持
    "experimentalDecorators": true,       // 啓用裝飾器
    "target": "es2017",                   // 指定 ECMAScript 目標版本
    "sourceMap": true,                    // 生成相應的 '.map' 文件
    "outDir": "./dist",                   // 指定輸出目錄
    "baseUrl": "./",                      // 用於解析非相對模塊名稱的基目錄
    "incremental": true                   // 支持增量構建
  },
  "exclude": ["node_modules", "dist"]
}

複製代碼

做爲初學者，沒必要記住這些編譯配置參數，後續若是用到再回來查看效果會更好。

1.4 WebStorm配置

在開發的過程當中，少不了對程序進行調試，WebStorm提供了強大的開發調試功能。下面咱們對WebStorm進行一些簡單的配置，而後在WebStorm中運行工程。

點擊左上角+ -> 選擇npm -> 在右側的Command處選擇run -> 在右側Scripts處選擇start -> OK

點擊右上角的綠色三角按鈕，運行程序，看到下方出現日誌，說明程序已經正常運行

在瀏覽器輸入 http://localhost:3000 ，即可看到 Hello World！

2 雲服務結算系統簡介

本教程經過一個簡單的雲服務結算系統，在實踐中介紹TypeScript的各類特性。大部分人都應該據說過雲服務，估計很多人已經在各大雲服務廠商（如阿里雲、騰訊雲、華爲雲、AWS）買過服務。最多見的當屬ECS雲服務器，用戶再購買雲服務器後，就可使用其功能，好比在上面搭建我的博客等。本教程的雲服務結算系統主要模擬等功能是，用戶開戶和購買雲服務、雲平臺進行費用結算這兩個簡單的功能。

2.1 系統用例圖

用戶開戶和購買雲服務用例圖

本系統中，用戶開戶的流程被簡化成只需填寫用戶信息便可，而購買雲服務流程被簡化成兩個選擇雲服務和選擇結算策略。其中本系統的結算策略只涉及到兩個最多見兩種策略，按需計費和包年包月。

實際上，用戶開戶不只僅是填寫用戶信息，還涉及到實名認證等流程；一樣，結算策略也不只僅是按需計費和包年包月兩種，還有分檔計費等等。

雲平臺結算用例圖

本系統中只考慮月度結算等場景，而結算流程分爲統計資源使用量，而後根據用戶對資源的使用量進行結算兩步。

2.2 系統模塊劃分

本系統在進行模塊劃分時，採用了**領域驅動設計(DDD)**經典的分層結構。

整個系統分爲四個層次：

• domain 領域層，主要包含與開戶、購買雲服務、結算等業務邏輯相關的代碼
• service 服務層，主要是將領域層的各類業務邏輯，組合成一個完整的業務流程
• interface 接口層，主要包含系統的對外接口，如提供給用戶進行開戶的接口
• infrastructure 基礎設施層，主要包含一些基礎的服務，如與數據庫的交互

3 總結

本文是《寫給Java程序員的TypeScript入門教程》系列的第一篇，主要介紹了TypeScript的相關背景、開發環境的搭建以及本教程所用到的雲服務結算系統。更多深刻的內容，請關注後續的篇章。

關注【元閏子的邀請】微信公衆號，瞭解更多精彩內容⬇️