[求助] TypeScript 的編譯與除錯問題



在影片 0:52 提到 TypeScript 如果需要先做語法轉換為 JavaScript,我想請問有在使用的工程師網友:

1. TypeScript 是不是像早期的 C++ 需要先用編譯器轉換為 C,再用 C Compiler 編譯呢?

2. 承上,這樣會導致無法使用 IDE 除錯原始的 C++ 程式碼,所以後來被 C++ Compiler 取代。你們是如何克服呢?

3. 請問目前有在發展原生支援 TypeScript 的瀏覽器套件與 JIT 嗎?

還請各位不吝賜教,謝謝!
我將電腦方面的心得記錄並分享在 Amigo's Technical Notes
2022-07-31 23:14 發佈
amigotechnotes wrote:
在影片 0:52 提(恕刪)

不太明白轉成C的目的
我沒實際寫過TS
不過 VSCode 可以設定TS的編譯開發環境
TS <-> JS可以互相轉換,像Kotlin<->JAVA一樣
套件裝一裝應該就能用了

-----------------------------------------------------------------
JS -> TS
別人寫的教學,說是套件... 其實是腳本
[TypeScript] 用 ts-migrate 仙女棒讓 JS 專案瞬間 migrate 成 TS
"看起來"似乎是可行的
不過比TS->JS麻煩
amigotechnotes

當 C++ 剛推出來的時候,還沒有許多完整支援 C++ 特性的編譯器,所以有推出 C++ -> C 的轉換器,將 C++ 原始程式碼轉譯為 C,再用 C Compiler 編譯。

2022-08-01 15:07
amigotechnotes

可否請問是哪一個套件可以支援互轉?因為通常是 TypeScript 單向轉換為 JavaScript,要做到雙向轉換,是很困難的。我知道有 .EXE 與 Assembly 雙向互轉的工具。

2022-08-01 15:10
正在寫Typescript ,以下TS為Typescript JS為Javascript

1. TypeScript 是不是像早期的 C++ 需要先用編譯器轉換為 C,再用 C Compiler 編譯呢?

A: C++轉成C是系統底層編譯的行為,Typescript轉成JS 是編譯器在執行前幫你生成JS出來,實際執行的還是JS。

2. 承上,這樣會導致無法使用 IDE 除錯原始的 C++ 程式碼,所以後來被 C++ Compiler 取代。你們是如何克服呢?

A: 正在用Visual Code寫TS,compiler會正常除錯,也能插斷點,也有相關的風格style或eslint可以共同使用。

3. 請問目前有在發展原生支援 TypeScript 的瀏覽器套件與 JIT 嗎?

A: 因為實際執行的還是JS,我想這問題本身應該不成問題0.0


TS 無非就是多一層語法,為了來讓開發者間有強型別的JS可以使用,為了好管理,也為了好閱讀。

希望有幫到你
amigotechnotes

謝謝您的回覆,我對於部份內容有質疑,查閱資料重新學習 AOT, JIT, Compiler, Interpreter, Runtime 等觀念,需要時間消化,明天再逐一回覆!

2022-08-02 23:55
amigotechnotes

讓我們繼續保持互動,嘗試解說總是可以讓我釐清許多觀念,重新體會。

2022-08-02 23:56

1. TypeScript 是不是像早期的 C++ 需要先用編譯器轉換為 C,再用 C Compiler 編譯呢?

KwangSinG: C++轉成C是系統底層編譯的行為,Typescript轉成JS 是編譯器在執行前幫你生成JS出來,實際執行的還是JS。


Amigo: StackExchange - Software Engineering 中 Jörg W Mittag 回覆 Understanding the differences: traditional interpreter, JIT compiler, JIT interpreter and AOT compiler 關於 Compiler 如何運作,與幾個相關名詞:AOT, JIT, Runtime, Interpreter 撰寫的非常詳細,讓我又重新學習一次。在 C 還有針對 header file (.h) 的 Preprocessor。

我提到的 C++ 轉 C 是轉換程式原始碼,emmtrix 的 C++ to C Compiler 就是這樣的工具。

TypeScript 也有類似工具,像是 ExtendsClass 的 TypeScript to JavaScript,將 TypeScript 原始碼轉為 JavaScript,讓沒有辦法直接執行 TypeScript 程式碼的 JavaScript 引擎可以執行。

根據 Faith Musyoka How to use TypeScript with Node.js 的說明,Node.js 無法直接執行 TypeScript,但是在安裝對應的 npm 之後,TypeScript 會被 Compile 成為 JavaScript,就可以在瀏覽器與 Node.js 執行。
我將電腦方面的心得記錄並分享在 Amigo's Technical Notes
2. 承上,這樣會導致無法使用 IDE 除錯原始的 C++ 程式碼,所以後來被 C++ Compiler 取代。你們是如何克服呢?

KwangSinG: 正在用Visual Code寫TS,compiler會正常除錯,也能插斷點,也有相關的風格style或eslint可以共同使用。


Amigo: 因為早期的經驗,C++ 程式碼被 Compile 為 C 之後,是在 C 的 IDE (例如 Turbo C)中繼續完成編譯為 .obj 檔案,與 Link,無法針對 C++ 程式碼設定中斷點。C++ 語法的物件特性也消失,C 當然也沒有相對工具可以查閱 class 的繼承關係與特性。

聽您的敘述,似乎 VisualStudio Code 之內可以直接編輯 TypeScript,透過 Plug-in 編譯為 JavaScript 並且執行。在 VSCode 也可以直接在 TypeScript 原始碼標注中斷點,讓程式執行到此會暫停,並且可以加入 Watch 觀察變數,是嗎?

另外,我看 Robby 在 Getting started with Fresh (New Deno Web Framework) 12:26 觀察 POST 傳遞資料的方式,使用 console.log() 加上 Chrome -> Developer Tools -> Console Tab。用這樣的方式觀察變數也可以,只是要能在 TypeScript 的程式列標示中斷點比較方便。

謝謝您的經驗分享,我今天剛在 chromeOS Flex 啟用 Linux container 與安裝好 vscode for Deb,寫個 TypeScript 小程式試試看!
我將電腦方面的心得記錄並分享在 Amigo's Technical Notes
內文搜尋
X
評分
評分
複製連結
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?