TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 9、《TypeScript》

1、前言

在實際業務開發中，會遇到這樣一種需求，使用VUE的頁面須要支持SEO，同時對首屏有指標性要求，目前市面上廣泛使用的是Nuxt.js解決方案，在引入的同時還須要考慮與現有的全棧工程結合，本系列文章探討的是此類全棧工程的解決方案，同時使用的是TypeScript應用於先後端編程，文章中介紹的工程與技術要點源碼已上傳至Github，有須要的朋友可自行下載：
Nuxt.js和Nest.js同構工程

複製代碼

文章意在拋磚引玉，先後端使用同一種語言TypeScript編寫，示例已包含基本接口請求，數據庫鏈接應用，公用模塊封裝等實際開發中使用到的內容。

效果預覽:

如下爲該系列文章入口列表:
TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 1、《簡介》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 2、《框架融合》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 3、《配置服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 4、《UI系統》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 5、《API服務設計》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 6、《SEO功能實現》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 7、《Vuex使用》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 9、《TypeScript》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 10、《工程化部署》

2、引入TypeScript意義

• 智能提錯
  開發過程當中對對像是否存在某一屬性動態檢測並提示。

  

• 類型推斷
  最明顯示的例子是避免JS中數字與字符串類型相加，互相賦值狀況，在TypeScript中會進行賦值類型推斷

  

  

• 靜態輸入
  靜態類型化在開發人員編寫腳本時檢測錯誤。查找並修復錯誤，容許開發人員編寫更健壯的代碼並對其進行維護，以便使得代碼質量更好、更清晰。

• 大型的開發項目
  有時爲了改進開發項目，須要對代碼庫進行小的增量更改。這些小小的變化可能會產生嚴重的、意想不到的後果，所以有必要撤銷這些變化。使用TypeScript工具來進行重構更變的容易、快捷。

3. 更好的協做
   當發開大型項目時，會有許多開發人員，此時亂碼和錯誤的機也會增長。類型安全是一種在編碼期間檢測錯誤的功能，而不是在編譯項目時檢測錯誤。這爲開發團隊建立了一個更高效的編碼和調試過程。

4. 更強的生產力
   乾淨的 ECMAScript 6 代碼，自動完成和動態輸入等因素有助於提升開發人員的工做效率。這些功能也有助於編譯器建立優化的代碼。

3、實際開發中使用示例

• 類
  與ES6同樣，使用class關鍵字，能夠繼承，而且能夠實現接口。

  

• 接口
  TypeScript裏，接口的做用就是爲這些類型命名和爲代碼或第三方代碼定義契約

  

• 繼承
  類繼承體現自單繼承，但有個例外，接口支持多繼承。

  

• 多態
  多態定義接口的多種不一樣的實現方式,容許將子類類型的指針賦值給父類類型的指針。

  

  

  

• 強類型定義
  對類成員屬性、方法。變量常量定義等進行類型聲明

  

• 基礎類型
  

類型	描述	示例
布爾	true/false值	let isDone: boolean = false;
數字	浮點數,除了支持十進制和十六進制字面量，還支持ECMAScript 2015中引入的二進制和八進制字面量。	let decLiteral: number = 6;
字符串	使用 string表示文本數據類型。 使用雙引號（ "）或單引號（'）表示字符串。	let name: string = "bob";
數組	表示由此類型元素組成的一個數組	let list: Array = [1, 2, 3];
無組Tuple	元組類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同。	let x: [string, number];
枚舉	enum類型是對JavaScript標準數據類型的一個補充。 像C#等其它語言同樣，使用枚舉類型能夠爲一組數值賦予友好的名字。	enum Color {Red, Green, Blue}
Any	爲那些在編程階段還不清楚類型的變量指定一個類型,跳過編譯器類型檢查	let notSure: any = 4;
Void	void類型像是與any類型相反，它表示沒有任何類型。	function warnUser(): void { .. }
Null、Undefined	undefined和null二者各自有本身的類型分別叫作undefined和null。 和 void類似，它們的自己的類型用處不是很大：	let u: undefined = undefined;
Never	never類型表示的是那些永不存在的值的類型。	function error(message: string): never { .. }
Object	object表示非原始類型，也就是除number，string，boolean，symbol，null或undefined以外的類型。	declare function create(o: object

• 枚舉類型
  使用枚舉咱們能夠定義一些帶名字的常量。 使用枚舉能夠清晰地表達意圖或建立一組有區別的用例。 TypeScript支持數字的和基於字符串的枚舉。

枚舉類型	舉例
數字枚舉	enum Direction {Up = 1}
字符串枚舉	enum News {First = 'hot'}
異構枚舉	enum BooleanLikeHeterogeneousEnum { No = 0, Yes = "YES"}

• 函數、訪問控制符
  函數是JavaScript應用程序的基礎。 它幫助咱們實現抽象層，模擬類，信息隱藏和模塊。 在TypeScript裏，雖然已經支持類，命名空間和模塊，但函數仍然是主要的定義 行爲的地方。 TypeScript爲JavaScript函數添加了額外的功能，讓咱們能夠更容易地使用。
  
  和JavaScript同樣，TypeScript函數能夠建立有名字的函數和匿名函數。 咱們能夠隨意選擇適合應用程序的方式，不管是定義一系列API函數仍是隻使用一次的函數。

  

訪問控制符	說明	示例
public(默認))	公有，能夠在任何地方被訪問。	public async getList(): Promise { .. }
protecte	受保護，能夠被其自身以及其子類和父類訪問。	protected async getList(): Promise { .. }
private	私有，只能被其定義所在的類訪問。	private async getList(): Promise { .. }

