✨ TypeScript 中的廣告創意

我愛❤️ TypeScript。

特別是在經歷了 JavaScript 臭名昭著的「無法存取未定義的值」錯誤之後。

然而，即使 TypeScript 很棒，仍然有搬石頭砸自己腳的方法。

在這篇文章中，我將分享 TypeScript 中的 5 個不良做法以及如何避免它們。

？下載我的免費 101 React Tips And Tricks Book，搶佔先機。

1. 將錯誤宣告為 Any 類型

例子

在下面的程式碼片段中，我們捕獲錯誤然後將其聲明為類型any。

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

為什麼不好❌

不保證錯誤具有字串類型的訊息欄位。

不幸的是，由於類型斷言，程式碼讓我們假設它確實如此。

程式碼可以在開發中使用特定的測試案例，但在生產中可能會嚴重損壞。

怎麼辦呢✅

不要設定錯誤類型。預設應該是未知的。

相反，您可以執行以下任一操作：

• 選項 1： 使用類型保護檢查錯誤的類型是否正確。

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

• 選項 2（建議）： 不要對錯誤做出假設

不要對錯誤類型做出假設，而是明確處理每種類型並向使用者提供適當的回饋。

如果無法確定特定的錯誤類型，最好顯示完整的錯誤訊息而不是部分詳細資訊。

有關錯誤處理的更多信息，請查看這個優秀的指南：編寫更好的錯誤訊息。

2. 具有多個相同類型的連續參數的函數

例子

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

為什麼不好❌

• 您可能會意外地以錯誤的順序傳遞參數：

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

• 很難理解每個參數代表什麼，尤其是在程式碼審查期間，當在聲明之前看到函數呼叫時

該怎麼辦 ✅

使用物件參數來闡明每個欄位的用途並最大程度地減少錯誤風險。

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

3. 具有多個分支且無返回類型的函數

例子

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

為什麼不好❌

• 新增新的 AnimalType 可能會導致傳回結構錯誤的物件。

• 傳回型別結構的變更可能會導致程式碼其他部分出現難以追蹤的問題。

• 拼字錯誤可能會導致推論出不正確的類型。

該怎麼辦 ✅

明確指定函數的回傳類型：

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

4. 新增不必要的類型而不是使用可選字段

例子

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

為什麼不好❌

• 無法擴充：新增欄位需要建立多個新類型

• 使類型檢查更加複雜，需要額外的類型保護

• 導致型別名稱混亂且維護更加困難

該怎麼辦 ✅

使用選用欄位來保持類型簡單且易於維護：

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

5. 在不同的元件層級使屬性可選

例子

disabled 屬性在所有元件中都是可選的。

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

為什麼不好❌

• 很容易忘記傳遞停用的屬性，導致部分啟用的表單

該怎麼辦 ✅

將共用欄位設為必填對於內部元件。

這將確保正確的道具傳遞。這對於較低級別的組件儘早發現任何疏忽尤其重要。

在上面的範例中，所有內部元件現在都需要停用。

function getAnimalDetails(animalType: "dog" | "cat" | "cow") {
  switch (animalType) {
    case "dog":
      return { name: "Dog", sound: "Woof" };
    case "cat":
      return { name: "Cat", sound: "Meow" };
    case "cow":
      return { name: "Cow", sound: "Moo" };
    default:
      // This ensures TypeScript catches unhandled cases
      ((_: never) => {})(animalType);
  }
}

注意：如果您正在為庫設計元件，我不建議這樣做，因為必填欄位需要更多工作。

概括

TypeScript 很棒，但沒有工具 ?️ 是完美的。

避免這 5 個錯誤將幫助您編寫更乾淨、更安全、更易於維護的程式碼。

更多提示，請查看我的免費電子書，101 React Tips & Tricks。

？發現錯誤

？本週提示

這是一個包裝？ .

<script> // Detect dark theme var iframe = document.getElementById('tweet-1869351983934738523-882'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869351983934738523&theme=dark" } </script>發表評論？分享您所犯的 Typescript 錯誤。 <script> // Detect dark theme var iframe = document.getElementById('tweet-1869050042931449902-927'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869050042931449902&theme=dark" } </script>

別忘了加上「???」。

如果您正在學習 React，請免費下載我的 101 React Tips & Tricks 書。

如果您喜歡這樣的文章，請加入我的免費時事通訊，FrontendJoy。

如果您想要每日提示，請在 X/Twitter 或 Bluesky 上找到我。

以上是✨ TypeScript 中的廣告創意的詳細內容。更多資訊請關注PHP中文網其他相關文章！