介紹

●?百度百科介紹

TypeScript 是微軟開(kāi)發(fā)的一個(gè)開(kāi)源的編程語(yǔ)言，通過(guò)在 JavaScript 的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成. TypeScript 通過(guò) TypeScript編譯器 或 Babel 轉(zhuǎn)譯為 JavaScript 代碼，可運(yùn)行在任何瀏覽器，任何操作系統(tǒng)

●?看了上面的介紹, 還是不太明白 TypeScript 是什么, 來(lái)看下面的例子

例子

○?一段很簡(jiǎn)單的 js 代碼

○?接下來(lái)就調(diào)用一下試試

○?這么簡(jiǎn)單的內(nèi)容, 誰(shuí)不會(huì), 這玩意會(huì)有什么問(wèn)題 ?

○?我們來(lái)思考一下, 假設(shè)這個(gè)函數(shù)你在調(diào)用的時(shí)候

■?你少傳遞了一個(gè)數(shù)字

■?你傳遞了一個(gè)字符串

■?會(huì)不會(huì)出現(xiàn)問(wèn)題呢 ?

○?你可能不禁要問(wèn) : 我為什么要少傳遞一個(gè)數(shù)字, 為什么要傳遞字符串呢 ?

○?可能這個(gè)函數(shù)略顯簡(jiǎn)單了一些

○?那么我們?cè)诳匆粋€(gè)稍微復(fù)雜一些的代碼

這個(gè)代碼封裝的是什么并不重要, 你不用著急仔細(xì)看他

○?接下來(lái)就是調(diào)用了

○?好了, 問(wèn)題出現(xiàn)了, 怎么解決呢 ?

■?我們只能是去讀一讀代碼了, 只要把這個(gè)代碼閱讀明白了, 什么都解決了

TS

●?這個(gè)時(shí)候, TypeScript 就可以排上用場(chǎng)了

●?TypeScript

○?就是在 JS 代碼的基礎(chǔ)上, 給每一個(gè)數(shù)據(jù)添加了一個(gè)數(shù)據(jù)類型限制

○?在開(kāi)發(fā)階段, 可以提示你某個(gè)位置需要一個(gè)什么類型的數(shù)據(jù)

○?在開(kāi)發(fā)階段, 當(dāng)你給出的數(shù)據(jù)類型不對(duì)的時(shí)候, 可以及時(shí)提示你的錯(cuò)誤

○?在開(kāi)發(fā)階段, 你需要給出的數(shù)據(jù)少了或者類型錯(cuò)誤, 會(huì)有提示出現(xiàn)

●?再來(lái)看一個(gè) TS 的例子吧

○?還是一段簡(jiǎn)單的代碼

看不懂沒(méi)關(guān)系, 暫時(shí)不需要你看懂, 別看他, 一會(huì)再說(shuō)

○?接下來(lái)看看調(diào)用的時(shí)候會(huì)出現(xiàn)什么

○?這就是用 TS 寫(xiě)的一段代碼, 我們會(huì)發(fā)現(xiàn), 我都不需要去運(yùn)行代碼, 不需要去查看結(jié)果, 在開(kāi)發(fā)過(guò)程中, 就能通過(guò)編輯器給你提示出錯(cuò)誤

○?那么這樣的話, 我豈不是可以才開(kāi)發(fā)過(guò)程中避免很多錯(cuò)誤, 而且很多時(shí)候我多不需要去特意記一些函數(shù)的參數(shù)類型了, 反正寫(xiě)錯(cuò)了編輯器會(huì)給我提示, 到時(shí)候我再看一下錯(cuò)誤提示不就知道了

百度百科介紹

TypeScript 是微軟開(kāi)發(fā)的一個(gè)開(kāi)源的編程語(yǔ)言，通過(guò)在 JavaScript 的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成. TypeScript 通過(guò) TypeScript編譯器 或 Babel 轉(zhuǎn)譯為 JavaScript 代碼，可運(yùn)行在任何瀏覽器，任何操作系統(tǒng)

初體驗(yàn)

●?說(shuō)了半天, 接下來(lái), 我們就寫(xiě)一段 TS 運(yùn)行起來(lái)試試看

安裝 TS 編譯器

