Typescript Intro
引言
動態一時爽 重構火葬場
先看一個例子: Demo0
而 Javascript 剛好就是一門弱型別語言。
Javascript 是網景公司發明的
Typescript 是由微軟發明的
每一門語言都是由人發明的 人總會犯錯
所以 Typescript 就是為了解決 Javascript 的一些錯誤 或者說認為他不好的地方
比如在編寫 Javascript 程式碼時的智慧補全功能等
Typescript 由微軟開發(微軟擁抱開源)並且開源, Typescript 的官網地址是: typescriptlang.org, 中文映象站: tslang.cn 但建議訪問第一個網址。
因為官網對 Typescript 是這樣描述的:
Typescript is a typed superset of Javascript
中文映象網站是這樣翻譯的:
Typescript 是 Javascript 型別的超集
emmm， 顯然在理解的時候會造成一些偏差
- 官網
- 中文映象站
劃重點:
1. Typescript 是 Javascript 的超集。
2. Typescript 可以被編譯成純 Javascript
複製程式碼可以看到 Typescript 與 React, node, vue, angular 還有 微信都有非常好的相容性
並且你可以非常好的將你的 Javascript 專案移植到 Typescript 上
總結:
1. Typescript 是帶型別的 Javascript
2. Typescript 可以編譯成純 Javascript
3. Typescript 對各種框架支援性非常友好
複製程式碼但是, 以上都是官網的一面之詞，究竟事實如何， 我們今天探討一下兩個方面:
1. Typescript 能否解決一些 Javascript 弱型別所帶來的問題
2. Vue 與 Typescript 的配合 到底香不香
複製程式碼起手式:
-
配置淘寶源
npm config set registry https://registry.npm.taobao.org/ (公司網路下可以選擇不配置) npm config delete registry (撤銷配置的淘寶源) 複製程式碼 -
安裝 nodejs
-
安裝 typescript
- typescript@3.3.3
npm i typescript -g // typescript (yarn global add typescript) // C:\Users\wanghongkun\AppData\Roaming\npm\tsserver // C:\Users\wanghongkun\AppData\Roaming\npm\tsc-> C:\Users\wanghongkun\AppData\Roaming\npm\node_modules\typescript\bin\tsc 複製程式碼 - ts-node
npm install ts-node@7.0.0 -g // 讓 node 支援 Typescript // 因為 node 沒辦法直接執行 Typescript //C:\Users\wanghongkun\AppData\Roaming\npm\ts-node -> C:\Users\wanghongkun\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js 複製程式碼-
做一個測試
- 編寫 greeter.ts
- node greeter.ts
- npm i typescript
- node greeter.ts
- npm i ts-node
- node greeter.ts
-
為什麼要提供 tsc
- 瀏覽器 不能執行 Typescript
- 瀏覽器 可以直接執行 Javascript
- 所以我需要將 Typescript 變成 Javascript 才可以在瀏覽器中執行
-
tsc demo1
-
那麼我們現在執行 ts 的過程就是先 tsc 再 node, 能不能點一下就執行呢？
- typescript@3.3.3
-
配置除錯環境
- debug demo0 js
- 複製 demo0 資料夾 將 ts 改為 js debug
- 新開一個目錄執行
npm init -y npm i -D ts-node typescript 複製程式碼- 建立 tsdemo/.vscode/launch.json 檔案，內容如下
{ "configurations": [ { "name": "ts-node", "type": "node", "request": "launch", "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js", "args": [ "${relativeFile}" ], "cwd": "${workspaceRoot}", "protocol": "inspector" } ] } 複製程式碼
目前: 1. 我們可以編寫 ts, 並可以使用 tsc 將 Typescript 編譯成為 Javascript 2. 我們經過配置可以使用 vscode 的 debug 功能對 ts 檔案進行一鍵 debug
通過一個官網 5min 來看 Typescript 的使用 / 以及是否解決了 JavaScript 的不足
- Demo2
- ts 檔案裡面的程式碼 完全就是 Javascript
- 其實這個例子就是做了我們之前的功能, 演示 ts 可以轉成 js
- 你直接在 ts 裡面寫 js 也不會有什麼問題, 畢竟是超集嘛
- Demo3
- 所以在第一個例子上新增一些 javascript 不支援的功能
- 首先 我們強制規定 person 必須是一個字串
- 加完之後 還是 JavaScript 嘛？ 顯然不是了, 因為 Js 不支援這種語法。
- 然後 tsc 這個檔案 發現編譯出來的東西沒有什麼不一樣
- 我們目前是把一個 不是ts 的東西 變得 ts一點了 加了型別
- 然後我們做一下死
let user = {姓: 'gua', 名: 'kun'} 複製程式碼- vscode 會提示
- tsc 會報錯
- 我們來想，假如沒有 Typescript 我們要怎麼解決我只能傳 string 的問題
if (typeof person !== 'string') { throw new Error('person 必須是一個字串') } 複製程式碼- 而這樣的寫法 只有在執行到這一行的時候才會發現這個錯誤
- Typescript 則會在編譯的時候就會告訴你這個錯誤
- 能在編譯時發現的錯誤不要留到執行時(使用者感知的到)發現
- 變數加了 String 型別之後 只能傳 string 和 undefinded
- 那麼我們如何讓 person 接受 一個物件吶
- 宣告介面(interface)
- Demo4
- 介面裡的屬性 可以多 不能少
- 可以多傳 但沒法呼叫
- typescript 真的十分嚴格
- 類
- Demo5
- 為什麼會有類
- 因為介面不支援函式呀
- 解釋一下 public
firstName: string middleInitial: string lastName: string constructor(firstName, middleInitial, lastName) { this.firstName = firstName this.middleInitial = middleInitial this.lastName = lastName this.全名 = firstName + " " + middleInitial + " " + lastName; } 複製程式碼
第一個問題總結:
1. Typescript 可以解決 javascript 是一門弱型別語言帶來的問題 因為：
複製程式碼Typescript x Vue 香嘛
1. 能不能用 能用
- vue-cli@3 提供了 typescript 選項可以一鍵搭建可以使用可以使用 Typescript 開發的專案
- 演示
- 好不好用 還沒那麼好用
- 那為啥還是要學
2. 目前 vue + typescript 不香
複製程式碼3. 會香的
複製程式碼不管怎麼說, 學習 typescript 的時候到了。
參考資料:
Todo
可以考慮把每個例子的程式碼粘過來