TypeScript是現代 JavaScript 開發的強大動力，帶來了type safety和進階功能。
雖然許多開發人員都了解基礎知識，但還有一些隱藏的精華和實用技巧可以讓您的程式碼更有效率、更乾淨和可維護。
讓我們透過範例和實用方法深入了解每個開發人員都應該了解的20 個 TypeScript 技巧！ 💻
1.不可空型 ( NonNullable ) ❌
TypeScript 提供了NonNullable實用程式來消除類型中的null和undefined 。這可以幫助您避免意外的空值。
type User = { name: string; age?: number | null };
const user: NonNullable<User["age"]> = 30; // ✅ No null or undefined allowed2.使用Partial來提高靈活性🔧
Partial<T>公用程式可讓類型中的所有屬性都是可選的，這在您僅更新物件欄位的子集時非常有用。
interface User {
name: string;
age: number;
email: string;
}
const updateUser = (user: Partial<User>) => {
// You can pass only the fields you want to update
return { ...user, updatedAt: new Date() };
};
updateUser({ name: 'John' }); // No need to provide the entire object3.利用Readonly來取得不可變資料🔒
當您需要 TypeScript 中的不可變性時， Readonly<T>會使類型的所有屬性不可變，從而防止重新指派。
const config: Readonly<{ apiUrl: string; retries: number }> = {
apiUrl: 'https://api.example.com',
retries: 5
};
config.apiUrl = 'https://newapi.com'; // ❌ Error: Cannot assign to 'apiUrl' because it is a read-only property4.動態屬性類型的對應類型🛠️
映射類型可讓您透過轉換現有類型來建立新類型。這對於建立物件類型的變體非常方便。
type Status = 'loading' | 'success' | 'error';
type ApiResponse<T> = {
[K in Status]: T;
};
const response: ApiResponse<string> = {
loading: 'Fetching...',
success: 'Data loaded',
error: 'Something went wrong'
};5.具有可選元素的元組類型🔢
您知道 TypeScript 允許在元組中使用可選元素嗎？這在處理可變參數函數參數時非常有用。
type UserTuple = [string, number?, boolean?];
const user1: UserTuple = ['Alice']; // ✅ Just the name
const user2: UserTuple = ['Bob', 30]; // ✅ Name and age
const user3: UserTuple = ['Charlie', 25, true]; // ✅ Full tuple6.具有詳盡檢查的聯合型別🔍
確保您使用聯合類型處理所有可能的情況並在 switch 語句中進行詳盡的檢查。
type Status = 'open' | 'closed' | 'pending';
function handleStatus(status: Status) {
switch (status) {
case 'open':
return 'Opened';
case 'closed':
return 'Closed';
case 'pending':
return 'Pending';
default:
const exhaustiveCheck: never = status; // ❌ Error if a new status type is added but not handled
return exhaustiveCheck;
}
}7.實用程式類型Omit以排除鍵🗑️
有時您需要建立排除某些鍵的物件類型。 Omit是你的朋友！
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Omit<Todo, 'description'>;
const todo: TodoPreview = {
title: 'Learn TypeScript',
completed: false
};8.使用in和instanceof進行類型縮小🕵️
使用in和instanceof在執行時縮小類型範圍。
function processInput(input: string | number | { title: string }) {
if (typeof input === 'string') {
return input.toUpperCase(); // Narrowed to string
} else if (typeof input === 'number') {
return input * 2; // Narrowed to number
} else if ('title' in input) {
return input.title; // Narrowed to object with title property
}
}9.高階類型邏輯的條件類型🔄
條件類型為您提供了基於條件轉換類型的令人難以置信的靈活性。
type IsString<T> = T extends string ? true : false;
type CheckString = IsString<'Hello'>; // true
type CheckNumber = IsString<42>; // false10.用作不可變文字類型的as const 📜
as const非常適合凍結值並確保 TypeScript 將它們視為文字類型，而不是可變值。
const COLORS = ['red', 'green', 'blue'] as const;
type Color = typeof COLORS[number]; // 'red' | 'green' | 'blue'在 github 上關注我：
https://github.com/Jagroop2001
11.提取和排除以細化類型🧹
使用Extract和Exclude從聯合中過濾掉或挑選特定類型。
type T = 'a' | 'b' | 'c';
type OnlyAOrB = Extract<T, 'a' | 'b'>; // 'a' | 'b'
type ExcludeC = Exclude<T, 'c'>; // 'a' | 'b'12.用於自訂驗證的類型保護✅
建立您自己的類型保護以在執行時動態最佳化類型。
function isString(input: any): input is string {
return typeof input === 'string';
}
const value: any = 'Hello';
if (isString(value)) {
console.log(value.toUpperCase()); // Safe: value is a string here
}13.對動態物件類型使用Record 📋
當您需要具有動態鍵的物件的類型時， Record<K, V>是完美的選擇。
type Role = 'admin' | 'user' | 'guest';
const permissions: Record<Role, string[]> = {
admin: ['read', 'write', 'delete'],
user: ['read', 'write'],
guest: ['read']
};14.帶有索引簽名的動態類別屬性🏗️
索引簽名可讓您建立具有動態命名屬性的物件或類別。
class DynamicObject {
[key: string]: any;
}
const obj = new DynamicObject();
obj.name = 'Alice';
obj.age = 30;15. never輸入不可能的狀態🚫
never類型表示永遠不應該出現的值。它通常用於詳盡檢查。
function assertNever(value: never): never {
throw new Error(`Unexpected value: ${value}`);
}16.用於安全財產存取的可選連結🔗
使用可選連結 ( ?. ) 安全地存取深度嵌套的屬性，而不必擔心undefined錯誤。
const user = { profile: { name: 'John' } };
const userName = user?.profile?.name; // 'John'
const age = user?.profile?.age ?? 'Not provided'; // Fallback to default17.空合併的預設值 ( ?? ) 🔄
僅當原始值為null或undefined時，才使用 nullish 合併運算子提供後備值。
const input: string | null = null;
const defaultValue = input ?? 'Default'; // 'Default'18.使用ReturnType推斷回傳類型🔄
ReturnType<T>實用程式提取函數的傳回類型，這在處理複雜類型時非常有用。
function getUser() {
return { name: 'John', age: 30 };
}
type UserReturn = ReturnType<typeof getUser>; // { name: string; age: number; }19.函數中輸入參數🧑💻
泛型類型參數可讓您的函數靈活且可在不同類型之間重複使用。
function identity<T>(value: T): T {
return value;
}
identity<string>('Hello'); // 'Hello'
identity<number>(42); // 4220.組合結構的交叉點類型➕
交叉點類型可讓您將多種類型合併為一種。
type Admin = { privileges: string[] };
type User = { name: string };
type AdminUser = Admin & User;
const adminUser: AdminUser = {
privileges: ['admin', 'editor'],
name: 'Alice'
};這些技巧將幫助您將 TypeScript 技能提升到一個新的水平！ 🔥 不斷嘗試並將這些模式整合到您的專案中，以獲得更乾淨、更有效率的程式碼。快樂編碼！ 😎👨💻
原文出處：https://dev.to/jagroop2001/20-typescript-tricks-every-developer-should-know-31e2
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式