在現(xiàn)代前端開發(fā)中，TypeScript 由于其強大的類型系統(tǒng)和對 JavaScript 的增強功能，已成為許多團隊的首選。特別是在大型項目和組件庫的開發(fā)中，TypeScript 可以顯著提高代碼的可維護性、可讀性和可靠性。

然而，在實際開發(fā)過程中，我們經(jīng)常發(fā)現(xiàn)一些團隊成員對使用 TypeScript 仍然存在疑慮和困惑。他們可能會覺得 TypeScript 增加了開發(fā)的復雜性，或者不知道在某些場景下如何更好地利用 TypeScript 提供的功能。

我們不應輕易放棄使用 TypeScript，而應深入理解 TypeScript 的類型系統(tǒng)，掌握其提供的各種類型操作和語法，并靈活應用它們來解決實際問題。

在接下來的內(nèi)容中，分享一些在使用 TypeScript 開發(fā)組件過程中的見解和解決方案。希望這些經(jīng)驗能幫助大家更好地利用 TypeScript，提高組件開發(fā)的效率和質(zhì)量，使 TypeScript 成為我們的得力助手，而不是一個“麻煩”的負擔。

類型復用不足

在代碼審查過程中，我發(fā)現(xiàn)大量重復的類型定義，這大大降低了代碼的復用性。

在進一步溝通后，了解到許多團隊成員不清楚如何在 TypeScript 中復用類型。TypeScript 允許我們使用 type 和 interface 來定義類型。

當問他們 type 和 interface 之間的區(qū)別時，大多數(shù)人表示困惑，難怪他們不知道如何有效地復用類型。

通過交叉類型（&）可以復用 type 定義的類型，而通過繼承（extends）可以復用 interface 定義的類型。值得注意的是，type 和 interface 定義的類型也可以互相復用。以下是一些簡單的示例：

復用 type 定義的類型：

type Point = {
  x: number;
  y: number;
};

type Coordinate = Point & {
  z: number;
};

復用 interface 定義的類型：

interface Point {
  x: number;
  y: number;
}

interface Coordinate extends Point {
  z: number;
}

用 interface 復用 type 定義的類型：

type Point = {
  x: number;
  y: number;
};

interface Coordinate extends Point {
  z: number;
}

用 type 復用 interface 定義的類型：

interface Point {
  x: number;
  y: number;
}

type Coordinate = Point & {
  z: number;
};

復用時僅添加新屬性定義

我還注意到，在復用類型時，團隊成員通常只是簡單地在現(xiàn)有類型上添加新屬性，而忽略了更高效的復用方法。

例如，現(xiàn)有類型 Props 需要復用，但不需要屬性 c。在這種情況下，團隊成員會重新定義 Props1，只包含 Props 中的屬性 a 和 b，并添加新屬性 e。

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 {
  a: string;
  b: string;
  e: string;
}

我們可以使用 TypeScript 提供的工具類型 Omit 更高效地實現(xiàn)這種復用。

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 extends Omit<Props, 'c'> {
  e: string;
}

同樣，工具類型 Pick 也可以用來實現(xiàn)這種復用。

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 extends Pick<Props, 'a' | 'b'> {
  e: string;
}

Omit 和 Pick 用于在類型中排除和選擇屬性，具體選擇取決于具體需求。

組件庫中基本類型的使用不一致

在開發(fā)組件庫時，我們經(jīng)常面臨類似功能組件屬性命名不一致的問題。例如，用于指示組件是否顯示的屬性可能命名為 show、open 或 visible。這不僅影響組件庫的可用性，還降低了其可維護性。

為了解決這個問題，定義一套統(tǒng)一的基本類型至關重要。這些基本類型為組件庫的發(fā)展提供了堅實的基礎，并確保所有組件的命名一致性。

以表單控件為例，我們可以定義以下基本類型：

import { CSSProperties } from 'react';

type Size = 'small' | 'middle' | 'large';

type BaseProps<T> = {
  /**
   * 自定義樣式類名
   */
  className?: string;
  /**
   * 自定義樣式對象
   */
  style?: CSSProperties;
  /**
   * 控制組件是否可見
   */
  visible?: boolean;
  /**
   * 定義組件的大小，可選值為 'small'、'middle' 或 'large'
   */
  size?: Size;
  /**
   * 是否禁用組件
   */
  disabled?: boolean;
  /**
   * 組件是否為只讀狀態(tài)
   */
  readOnly?: boolean;
  /*
   * 組件的默認值
   */ 
  defaultValue?: T; 
  /*
   * 組件的當前值
   */  
  value?: T;  
  /* 
   * 組件值變化時的回調(diào)函數(shù) 
   */ 
  onChange: (value: T) => void;  
}

