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

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

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

在接下來(lái)的內(nèi)容中，分享一些在使用 TypeScript 開發(fā)組件過(guò)程中的見解和解決方案。希望這些經(jīng)驗(yàn)?zāi)軒椭蠹腋玫乩?TypeScript，提高組件開發(fā)的效率和質(zhì)量，使 TypeScript 成為我們的得力助手，而不是一個(gè)“麻煩”的負(fù)擔(dān)。

類型復(fù)用不足

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

在進(jìn)一步溝通后，了解到許多團(tuán)隊(duì)成員不清楚如何在 TypeScript 中復(fù)用類型。TypeScript 允許我們使用 type 和 interface 來(lái)定義類型。

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

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

復(fù)用 type 定義的類型：

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

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

復(fù)用 interface 定義的類型：

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

interface Coordinate extends Point {
  z: number;
}

用 interface 復(fù)用 type 定義的類型：

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

interface Coordinate extends Point {
  z: number;
}

用 type 復(fù)用 interface 定義的類型：

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

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

復(fù)用時(shí)僅添加新屬性定義

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

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

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

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

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

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

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

同樣，工具類型 Pick 也可以用來(lái)實(shí)現(xiàn)這種復(fù)用。

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

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

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

組件庫(kù)中基本類型的使用不一致

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

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

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

import { CSSProperties } from 'react';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這正是函數(shù)重載的用武之地。通過(guò)函數(shù)重載，我們可以根據(jù)不同的參數(shù)類型、數(shù)量或返回類型定義同一個(gè)函數(shù)名下的多個(gè)實(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} 歲了`;
  }
}

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

對(duì)于箭頭函數(shù)，雖然它們不直接支持函數(shù)重載，但我們可以通過(guò)定義函數(shù)簽名來(lái)實(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í)類型檢查，模擬函數(shù)重載的效果。

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

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

當(dāng)被問(wèn)及原因時(shí)，他們提到兩者都可以用來(lái)定義組件屬性，沒有顯著差異。

由于同名接口會(huì)自動(dòng)合并，而同名類型別名會(huì)沖突，我建議使用 interface 來(lái)定義組件屬性。這樣，用戶可以通過(guò) declare module 語(yǔ)句自由擴(kuò)展組件屬性，增強(qiáng)代碼的靈活性和可擴(kuò)展性。

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

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

總結(jié)

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