只是您的類型：在 JavaScript 和 TypeScript 上向右滑動

目錄：

• 簡介
• 素描
  • 型檢
  • 功能
  • 團隊合作
• 經驗教訓
• 後續步驟
• 資源

---

介紹

Web 開發有時感覺就像編碼世界的狂野西部。有這麼多的框架和函式庫可供使用，通常會讓人感到不知所措。如果你有這種感覺，我來這裡是想告訴你，你並不孤單；你也有這樣的感覺。當我開始學徒期時，我不知道我想在我的技術堆疊中添加什麼技術。我知道我喜歡前端開發，但不知道該採取什麼途徑來提高我在該領域的技能。因此，當你不確定某件事時，我決定做最好的事：問有更多經驗的人。我諮詢了我的導師，他告訴我 TypeScript 已經迅速成為許多公司開發團隊的寶貴資產。我做了更多研究，發現 TypeScript 非常有吸引力；我是一個注重細節的人，TypeScript 的粒度提供了一種有趣的、新的編碼方式。
我最初的不確定性激發了我寫一個小草圖。我的困境讓我想起了那些你可能在深夜無意中觀看過的約會節目，我決定用它作為我的素描的背景。話不多說，我帶給大家：

全端調情

[播放時髦的介紹音樂]

LUKE L. HOST：歡迎回到「全棧調情」！ Luke L. Host 和另一位開發商一起回來尋找他們的真愛。我們的明星會全心投入製作嗎？或者他們會回滾到單身嗎？讓我們來認識一下我們的程式設計師。

[程式設計師輸入]

妮可：嗨盧克，很高興來到這裡。

主持人：很高興有你！現在，你叫什麼名字？你希望從這裡的小製作中得到什麼？

NICOLE：我是 Nicole，我正在嘗試決定應該將哪種語言添加到我的永久技術堆疊輪調中。今天我帶了兩個追求者； JavaScript，我的舊情人，TypeScript，我突然的追求者。

主持人：聽起來很辣！為什麼我們現在不認識我們的兩種語言？

[輸入語言]

JAVASCRIPT： 大家好。我是 JavaScript。

TYPESCRIPT：我是 TypeScript。

主持人：很高興認識你們兩個！好吧，Nicole，讓我們開始吧。 JavaScript，你已經接觸了一段時間了。是什麼讓您成為 Nicole 技術堆疊的最佳選擇？

JAVASCRIPT：好吧，路克，幾十年來我一直是網路的支柱。我可靠且靈活，而且我的文法非常容易掌握。另外，我有一個龐大的社區——堆疊溢出對我來說將是你最好的朋友。

主持人：令人印象深刻，但我聽說你有一些…包袱？也許是傳統品種？

JAVASCRIPT：嘿現在，我已經現代化了！ ES6 來了，它讓我變得比以往任何時候都更好。

主持人：注意到。現在，TypeScript，是什麼讓你脫穎而出？

TYPESCRIPT： 好吧，Luke，我繼承了 JavaScript 的所有優點並添加了一些結構。我喜歡 JavaScript……但更好。我幫助防止錯誤並使調試變得輕而易舉。像 Nicole 這樣的開發人員應該得到更安全、更可靠的東西。像我這樣的人。

主機：安全可靠－程式設計師耳中的音樂。但有人說你有點……難伺候？

打字稿：一點也不，路克。一旦你了解了我，我就會發現我非常平易近人。如果 Nicole 懂得 JavaScript，那麼向我過渡將是小菜一碟。

主持人：妮可，你已經做出了決定。 JavaScript 帶來了懷舊和簡單，但 TypeScript 提供了我們在愛情和程式碼中都渴望的安全網。您準備好提交了嗎，還是需要更多功能演示？

NICOLE：我想我需要進行更多測試......

主持人： 好吧，讓我們深入探討真正的細節：程式碼相容性！ JavaScript、TypeScript，你已經引起了 Nicole 的注意，但現在是時候展示你最好的功能了。 JavaScript，為什麼不啟動？

JAVASCRIPT：很高興！就我而言，我喜歡保持簡單。這是我宣告變數的方法：

let favoriteFood = "sushi"; 
console.log(favoriteFood); // sushi

沒有類型，沒有多餘的裝飾——只有純粹的、未經過濾的程式碼。休閒又輕鬆。

