先點贊后關注，防止會迷路
寄語：長風破浪會有時，直掛雲帆濟滄海。 本文已收錄至https://github.com/likekk/-Blog歡迎大家star 😄😄😄 ,共同學習，共同進步。如果文章有錯誤的地方，歡迎大家指出。后期將在將github上規划前端學習的路線和資源分享。
前言
親愛的讀者們，大家好，我是楊戩，一個在互聯網前端苟且偷生的划水程序員，本編文章開始將帶你入坑TypeScript。
個人認為TypeScript的前景還是可以的（可以接受反駁），怎么說呢？現在很多的框架已經從JavaScript向TypeScript擁抱了，谷歌也在大力支持TypScript的擴展，谷歌的Angular2.x+就是基於TypeScript，而且Vue3.0也在使用TypeScript進行重構（道聽途說），我也不逼逼那么多了，我們直接開始吧！
TypeScript介紹
介紹的話我就直接引用一些吧！畢竟有些東西肯定比我講的好（擁有一顆謙卑的心），
-
TypeScript 是 JavaScript 的一個超集，支持 ECMAScript 6 標准，TypeScript擴展了JavaScript的語法。
-
TypeScript 由微軟開發的自由和開源的編程語言。
-
TypeScript 設計目標是開發大型應用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運行在任何瀏覽器上
-
谷歌也在大力支持TypScript的擴展，谷歌的angular2.x+就是基於TypeScript
-
最新的Vue、React也可以集成TypeScript
-
Node.js的框架nest.js、midway中用的就是TypeScript的語法
這里我多說一句：TypeScript入門十分簡單，只要你有JavaScript語言的基礎，那么學習TypeScript起來成本是相對較低的，可以不用像學習一門新的語言那樣費勁。
TypeScript語言特性
TypeScript 是一種給 JavaScript 添加特性的語言擴展。在其上擴展的功能有許多，我們一起來看下都擴展了哪些功能。
-
類型批注和編譯時類型檢查 -
類型推斷和類型擦除 -
接口（interface）、枚舉（enum）、Mixin -
泛型編程 （很多編程語言都有） -
名字空間（namespace） -
元組（tuple） -
Await
當然還有一些功能是從ES6移植過來的
-
類（Class） -
模塊（module） -
lambda函數的箭頭語法 -
可選參數和默認參數
簡單說幾點JavaScript和TypeScript的區別
-
TypeScript是JavaScript的超集，擴展了JavaScript的語法，因此現有的JavaScript代碼可與TypeScript 一起工作無需任何修改，TypeScript通過類型注解提供編譯時的靜態類型檢查。 -
TypeScript可處理已有的JavaScript代碼，並只對其中的TypeScript代碼進行編譯
TypeScript的優點VSTypescript的缺點
TypeScript的優點
-
TypeScript增加了代碼的可讀性和可維護性 -
TypeScript非常包容 -
TypeScript擁用活躍的社區
TypeScript的缺點
-
有一定的學習成本，需要理解接口（Interfaces）、泛型（Generics）、類（Classes）、枚舉類型（Enums）等前端工程師可能不是很熟悉的概念 -
短期可能會增加一些開發成本，畢竟要多寫一些類型的定義，不過對於一個需要長期維護的項目，TypeScript 能夠減少其維護成本 -
集成到構建流程需要一些工作量 -
可能和一些庫結合的不是很完美
TypeScript安裝，編譯
首先需要安裝TypeScript，必須有Node.js的環境，關於Node.js的安裝環境推薦大家這一篇博文
Node.js安裝配置教程，寫得非常詳細。
安裝完成之后，我們使用命令行看下是否安裝成功。
node -v 檢查node版本
node.js環境配置成功之后，我們全局安裝一下TypeScript，這里有幾種方法供大家使用，大家選擇自己喜歡的方法就可以了。
-
使用npm命令全局安裝
npm install -g typescript
-
使用cnpm命令安裝
npm install cnpm --registry=https://registry.npm.taobao.org
cnpm install -g typescript
-
使用yarn命令安裝
npm install -g yarn 或者 cnpm install -g yarn
yarn global add typescript
安裝完成之后，我們檢查TypeScript是否安裝成功
檢查命令 tsc -v
如果出現版本信息，那么一般都是安裝成功了，這里就不進行截圖了
開發工具推薦使用 vscode進行開發，vscode也是微軟旗下的產品，使用vscode開發TypeScript，只能用下面那張圖來表達我內心的感受。
當然也還有許多優秀的開發工具，但是我還是首選vscode。
TypeScript的HelloWorld
所有的一切准備好之后，那就開始我們的開發之旅吧！
首先我們新建一個文件夾，創建好文件夾之后我們新建一個.ts為后綴名的文件，目錄結構如下
然后我們在index.ts文件內編寫helloworld代碼
let str:string="Hello World"
console.log(str) TypeScript 轉換為 JavaScript 過程如下圖：
剛開始看到這段代碼的時候瞬間有JavaScript的影子，和JavaScript聲明的變量的代碼差不多，就是指定了類型。比較嚴謹。
由於瀏覽器是無法識別TypeScript的，所以我們需要將TypeScript進行編譯成JavaScript語言，讓瀏覽器可以識別。
tsc index.ts（直接在vscode的控制台執行）
編譯之后的代碼（index.js）：
var str = "Hello World";
console.log(str); 此時編譯成功之后該文件夾會自動生成index.js文件，而這個文件就是index.ts進行編譯之后的文件。然后我們在新建index.html文件，引入編譯之后的inde.js文件。文件目錄如下。
之后運行index.html文件就可以看到輸出結果了。
TypeScript開發工具vscode自動編譯.ts文件
我們想一個這樣的問題，如果每次寫一段代碼都需要自己編譯一下，試想一下工作量有多么大，那么有沒有可能可以實現一邊寫代碼一邊讓它自己進行編譯呢？答案是肯定的。
1、使用vscode的控制台輸入tsc --init命令
tsc --init
此時目錄下會生成一個tsconfig.json文件
找到outDir這是配置項，然后修改自己想要.ts文件通過編譯之后在指定地方生成.js文件的目錄，我這里是同級目錄下js這個文件夾生成.ts編譯之后的文件。
修改之后tsconfig.json文件
接下來看下整個文件的目錄結構
2、配置tsconfig.json文件
-
找到vscode的Terminal選項
-
找到Run task選項
-
選擇typescript選項
-
tsc:watch -tsconfig.json
完成這幾個步驟之后你就可以瘋狂編碼了。
結尾
如果覺得本篇文章對您有用的話，可以麻煩您給筆者點亮那個點贊按鈕。 
對於楊戩這個暖男來說：真的非常有用，您的支持就是我前進的動力，我們下篇文章見。
【原創】|楊戩
原創不易，請勿白嫖。 二郎神楊戩，一個在互聯網前端苟且偷生的划水程序員，專注於前端開發，善於技術分享。 如需轉載，請聯系作者或者保留原文鏈接，微信公眾號搜索二郎神楊戩。
