從 Javascript 跳到 Typscript 的概念應該要被了解

你真的想學嗎？
認真的！
讓我們開始吧，

以下是需要注意的概念清單：

1.模式種註解

• 基本型：了解string、number、boolean、any、void、undefined、null等之間的差異

• 類型註解：學習如何明確宣告類型（例如，讓age: number = 30;）。

• 類型推斷：TypeScript 可以從上下文推斷類型，但了解何時使用顯式類型以及何時依賴推斷非常重要。

• 聯合型別：型別可以是多種型別的組合（例如，let value: string | number）。

• 文字類型：可以是特定值的類型（例如，讓方向：'左' | '右'；）。

2。介面與型別別名

• 介面：用來定義物件形狀（例如，介面 User { name: string;age: number }）。
• 類型別名：允許您建立自訂類型（例如，類型 ID = 字串 | 數字；）。
• 介面和類型的差異：介面是可擴充的，而型別別名更靈活（可以定義基元、並集、交集等）。

3。泛型

• 泛型函數：可以處理多種類型的函數（例如，函數identity(arg: T): T { return arg; }）。
• 泛型介面/類別：將泛型套用至介面和類別（例如，interface Box { value: T; }）。

4。型態斷言與轉換

• 型別斷言：告訴 TypeScript 你比它更了解這個型別（例如，let value = someValue as string）。
• 非空斷言：使用 !告訴 TypeScript 某個值不為 null 或未定義（例如，someVar!.doSomething()）。

5。結構類型（鴨子類型）
在 TypeScript 中，類型是結構化的，這意味著類型是根據其屬性而不是名稱進行比較的。如果兩個類型具有相同的結構，則它們被視為同一類型。

6。枚舉

• 數字和字串枚舉：允許您定義一組命名常數（例如，枚舉方向 { Up、Down、Left、Right }）。
• 常數列舉：不需要反向映射時更有效的枚舉形式（例如，常數枚舉 Color { Red, Green, Blue }）。

7。型縮小

• 型別保護：使用 typeof、instanceof 或自訂類型謂詞來縮小變數的型別範圍。
• 可區分聯合：將聯合類型與公共屬性（鑑別器）結合以縮小類型範圍（例如，type Circle = { kind: "circle"; radius: number };）。

8。高級類型

• 交叉類型：將多種類型合併為一種（例如，輸入 AdminUser = User & Admin；）。
• 映射類型：允許您轉換類型中的屬性（例如， type ReadOnly = { readonly [P in keyof T]: T[P]; }）。 Utility Types：簡化常見型別轉換的內建類型，例如 Partial、Pick、Omit、Record 等

9。模組與命名空間

• ES 模組：TypeScript 支援 ES6 模組語法（例如匯入/匯出）。了解模組解析以及預設導出和命名導出之間的差異至關重要。
• 命名空間：TypeScript 也有自己的命名空間系統，但通常不鼓勵現代程式碼庫使用 ES 模組。

10。處理 JavaScript 函式庫

• DefinitelyTyped：了解如何為不提供自己類型的 JavaScript 程式庫安裝和使用類型定義（例如，透過 @types/lodash）。
• 聲明第 3 方庫的類型：了解在沒有可用類型時如何為庫或全域物件編寫自訂類型聲明（*.d.ts 檔案）。

11。類別和繼承

• TypeScript 類別：與 JavaScript 類別類似，但具有額外的類型檢查。
• 存取修飾符：public、private、protected關鍵字控制類別成員的可見性。
• 唯讀：將屬性標記為唯讀（例如，唯讀 id: number）。
• 抽象類別與方法：抽象類別不能直接實例化，只能進行子類別化。

12。非同步/等待和 Promise
TypeScript 完全支援 async/await 和 Promises，但新增類型註解可以幫助避免 Promise 或 async function 等類型的問題。

13。裝飾器
實驗功能：裝飾器是一種用於註解或修改類別和類別成員的特殊語法。在 Angular 等框架中很有用，但在 TypeScript 中仍處於實驗階段。

14。嚴格的類型檢查選項

• 嚴格模式：啟用更嚴格的類型檢查選項（例如，strictNullChecks、noImplicitAny）。
• tsconfig.json：了解如何使用此檔案設定 TypeScript 以啟用或停用編譯器選項。

15。 TypeScript 和 JavaScript 互通性

• 使用 JavaScript 程式碼：TypeScript 與 JavaScript 完全相容。您可以逐步將 TypeScript 引入現有的 JavaScript 專案中，並且仍然從 TypeScript 呼叫 JavaScript，反之亦然。
• JSDoc 註解：您可以在 JavaScript 中使用 JSDoc 風格的註解向 TypeScript 提供類型訊息，這在混合 JS/TS 程式碼庫中非常有用。

16。錯誤處理
TypeScript 有助於在編譯時擷取常見錯誤，例如存取 null 或未定義的屬性。了解如何在 TypeScript 中使用 try/catch 以及正確的類型註解非常重要。

17。 TypeScript 配置 (tsconfig.json)

• 編譯器選項：了解如何配置編譯器設置，包括模組解析、嚴格性設定和目標環境。
• 來源映射：設定來源映射以使在瀏覽器或 Node.js 中偵錯 TypeScript 變得更容易。

18。實用函數與型別

• keyof、typeof、instanceof：了解這些實用運算子以及如何使用它們來提取和操作類型。
• 索引簽章：允許您動態定義物件的鍵和值的型別（例如，[key: string]: any）。

19。條件類型
TypeScript 允許根據條件定義類型（例如 type IsString = T extends string ? true : false;）。

20。 TypeScript 版本控制和相容性

• 新功能：保持更新新的 TypeScript 版本，因為它是一種快速發展的語言。模板文字類型、類型謂詞和更嚴格的類型檢查等新功能可以改進您的程式碼。

透過掌握這些 TypeScript 特定的概念，您將能夠利用 TypeScript 的全部功能，包括其靜態型別系統，與純 JavaScript 相比，提高程式碼品質、可維護性和可擴充性。

想了解更多關於我的信息，只需在搜尋引擎上寫sallbro...

以上是從 Javascript 跳到 Typscript 的概念應該要被了解的詳細內容。更多資訊請關注PHP中文網其他相關文章！