主持人：毫不費力，但有些人可能會說有點…太隨意了。 TypeScript，你呢？

打字稿：路克，我喜歡我的人際關係有一點清晰。看這個：

let favoriteFood: string = "sushi";  
console.log(favoriteFood); // sushi

看到了嗎？我確保人們不會對 Nicole 使用的資料類型產生混淆。良好的溝通是關鍵。

NICOLE： 嗯，我確實喜歡清晰…JavaScript，如果我嘗試這樣做會發生什麼？

favoriteFood = 42;
console.log(favoriteFood); // 42... wait, what?

JAVASCRIPT：看，我很靈活！誰說 favoriteFood 不能是數字？我就是隨波逐流。

打字稿：這就是我進來的地方，妮可。在你運行程式碼之前我就會發現這個錯誤：

// Error: Type 'number' is not assignable to type 'string'.

看到了嗎？我永遠支持你。

主持人：好了，我們來說說功能吧。 JavaScript，你如何處理它們？

JAVASCRIPT：我喜歡讓事情保持開放。假設 Nicole 想寫一個函數來加兩個數字：

let favoriteFood = "sushi"; 
console.log(favoriteFood); // sushi

如果妮可在裡面塞一條繩子也沒什麼大不了的－我會讓它起作用的！

打字稿：讓它發揮作用嗎？這不完全是一個可持續的基礎。妮可，我相信提前設定期望：

let favoriteFood: string = "sushi";  
console.log(favoriteFood); // sushi

對我來說，無需猜測——您的輸入和輸出一目了然。

NICOLE：哇，你們兩個的做法真的很不一樣。 JavaScript，你的適應力太強了…但是 TypeScript，你就像一個我不知道自己需要的安全網！

主持人： 聽起來我們親愛的開發者有很多事情要考慮！讓我們繼續討論最後一個問題：您的團隊合作方法是什麼？您如何在大型、複雜的關係中工作—例如全端應用程式？

JAVASCRIPT：團隊合作？我在混亂的合作中茁壯成長。我可以在任何地方、與任何人融為一體。這是我使用 Promise 來處理非同步工作：

favoriteFood = 42;
console.log(favoriteFood); // 42... wait, what?

我個性直爽，適應力強。

TYPESCRIPT：當然，但說實話，JavaScript——在大團隊中你可能會變得有點馬虎。我為這種關係帶來了結構和責任：

// Error: Type 'number' is not assignable to type 'string'.

看到了嗎？我確保每個人都清楚知道會發生什麼；沒有驚喜，沒有不必要的戲劇。

主持人：妮可，你已經忙完了這兩個人。您想要 JavaScript 的冒險精神還是 TypeScript 的可靠結構？我想我們會把這個決定留給你——直到下次全棧調情！

[播放時髦的片尾音樂]

---

透過我的探索，我學到了一些關於 TypeScript 的重要課程，我認為這些課程可以幫助其他人加快學習速度：

• 從 JavaScript 基礎開始：先了解 JavaScript 可以讓過渡到 TypeScript 變得更容易。
• TypeScript 是 JavaScript 的補充，而不是取代：將 TypeScript 視為 Web 開發工具箱中的另一個工具。
• 牢記可擴展性：在處理大型專案或團隊中時，TypeScript 的結構透過防止小問題而脫穎而出 避免成為大問題。

正如本草圖結尾所證明的那樣，我自己仍然不確定是否會使用 TypeScript 還是 JavaScript 作為我的主要編碼語言；兩者都有各自的優點和缺點。我想說的是，我對 TypeScript 的興趣很有趣。我將透過建立一個小型專案來繼續學習 TypeScript，以便習慣應用其獨特功能。在創建這個專案時，我將嘗試實現我已經熟悉的技術，例如 Vite 或 React。我還計劃更深入地研究 Next.js 文件並學習如何最好地利用它。

如果您想自己學習 TypeScript，這裡有一些可能對您有用的資源：

• 在 FreeCodeCamp 上學習 TypeScript 指南
• 透過 Mosh 程式設計為初學者提供 TypeScript
• Next.js 文件
• 掌握 Next.js 作者：Lee Robinson

以上是只是您的類型：在 JavaScript 和 TypeScript 上向右滑動的詳細內容。更多資訊請關注PHP中文網其他相關文章！