前言

最近，我們部門在開發(fā)一個(gè)組件庫(kù)時(shí)，我注意到一些團(tuán)隊(duì)成員對(duì)使用TypeScript表示出了抵觸情緒，他們常常抱怨說：“TypeScript太麻煩了，我們不想用！”起初，我對(duì)此感到困惑：TypeScript真的有那么麻煩嗎？然而，當(dāng)我抽時(shí)間審查隊(duì)伍的代碼時(shí)，我終于發(fā)現(xiàn)了問題所在。在這篇文章中，我想和大家分享我的一些發(fā)現(xiàn)和解決方案。

一、類型復(fù)用不足

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

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

當(dāng)我詢問他們type與interface之間的區(qū)別時(shí)，大多數(shù)人都表示不清楚，這也就難怪他們不知道如何有效地復(fù)用類型了。

type定義的類型可以通過交叉類型（&）來進(jìn)行復(fù)用，而interface定義的類型則可以通過繼承（extends）來實(shí)現(xiàn)復(fù)用。值得注意的是，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í)只會(huì)新增屬性的定義

我還注意到，在類型復(fù)用時(shí)，團(tuán)隊(duì)成員往往只是簡(jiǎn)單地為已有類型新增屬性，而忽略了更高效的復(fù)用方式。

例如，有一個(gè)已有的類型Props需要復(fù)用，但不需要其中的屬性c。在這種情況下，團(tuán)隊(duì)成員會(huì)重新定義Props1，僅包含Props中的屬性a和b，同時(shí)添加新屬性e。

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

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

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

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

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

類似地，工具類型Pick也可以用于實(shí)現(xiàn)此類復(fù)用。

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

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

Omit和Pick分別用于排除和選擇類型中的屬性，具體使用哪一個(gè)取決于具體需求。

三、未統(tǒng)一使用組件庫(kù)的基礎(chǔ)類型

在開發(fā)組件庫(kù)時(shí)，我們經(jīng)常面臨相似功能組件屬性命名不一致的問題，這不僅影響了組件庫(kù)的易用性，也降低了其可維護(hù)性。

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

以表單控件為例，我們可以定義如下基礎(chǔ)類型：

import { CSSProperties } from 'react';

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

interface BaseProps<T> {
  className?: string;
  style?: CSSProperties;
  visible?: boolean;
  size?: Size;
  disabled?: boolean;
  readOnly?: boolean;
  defaultValue?: T;
  value?: T;
  onChange: (value: T) => void;
}

基于這些基礎(chǔ)類型，定義具體組件的屬性類型變得簡(jiǎn)單而直接：

interface WInputProps extends BaseProps<string> {
  maxLength?: number;
  showCount?: boolean;
}

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

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

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

雖然這樣做并非錯(cuò)誤，但它違背了自定義Hook的一個(gè)常見規(guī)范：當(dāng)Hook返回兩個(gè)值時(shí)，應(yīng)使用數(shù)組返回。

團(tuán)隊(duì)成員解釋說，他們不知道如何定義含有不同類型元素的數(shù)組，通常會(huì)選擇使用any[]，但這會(huì)帶來類型安全問題，因此他們選擇返回對(duì)象。

實(shí)際上，元組是處理這種情況的理想選擇。通過元組，我們可以在一個(gè)數(shù)組中包含不同類型的元素，同時(shí)保持每個(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è)string和一個(gè)number。在MyComponent組件中使用這個(gè)Hook時(shí)，我們可以通過解構(gòu)賦值來獲取這兩個(gè)不同類型的值，同時(shí)保持類型安全。

五、處理參數(shù)數(shù)量和類型不固定的函數(shù)

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

他們解釋說，他們只知道如何定義參數(shù)數(shù)量固定、類型相同的函數(shù)，對(duì)于復(fù)雜情況則不知所措，而且不愿意將函數(shù)拆分為多個(gè)函數(shù)。

這正是函數(shù)重載發(fā)揮作用的場(chǎng)景。通過函數(shù)重載，我們可以在同一函數(shù)名下定義多個(gè)函數(shù)實(shí)現(xiàn)，根據(jù)不同的參數(shù)類型、數(shù)量或返回類型進(jìn)行區(qū)分。

function greet(name: string): string;
function greet(age: number): string;
function greet(value: any): string {
  if (typeof value === "string") {
    return `Hello, ${value}`;
  } else if (typeof value === "number") {
    return `You are ${value} years old`;
  }
}

在這個(gè)例子中，我們?yōu)?code style="margin: 0px 2px;padding: 2px 4px;outline: 0px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word !important;border-radius: 4px;background-color: rgba(27, 31, 35, 0.05);font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;color: rgb(239, 112, 96)">greet函數(shù)提供了兩種調(diào)用方式，使得函數(shù)使用更加靈活，同時(shí)保持類型安全。

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

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

const greet: GreetFunction = (value: any): string => {
  if (typeof value === "string") {
    return `Hello, ${value}`;
  } else if (typeof value === "number") {
    return `You are ${value} years old.`;
  }
  return '';
};

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

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

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

詢問原因時(shí)，他們表示兩者都可以用于定義組件屬性，沒有明顯區(qū)別。

由于同名接口會(huì)自動(dòng)合并，而同名類型別名會(huì)沖突，我推薦使用interface定義組件屬性。這樣，使用者可以通過declare module語句自由擴(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過程中遇到任何問題，不清楚應(yīng)該使用哪種語法或技巧來解決，歡迎在評(píng)論區(qū)留言。我們一起探討，共同解決TypeScript中遇到的挑戰(zhàn)。