TypeScript - 環(huán)境搭建與編譯
[TOC]
學(xué)習(xí)目標(biāo)
- 學(xué)會環(huán)境搭建
- 掌握 TypeScript 代碼的編譯與運(yùn)行
TypeScript 環(huán)境搭建
TypeScript 編寫的程序并不能直接通過瀏覽器運(yùn)行，我們需要先通過 TypeScript 編譯器把 TypeScript 代碼編譯成 JavaScript 代碼
TypeScript 的編譯器是基于 Node.js 的，所以我們需要先安裝 Node.js
Node.js 安裝
安裝完成以后，通過 終端或者 cmd 等命令行工具來調(diào)用 node
node -v
通過 NPM 包管理工具安裝 TypeScript 編譯器
http://www.typescriptlang.org/
npm install -g typescript
TypeScript 編譯器 安裝成功以后，會提供一個 tsc 的命令，用于編譯我們的 TypeScript 代碼文件
tsc -v
如果大家對 node 和 npm 等知識點(diǎn)有疑問或者想深入了解的，我們其它課程中有針對它們的更詳細(xì)更深入的內(nèi)容，可以咨詢我們t s的課程顧問進(jìn)行了解
TypeScript 編譯
TypeScript 代碼
let str: string = 'ts';
編譯 TypeScript 代碼
tsc <要編譯的ts文件>
默認(rèn)情況下會在當(dāng)前文件所在目錄下生成同名的 js 文件
編譯選項(xiàng)
編譯命令 tsc 還支持許多編譯選項(xiàng)，我們先來了解其中幾個，后續(xù)我們在具體有需求的時候再去了解更多的。
--outDir
指定編譯文件輸出目錄
tsc --outDir ./dist ./src/HelloTypeScript.ts
--target
指定編譯的代碼版本目標(biāo)，默認(rèn)為 ES3
tsc --outDir ./dist --target ES6 ./src/HelloTypeScript.ts
--watch
在監(jiān)聽模式下運(yùn)行，當(dāng)文件發(fā)生改變的時候自動編譯
tsc --outDir ./dist --target ES6 --watch ./src/HelloTypeScript.ts
通過上面幾個例子，我們基本可以了解 tsc 的使用了，但是大家應(yīng)該也發(fā)現(xiàn)了，如果每次編譯都輸入這么一大堆的選項(xiàng)是真的很繁瑣。
其實(shí)，TypeScript 編譯為我們提供了一個更加強(qiáng)大且方便的方式，編譯配置文件：tsconfig.json，我們可以把上面的編譯選項(xiàng)保存到這個配置文件中
編譯配置文件
{
"compilerOptions": {
"outDir": "./dist",
"target": "ES2015",
"watch": true,
},
"include": ["./src/**/*"]
}
include
指定需要編譯的 ts 文件目錄，如果沒有指定，則默認(rèn)包含當(dāng)前目錄及子目錄下的所有 ts 文件
默認(rèn)配置
tsc 默認(rèn)會從當(dāng)前目錄開始去查找 tsconfig.json 文件，如果沒有找到，會逐級向上搜索父目錄
tsc
指定配置文件
使用 --project 或 -p 也可以指定某個具體的配置文件
tsc -p ./c.json
指定配置文件目錄
使用 -p 指定配置文件所在目錄，tsc 會默認(rèn)加載該目錄下的 tsconfig.json 文件
tsc -p ./src
后面我們還會講到更多的關(guān)于編譯的操作，現(xiàn)在先讓我們看一下上面這個例子，大家可以發(fā)現(xiàn)在我們原先的 ts 文件中有這么一段代碼 : string，而編譯后的 js 文件是沒有的，那么這是什么呢？其實(shí)這個就和我們上面提到的類型系統(tǒng)有關(guān)系了，下面就讓我們來具體看一下類型系統(tǒng)到底是這么回事，它能幫助我們解決什么問題！
除了以上配置，ts 的編譯配置選項(xiàng)還有很多，在后面的學(xué)習(xí)過程中，根據(jù)需要在逐一講解，并且在最后章節(jié)中還會對所有的配置選項(xiàng)進(jìn)行統(tǒng)一總結(jié)
更多編譯選項(xiàng)：
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
http://www.typescriptlang.org/docs/handbook/compiler-options.html
總結(jié)
- 環(huán)境搭建
- 編譯命令與配置
- 配置文件：tsconfig.json
- outDir、target、watch、include、project
