Typescript 用於具有一個全局文件和單個頁面文件的網站

Question

我先說我以前從未使用過 Typescript，我正在嘗試使用它，因為我真的很喜歡“更嚴格的 JS”的想法。 但是，目前我對它的了解非常有限。

我基本上已經為我的網站構建了自己的函數庫。 通過連接“core/*.js”中的文件構建的“core.js”文件。 這些文件中的每一個都將在全局window.myLib object 上定義屬性。

然后，每個頁面都有自己的 JS 文件來處理該特定頁面的事件。 他們可以從全局window.myLib調用事物。

然后每個頁面都有兩個腳本文件：

<script src="/core.js"></script>
<script src="/js/page_name_here.js"></script>

這很好用。

我正在使用 VSCode 進行開發，並設置了一個“globals.d.ts”文件，其中列出了庫中定義的屬性和函數，這允許 Intellisense 提供非常有用的工具提示和提示。

所以我想通過實際使用 Typescript 並讓tsc編譯我的 JS 文件來“升級”。

第 1 步是編譯庫。 目前這是通過檢查文件修改時間並在必要時通過 PHP-side(,) 完成的。 連接文件並將結果發送到閉包編譯器？ 我相信這就是我在 TS 中應該這樣做的方式——這是正確的嗎？

window.myLib = {}
window.myLib.eventHandlers = require("./core/event-handlers.ts")
window.myLib.AJAX = require("./core/ajax.ts")
// ...

如果不是，那么構建這樣的文件是正確的？

第 2 步是單獨的頁面文件。 我想既然我已經完成了使用庫函數定義“globals.d.ts”的工作，我不需要做任何特別的事情來讓這些文件能夠使用庫函數。 tsc應該能夠閱讀定義並在我提及window.myLib時使用它們。 我對此是否正確，還是我實際上需要以某種方式引用核心文件？

除了這兩個問題之外的任何進一步的指示也將不勝感激。 我非常渴望嘗試一些新的東西（對我來說），但是在“只需編寫 JS，瀏覽器就會解決它”和“你現在正在為編譯器編寫！”之間有一點巨大的飛躍。

Answer 1

至於 'TS ==> JS' 編譯步驟，我強烈建議你看看babel提供了什么。 它通過其插件架構與 TS 編譯器配合得非常好，並且可以集成到大多數（如果不是全部）現代構建工具中，例如webpack 。

警告：設置一個完整的 webpack-with-babel-wih-typescript 項目可能非常耗時且乏味。 您可能會覺得事情變得過於復雜，因為您“只是”想在 TypeScript 中創建一個網站。

不確定您是否更多地將其作為一個學習項目（最終 output 的質量不是主要問題），或者您是否想使用 TypeScript並獲得真正的. 在后一種情況下，我建議看一下流行的前端框架之一。 即使您想擁有完整的 static 站點，它們也提供模塊化解決方案，並提供（或多或少）開箱即用的 TypeScript 體驗。

你可能想看看：

• NuxtJs ，它基於（比反應更容易精簡） Vue.js並且還支持 TypeScript
• Gatsbyjs ， react -相當於 nuxtjs。 我用 TypeScript、eslint+prettier 和一個不錯的 vscode 配置創建了一個啟動器。
• Svelte ，聲稱喜歡 TypeScript並獲得了足夠的炒作，值得認真對待。 可能比學習反應更有趣，但沒有那么成熟。
• 任何其他支持 TS 的流行 web 框架。 有很多。 如果您關心您的工作時間與產出比，您可能不會自己編寫代碼。

這些框架中的每一個處理模塊化略有不同，但對我來說，這一切都歸結為：

• 編寫沒有隱式依賴的小型模塊化函數（例如，不依賴於window object 上的函數。）和單一職責。
• 在組件中任何需要它們的地方導入函數（使用TypeScript 導入語法）
• 讓框架完成 rest，例如編譯、捆綁、代碼拆分……這些困難的事情

TL；DR：如果您想從事（可能）真正的項目，請使用框架。