5個實用TypeScript操作符，幫助你提升開發能力！

在這篇文章中，我將向您展示我如何在 TypeScript 中提升自己的技能。我將向您介紹 5 個令人滿意的操作符，這將幫助您更好地理解 TypeScript 和如何使用它。以下是我將要介紹的運算子：

• 非空斷言運算子

• 可選鏈運算子

• #空合併運算子

• 明確型別斷言

• #明確型別轉換

1. 非空斷言運算子

非空斷言運算子是個後置驚嘆號（!），它告訴TypeScript，表達式的值不會是 null 或 undefined。這可以避免因為可能的 null 或 undefined 值而導致的類型錯誤。 【建議學習：javascript影片教學】

範例：

const element: HTMLElement | null = document.getElementById("my-element");
const width: number = element!.offsetWidth;

在這裡，element 可能為 null##我們使用非空斷言運算子告訴TypeScript 我們知道element 的值不是 null

，所以不會有型別錯誤。

2. 可選鏈運算子

選用鏈運算子（?.）允許您在存取物件屬性時不必擔心屬性是否存在。如果屬性不存在，則傳回 undefined

。

範例：

interface Person {
  name: string;
  address?: {
    city: string;
  };
}

const person: Person = {
  name: "John",
};

const city = person.address?.city;

在這裡，address 屬性是可選的，所以我們使用可選鏈運算子來安全地存取 city

屬性，而不會拋出錯誤。

3. 空白合併運算子

空白合併運算子（??）是一種簡潔的方式來提供預設值，當一個表達式的值為 null 或 undefined

 時使用。

範例：

const value: number | null = null;
const defaultValue = 42;

const result = value ?? defaultValue;

在這裡，當 value 為 null 時，result 的值將會是 # defaultValue

。

4. 明確型別斷言

有時，您可能希望將一個型別明確地斷言為另一個型別。您可以使用 30690cee1a11d5dfbdced93b89f678ee 語法或 as Type

 語法來實現這一點。

範例：

const input: unknown = "42";
const value: number = <number>(<string>input).length;

或：

const input: unknown = "42";
const value: number = (input as string).length;

在這裡，我們將 unknown 型別的 input 斷言為 # string，然後將其長度斷言為 number

。

5. 明確型別轉換

在某些情況下，您可能想要將一個值從一種型別轉換為另一種型別。要執行此操作，您可以使用類型的建構函數。

範例：

const value: string = "42";
const numberValue: number = Number(value);

在這裡，我們將 string 類型的 value 轉換為 number 類型的  numberValue

。

了解這些運算元將幫助您更好地理解 TypeScript，並提高您的技能。希望您能善加利用這些運算元來提升您的 TypeScript 程式設計等級！

原文連結：https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312

#更多程式相關知識，請造訪：程式設計教學

！ ！ ###

以上是5個實用TypeScript操作符，幫助你提升開發能力！的詳細內容。更多資訊請關注PHP中文網其他相關文章！