TypeScript環(huán)境搭建與編譯執(zhí)行

TypeScript 編寫(xiě)的程序并不能直接通過(guò)瀏覽器運(yùn)行，需要先通過(guò) TypeScript 編譯器把代碼編譯成 JavaScript 代碼

TypeScript 的編譯器是基于 Node.js 的，需要先安裝 Node.js

1.安裝Node.js

2.安裝 TypeScript編譯器

npm i -g typescript 
//查看當(dāng)前 tsc 編譯器版本 
tsc -v

3.編寫(xiě)代碼

TypeScript 的文件的后綴為 .ts

//index.ts
let text: string = 'TypeScript'

4.編譯

當(dāng)前目錄下執(zhí)行指令

tsc ./index.ts

默認(rèn)情況下會(huì)在當(dāng)前文件所在目錄下生成同名的 js 文件

//index.js
var text = 'TypeScript';

編譯指令選項(xiàng)

--outDir

指定編譯文件輸出目錄

--target

指定編譯的代碼版本目標(biāo)，默認(rèn)為 ES3

--watch

在監(jiān)聽(tīng)模式下運(yùn)行，當(dāng)文件發(fā)生改變的時(shí)候自動(dòng)編譯

//編譯當(dāng)前路徑文件
tsc ./src/helloKaiKeBa.ts 
//編譯當(dāng)前路徑文件輸出到dist目錄
tsc --outDir ./dist ./src/helloKaiKeBa.ts 
//編譯當(dāng)前路徑文件輸出到dist目錄，js代碼版本為ES6
tsc --outDir ./dist --target ES6 ./src/helloKaiKeBa.ts 
//編譯當(dāng)前路徑文件輸出到dist目錄，js代碼版本為ES6，并開(kāi)啟監(jiān)聽(tīng)模式，后續(xù)在ts文件寫(xiě)代碼會(huì)自動(dòng)編譯。
tsc --outDir ./dist --target ES6 --watch ./src/helloKaiKeBa.ts

編譯配置文件tsconfig.json

把編譯的一些選項(xiàng)保存在一個(gè)指定的 json 文件中，

默認(rèn)情況下 tsc 命令運(yùn)行的時(shí)候會(huì)自動(dòng)去加載運(yùn)行命令所在的目錄下的 tsconfig.json 文件

//tsconfig.json
{
    "compilerOptions": {
        "outDir": "../dist",
        "target": "es5",
        "watch": true
    },
    "include": ["../src/**/*"]
}
//命令行指令
tsc 

也可以使用 --project 或 -p 指定配置文件目錄或某個(gè)具體的配置文件

tsc -p ./configs 
tsc -p ./configs/ts.json

語(yǔ)法轉(zhuǎn)換

TypeScript 在編譯過(guò)程中只會(huì)轉(zhuǎn)換語(yǔ)法（比如擴(kuò)展運(yùn)算符，箭頭函數(shù)等語(yǔ)法進(jìn)行轉(zhuǎn)換，對(duì)于A(yíng)PI 是不會(huì)進(jìn)行轉(zhuǎn)換的（如promise），而是引入一些擴(kuò)展庫(kù)進(jìn)行處理的。

如果我們的代碼中使用了 target 中沒(méi)有的 API ，則需要手動(dòng)進(jìn)行引入，默認(rèn)情況下 TypeScript 會(huì)根據(jù)target 載入核心的類(lèi)型庫(kù)

target 為 es5 時(shí): ["dom", "es5", "scripthost"]

target 為 es6 時(shí): ["dom", "es6", "dom.iterable", "scripthost"]

如果代碼中使用了這些默認(rèn)載入庫(kù)以外的代碼，則可以通過(guò) lib 選項(xiàng)來(lái)進(jìn)行設(shè)置

https://www.typescriptlang.org/tsconfig/#lib

Object.assign({}, {x: 1, y: 'zmouse'}, {z: 2});
//屬性“assign”在類(lèi)型“ObjectConstructor”上不存在。是否需要更改目標(biāo)庫(kù)? 請(qǐng)嘗試將 “l(fā)ib” 編譯器選項(xiàng)更改為“es2015”或更高版本。

//解決方案，配置項(xiàng)里，lib項(xiàng)增加es6庫(kù)

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es6","dom"]//lib項(xiàng)增加es6庫(kù)
    },
    "include": ["./src/**/*"]
}