跟我一起學習 Typescript - 第 2 部分

在上一篇文章中我們學習了 TypeScript 的基礎知識，如果您還沒有閱讀過，請在閱讀本文之前先閱讀。

1- 跟我一起學打字稿 - 1

列舉

枚舉提供了一種定義一組命名常數的方法。預設情況下，枚舉值從 0 開始，但我們可以覆寫它們。

enum Color { Red = "RED", Green = "GREEN", Blue = "BLUE", };

const getColorMessage = (color: Color): string => { 
      return You selected ${color};
 }; 

console.log(getColorMessage(Color.Red));

陣列

TypeScript 中的陣列可讓您定義相同類型元素的集合，您可以將它們視為某種列表，即使在 Python 中也稱為列表類型。

const numbers: number[] = [1, 2, 3, 4];

numbers.push(5);

console.log(numbers);

now if I try to add a string in numbers array typescript will complain

number.push("five") // type string is not assignable to type number

元組

元組是打字稿中的特殊陣列類型，它允許您定義具有固定大小和類型的陣列。元組用於我們確切知道資料形狀的地方，然後透過使用元組，我們將在讀取資料時獲得效能提升。

const user: [number, string] = [1, "Alice"];

console.log(user);

目的

打字稿中的物件可讓您使用類型定義物件的結構。我們可以像這樣輸入對象，更多關於類型別名中的對象主題

const user: { id: number; name: string } = { id: 1, name: "Alice" }; 

console.log(user.name);

類型別名

類型別名可讓您在打字稿中定義自訂類型，以實現更好的程式碼重複使用和可讀性。現在我們可以將物件鍵入為 Type Alias UserType

注意：不要在實際項目中使用像 type 這樣的字。

type UserType = { id: number; name: string; };

const user: UserType = { id: 1, name: "Alice" };

console.log(user.id);

可選屬性

可選屬性可讓您定義可能存在也可能不存在的物件屬性。在我們前面的例子中，如果我們認為使用者只有 id 和 name，則可能存在也可能不存在。我們可以添加？ before : 表示這是一個可選屬性

type UserType = { id: number; name?: string; };

const user: User = { id: 1 };

console.log(user.name ?? "Name not provided");

縮小/類型保護

類型保護可讓您縮小特定程式碼區塊內值的類型。因此，據我們所知，我們的用戶將名稱作為可選屬性，如果我們現在嘗試列印用戶的名稱，它將顯示未定義，我們不想向客戶顯示它，因此我們在顯示之前確保用戶名是一個字符串它

if (typeof user.name == 'undefined') {
   console.log("Welcome", user.name)
}  else {
   console.log("Welcome Guest")
}

好的，大家，在我們的下一篇文章中，我們將開始介紹函數和型別斷言。

丹麥阿里

以上是跟我一起學習 Typescript - 第 2 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！