• 泛型 像C#和Java這樣的語言中，可使用泛型來建立可重用的組件，一個組件能夠支持多種類型的數據。 這樣用戶就能夠以本身的數據類型來使用組件。

  

• 模塊
  從ECMAScript 2015開始，JavaScript引入了模塊的概念。TypeScript也沿用這個概念。
  
  模塊在其自身的做用域裏執行，而不是在全局做用域裏；這意味着定義在一個模塊裏的變量，函數，類等等在模塊外部是不可見的，除非明確地使用export形式之一導出它們。 相反，若是想使用其它模塊導出的變量，函數，類，接口等的時候，必需要導入它們，可使用 import形式之一。
  
  模塊是自聲明的；兩個模塊之間的關係是經過在文件級別上使用imports和exports創建的。 模塊使用模塊加載器去導入其它的模塊。 在運行時，模塊加載器的做用是在執行此模塊代碼前去查找並執行這個模塊的全部依賴。 你們最熟知的JavaScript模塊加載器是服務於Node.js的 CommonJS和服務於Web應用的Require.js。
  
  TypeScript與ECMAScript 2015同樣，任何包含頂級import或者export的文件都被當成一個模塊。相反地，若是一個文件不帶有頂級的import或者export聲明，那麼它的內容被視爲全局可見的（所以對模塊也是可見的）。
  1.導出

  

  

  2.導入

  

• tsconfig.json
  1.概述
  若是一個目錄下存在一個tsconfig.json文件，那麼它意味着這個目錄是TypeScript項目的根目錄。 tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。 一個項目能夠經過如下方式之一來編譯：
  
  使用tsconfig.json
  不帶任何輸入文件的狀況下調用tsc，編譯器會從當前目錄開始去查找tsconfig.json文件，逐級向上搜索父目錄。 不帶任何輸入文件的狀況下調用tsc，且使用命令行參數--project（或-p）指定一個包含tsconfig.json文件的目錄。 當命令行上指定了輸入文件時，tsconfig.json文件會被忽略

  

• tslint
  TSLint是硅谷企業Palantir的一個項目，它是一款能夠檢查TypeScript代碼可讀性、可維護性以及功能性錯誤的靜態檢查工具，當前許多編輯器（Editors）和構建系統（Build Systems）支持這一工具，同時支持自定義編寫Lint規則、配置、格式化等。
  
  當前TSLint已經包含了上百條規則，這些規則構築了當前TSLint檢查的基礎。在代碼開發階段中，經過這些配置好的規則能夠給工程一個完整的檢查，並隨時能夠提示出可能存在的問題。
  
  參考: React Native工程中TSLint靜態檢查工具的探索之路
  在本示例中，tslint,繼承自騰訊alloy團隊默認配置，在其基礎上進行鍼對性的改造，基本配置以下:
  

  

  主要增長了強方法類型聲明，訪問控制符聲明等團隊統必定約束。

4、優點

TypeScript 可使用 JavaScript 中的全部代碼和編碼概念，TypeScript 是爲了使 JavaScript 的開發變得更加容易而建立的。
例如，TypeScript 使用類型和接口等概念來描述正在使用的數據，這使開發人員可以快速檢測錯誤並調試應用程序。

• TypeScript 從核心語言方面和類概念的模塑方面對 JavaScript 對象模型進行擴展。
• JavaScript 代碼能夠在無需任何修改的狀況下與 TypeScript 一同工做，同時可使用編譯器將 TypeScript 代碼轉換爲 JavaScript。
• TypeScript 經過類型註解提供編譯時的靜態類型檢查。
• TypeScript 中的數據要求帶有明確的類型，JavaScript不要求。
• TypeScript 爲函數提供了缺省參數值。
• TypeScript 引入了 JavaScript 中沒有的「類」概念。
• TypeScript 中引入了模塊的概念，能夠把聲明、數據、函數和類封裝在模塊中。

Typescript相對於ES系列有如下改善：

• 類型
• 類
• 註解
• 模塊導入
• 語言工具包（好比，結構）
• Typescript相對於ES6,TypeScript最大的改善是增長了類型系統。

總結: TypeScript 的價值並不在於編寫更少的代碼，其價值在於編寫更加安全的代碼。從長遠看來，它能幫助咱們利用其工具識別問題並自動填充參數、屬性、函數以及更多東西（一般被成爲自動補全和智能感知），從而更有效率的編寫出代碼。