●?瀏覽器是不能直接運(yùn)行 TS 代碼的, 我們需要用工具, 把你寫(xiě)好的 TS 代碼編譯成 JS 代碼, 放在瀏覽器內(nèi)運(yùn)行

●?安裝 TS 編譯器

○?直接使用 npm 安裝全局 ts 工具即可

○?windows

○? MAC

編譯 TS 代碼

●?接下來(lái)書(shū)寫(xiě)一段代碼, TS 代碼寫(xiě)在一個(gè) .ts 后綴的文件內(nèi)

●?打開(kāi)命令行開(kāi)始編譯就好了

○?會(huì)將 index.ts 文件進(jìn)行編譯, 編譯后生成同名 js 文件, index.js

○?這里我們暫時(shí)沒(méi)有寫(xiě) ts 的內(nèi)容, 只是按照 js 的代碼在書(shū)寫(xiě)

●?每次修改原始 ts 文件, 都需要重新編譯一遍, 好麻煩的

●?我們可以使用 --watch 指令來(lái)監(jiān)控文件變化

○?會(huì)實(shí)時(shí)監(jiān)控 index.ts 文件內(nèi)的變化, 只要代碼發(fā)生改變, 會(huì)自動(dòng)進(jìn)行重新編譯

編譯 TS 成功 ? 失敗 ?

●?咱們?cè)诖a內(nèi)加入一點(diǎn) ts 相關(guān)的內(nèi)容, 再來(lái)編譯試試看

○?執(zhí)行編譯, 我們發(fā)現(xiàn)編譯完全沒(méi)有問(wèn)題

●?稍微做出一些修改, 我們?cè)賮?lái)一次

○?依舊是執(zhí)行編譯, 我們會(huì)發(fā)現(xiàn)編譯器報(bào)錯(cuò)了

○?會(huì)告訴我們, 一個(gè) number 類型的參數(shù)不能賦值給 string 類型

○?這我能理解

○?但是仔細(xì)看一下目錄內(nèi)的內(nèi)容, 我發(fā)現(xiàn), 依舊正常編譯了一個(gè) index.js 文件出來(lái)

○?并且里面代碼也是正常的, 沒(méi)有問(wèn)題的

我到底是成功了 ? 還是失敗了呢 ?

●?分析一波

○?這段代碼在 ts 內(nèi)解析的含義是限制了 name 這個(gè)形參的數(shù)據(jù)類型必須是 string 類型

○?主要你傳遞別的類型的數(shù)據(jù), 就會(huì)報(bào)錯(cuò), 但是這個(gè)類型錯(cuò)誤, 也就是 ts 的錯(cuò)誤

○?所以在編譯的過(guò)程中, 會(huì)提示你, 你的類型出現(xiàn)了錯(cuò)誤

但是

○?不管你傳遞的實(shí)參是什么, 編譯后的 js 代碼是這樣的

○?從 js 的角度來(lái)看, 這就是一段合法的代碼

○?所以會(huì)成功編譯出一個(gè) js 文件

總結(jié)

●?當(dāng)你在書(shū)寫(xiě) ts 的時(shí)候, 只要你的語(yǔ)法沒(méi)有錯(cuò)誤, 就會(huì)編譯出一個(gè) js 文件

●?ts 只是在編譯的過(guò)程中, 檢測(cè) 并 提示 你數(shù)據(jù)類型是否出現(xiàn)了錯(cuò)誤

●?JavaScript

○?弱類型腳本語(yǔ)言

○?對(duì)于數(shù)據(jù)類型沒(méi)有任何限制

●?TypeScript

○?在 JS 的基礎(chǔ)上, 加上了類型限制

○?也就是一個(gè)強(qiáng)類型限制腳本語(yǔ)言, 瀏覽器不能識(shí)別, 需要編譯成 js 來(lái)運(yùn)行

●?百度百科介紹

TypeScript 是微軟開(kāi)發(fā)的一個(gè)開(kāi)源的編程語(yǔ)言，通過(guò)在 JavaScript 的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成. TypeScript 通過(guò) TypeScript編譯器 或 Babel 轉(zhuǎn)譯為 JavaScript 代碼，可運(yùn)行在任何瀏覽器，任何操作系統(tǒng)