基于這些基本類型，定義特定組件的屬性類型變得很簡單：

interface WInputProps extends BaseProps<string> {
  /**
   * 輸入內(nèi)容的最大長度
   */
  maxLength?: number;
  /**
   * 是否顯示輸入內(nèi)容計數(shù)
   */
  showCount?: boolean;
}

通過使用 type 關鍵字定義基本類型，我們可以避免意外修改類型，從而增強代碼的穩(wěn)定性和可維護性。

處理包含不同類型元素的數(shù)組

在審查自定義 Hooks 時，我發(fā)現(xiàn)團隊成員傾向于返回對象，即使 Hook 只返回兩個值。

雖然這并沒有錯，但它違背了自定義 Hook 的一個常見約定：當 Hook 返回兩個值時，應該使用數(shù)組作為返回值。

團隊成員解釋說，他們不知道如何定義包含不同類型元素的數(shù)組，通常會選擇使用 any[]，但這可能會導致類型安全問題，因此他們選擇返回對象。

元組是處理這種情況的理想選擇。使用元組，我們可以在一個數(shù)組中包含不同類型的元素，同時保持對每個元素類型的清晰定義。

function useMyHook(): [string, number] {
  return ['示例文本', 42];
}

function MyComponent() {
  const [text, number] = useMyHook();
  console.log(text);  // 輸出字符串
  console.log(number);  // 輸出數(shù)字
  return null;
}

在這個例子中，useMyHook 函數(shù)返回一個顯式類型的元組，包含一個字符串和一個數(shù)字。在 MyComponent 組件中使用這個 Hook 時，我們可以解構獲取這兩個不同類型的值，同時保持類型安全。

處理具有可變數(shù)量和類型參數(shù)的函數(shù)

在審查團隊成員封裝的函數(shù)時，我發(fā)現(xiàn)當函數(shù)的參數(shù)數(shù)量不固定、類型不同或返回值類型不同，他們往往會使用 any 來定義參數(shù)和返回值。

他們解釋說，他們只知道如何定義具有固定數(shù)量和相同類型參數(shù)的函數(shù)，對于復雜情況感到束手無策，也不愿意將函數(shù)拆分成多個。

這正是函數(shù)重載的用武之地。通過函數(shù)重載，我們可以根據(jù)不同的參數(shù)類型、數(shù)量或返回類型定義同一個函數(shù)名下的多個實現(xiàn)。

function greet(name: string): string;
function greet(age: number): string;
function greet(value: any): string {
  if (typeof value === "string") {
    return `你好，${value}`;
  } else if (typeof value === "number") {
    return `你今年 ${value} 歲了`;
  }
}

在這個例子中，我們提供了兩種調(diào)用 greet 函數(shù)的方式，使函數(shù)的使用更加靈活，同時保持類型安全。

對于箭頭函數(shù)，雖然它們不直接支持函數(shù)重載，但我們可以通過定義函數(shù)簽名來實現(xiàn)類似的效果。

type GreetFunction = {
  (name: string): string;
  (age: number): string;
};

const greet: GreetFunction = (value: any): string => {
  if (typeof value === "string") {
    return `你好，${value}`;
  } else if (typeof value === "number") {
    return `你今年 ${value} 歲了。`;
  }
  return '';
};

這種方法利用類型系統(tǒng)提供編譯時類型檢查，模擬函數(shù)重載的效果。

組件屬性定義：使用 type 還是 interface？

在審查代碼時，我發(fā)現(xiàn)團隊成員同時使用 type 和 interface 來定義組件屬性。

當被問及原因時，他們提到兩者都可以用來定義組件屬性，沒有顯著差異。

由于同名接口會自動合并，而同名類型別名會沖突，我建議使用 interface 來定義組件屬性。這樣，用戶可以通過 declare module 語句自由擴展組件屬性，增強代碼的靈活性和可擴展性。

interface UserInfo {
  name: string;
}
interface UserInfo {
  age: number;
}

const userInfo: UserInfo = { name: "張三", age: 23 };

總結

TypeScript 的使用并不困難，關鍵在于理解和應用其強大的功能。如果在使用 TypeScript 時遇到任何問題，不確定使用哪種語法或技術來解決，請隨時在評論區(qū)留言。讓我們一起探索，共同解決 TypeScript 中遇到的挑戰(zhàn)。