一. TypeScript簡介
1. JavaScript痛點
(1). 優秀的JavaScript沒有缺點嗎？
A. 比如ES5以及之前的使用的var關鍵字關於作用域的問題；
B. 比如最初JavaScript設計的數組類型並不是連續的內存空間；
C. 比如直到今天JavaScript也沒有加入類型檢測這一機制；
(2). JavaScript正在慢慢變好
A. 不可否認的是，JavaScript正在慢慢變得越來越好，無論是從底層設計還是應用層面。
B. ES6、7、8等的推出，每次都會讓這門語言更加現代、更加安全、更加方便。
C. 但是直到今天，JavaScript在類型檢測上依然是毫無進展
2. 認識TypeScript
(1). 我們來看一下TypeScript在GitHub和官方上對自己的定義：
A. GitHub說法：TypeScript is a superset of JavaScript that compiles to clean JavaScript output.p
B. TypeScript官網：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
C. 翻譯一下：TypeScript是擁有類型的JavaScript超集，它可以編譯成普通、干凈、完整的JavaScript代碼。
(2). 怎么理解上面的話呢？
A. 我們可以將TypeScript理解成加強版的JavaScript。
B. JavaScript所擁有的特性，TypeScript全部都是支持的，並且它緊隨ECMAScript的標准，所以ES6、ES7、ES8等新語法標准，它都是支持的；
C. 並且在語言層面上，不僅僅增加了類型約束，而且包括一些語法的擴展，比如枚舉類型（Enum）、元組類型（Tuple）等；
D. TypeScript在實現新特性的同時，總是保持和ES標准的同步甚至是領先；
E. 並且TypeScript最終會被編譯成JavaScript代碼，所以你並不需要擔心它的兼容性問題，在編譯時也不需要借助於Babel這樣的工具；
F. 所以，我們可以把TypeScript理解成更加強大的JavaScript，不僅讓JavaScript更加安全，而且給它帶來了諸多好用的好用特性；
3. TypeScript特點
(1).始於JavaScript，歸於JavaScript
A. TypeScript從今天數以百萬計的JavaScript開發者所熟悉的語法和語義開始。使用現有的JavaScript代碼，包括流行的JavaScript庫，並從JavaScript代碼中調用TypeScript代碼；
B. TypeScript可以編譯出純凈、 簡潔的JavaScript代碼，並且可以運行在任何瀏覽器上、Node.js環境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中；
(2). TypeScript是一個強大的工具，用於構建大型項目
A. 類型允許JavaScript開發者在開發JavaScript應用程序時使用高效的開發工具和常用操作比如靜態檢查和代碼重構；
B. 類型是可選的，類型推斷讓一些類型的注釋使你的代碼的靜態驗證有很大的不同。類型讓你定義軟件組件之間的接口和洞察現有JavaScript庫的行為；
(3).擁有先進的 JavaScript
A. TypeScript提供最新的和不斷發展的JavaScript特性，包括那些來自2015年的ECMAScript和未來的提案中的特性，比如異步功能和Decorators，以幫助建立健壯的組件；
B. 這些特性為高可信應用程序開發時是可用的，但是會被編譯成簡潔的ECMAScript3（或更新版本）的JavaScript；
4. TS的編譯環境
(1). 首先要有nodejs環境 【詳見：https://www.cnblogs.com/yaopengfei/p/14478126.html】
(2). 需要在電腦上安裝 TypeScript ，這樣就可以把ts編譯成js運行了。
A. 全局安裝ts 【npm install typescript -g 】
B. 查看ts版本 【tsc --version】
(3). 測試
進入ts文件的目錄，輸入 【tsc ./test1.ts】，會在當前目錄下生成一個轉換好的test1.js文件。
5.TS的兩種運行模式
模式1：
通過webpack，配置本地的TypeScript編譯環境和開啟一個本地服務，可以直接運行在瀏覽器上；
模式2：
通過ts-node庫，為TypeScript的運行提供執行環境
二. TS運行_Webpack
(更加詳細步驟參考：https://mp.weixin.qq.com/s/wnL1l-ERjTDykWM76l4Ajw)
1. 新建一個項目目錄
新建 src/main.ts，作為入口函數
運行指令【npm init -y】，進行初始化項目
2. 安裝ts相關包
【npm install typescript -D】，本地安裝ts
【tsc --init】 生成一個tsconfig.json的配置文件，這里我們不改任何東西。
3. 配置webpack
(1). 基於項目安裝webpack
【npm install webpack webpack-cli webpack-dev-server -D】，然后修改package.json的配置文件：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"serve": "webpack serve"
},
(2). 安裝插件
【npm install ts-loader -D】
【npm install html-webpack-plugin -D】
新建webpack.config.js，配置如下： 入口文件、打包后輸出路徑和文件、別名、ts-loader的使用、html模板的使用
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
entry: "./src/main.ts",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js" },
devServer: {
},
resolve: { extensions: [".ts", ".js", ".cjs", ".json"] },
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
}
4. 測試
(1). 測試直接運行【npm run serve】,訪問：http://localhost:8080
(2). 測試打包 【npm run build】
三. TS運行_ts-node
1. 全局安裝ts-node
【npm install ts-node -g 】
2. 另外ts-node需要依賴 tslib 和 @types/node 兩個包：
【npm install tslib @types/node -g 】
3. 直接使用 ts-node 指令，運行ts代碼
【ts-node ./test2.ts】
!
- 作 者 : Yaopengfei(姚鵬飛)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 聲 明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
- 聲 明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。