曾經在 TypeScript 中處理多個物件形狀時遇到困難，並希望有一個更類型安全的解決方案嗎？
如果是這樣，你並不孤單。許多開發人員沒有意識到標記聯合（也稱為歧視聯合）在 TypeScript 中提供的全部潛力。這項強大的功能可以增強程式碼的安全性、可讀性和可維護性。在本文中，我們將深入研究標記聯合併探索它們如何提高您的 TypeScript 技能。
標記聯合允許您建立代表幾種可能形狀之一的類型，每個形狀都具有稱為「標記」或「鑑別器」的區別屬性。這使得 TypeScript 能夠縮小條件檢查中的類型範圍，確保您的程式碼明確處理所有可能的情況。
標記聯合透過確保處理所有可能的情況來幫助在編譯時捕獲錯誤。這可以減少運行時錯誤並使您的程式碼更加健壯。
透過明確定義每個案例的形狀，您的程式碼將變得更具可讀性並且更易於維護。未來的開發者（甚至未來的你）會感謝你！
如果您忘記處理可能的情況，TypeScript 可以向您發出警告，確保您的程式碼考慮到所有場景。
考慮一個場景，您有不同的形狀並想要計算它們的面積：
// Define interfaces with a discriminant property 'kind'
interface Circle {
kind: 'circle';
radius: number;
}
interface Rectangle {
kind: 'rectangle';
width: number;
height: number;
}
interface Triangle {
kind: 'triangle';
base: number;
height: number;
}
// Create a union type of all shapes
type Shape = Circle | Rectangle | Triangle;
// Function to calculate the area based on shape kind
function calculateArea(shape: Shape): number {
switch (shape.kind) {
case 'circle':
return Math.PI * shape.radius ** 2;
case 'rectangle':
return shape.width * shape.height;
case 'triangle':
return (shape.base * shape.height) / 2;
default:
// The 'never' type ensures all cases are handled
const _exhaustiveCheck: never = shape;
return _exhaustiveCheck;
}
}
標記聯合在狀態管理場景中非常有用，例如表示非同步操作的各種狀態（例如，資料擷取）。
interface LoadingState {
status: 'loading';
}
interface SuccessState {
status: 'success';
data: string;
}
interface ErrorState {
status: 'error';
error: string;
}
type AppState = LoadingState | SuccessState | ErrorState;
function renderApp(state: AppState) {
switch (state.status) {
case 'loading':
return 'Loading...';
case 'success':
return `Data: ${state.data}`;
case 'error':
return `Error: ${state.error}`;
// default case can be omitted because typescript is making sure all cases are covered!
}
}
清晰的狀態表示：每個介面代表應用程式的不同狀態，使其易於理解和管理。
資料存取的類型安全性：當狀態為「成功」時，TypeScript 知道該狀態具有資料屬性。類似地，當狀態為「錯誤」時，它知道錯誤屬性。這可以防止您意外存取給定狀態下不存在的屬性。
詳盡檢查：如果新增狀態（例如狀態為「empty」的 EmptyState），TypeScript 會提醒您在 renderApp 函數中處理這個新情況。
提高可維護性：隨著應用程式的成長，管理不同的狀態變得更加容易管理。程式碼某一部分的變更會提示其他地方進行必要的更新，從而減少錯誤。
一致的鑑別器：在所有類型中使用相同的屬性名稱（例如類型、種類或狀態）。
文字類型：確保鑑別器屬性使用文字類型（「電子郵件」、「簡訊」等）以實現準確的類型縮小。
避免字串枚舉：對於鑑別器，優先使用字串文字類型而不是枚舉，以保持類型縮小的直接性。
標記聯合是 TypeScript 中的一項強大功能，可以幫助您編寫更安全、更易於維護的程式碼。透過明確處理每種可能的類型，您可以減少意外錯誤的機會並使程式碼更易於理解。
在目前或下一個 TypeScript 專案中嘗試標記聯合體並親身體驗其好處！
以上是TypeScript 標記的組合是 OP的詳細內容。更多資訊請關注PHP中文網其他相關文章！
