目錄

• 目錄
  • generics 是什麼
  • 基本
    • 泛型函式(generic function)
  • 多個型別參數
    • 傳遞型別參數給內部函式
  • 泛型與限制
  • 實際例子
    • PropsWithChildren
    • HOC
  • 參考資料

generics 是什麼

generics 就是泛型，所謂的泛型是指可以用傳引數(argument)的方式來指定型別，這麼做能提升型別定義的彈性，進而增加複用性

可以把使用泛型想像成製作組件的時候挖 slot 或者 props 的感覺

基本

假設要回傳收到的參數內 index 為 0 的元素，你的 code 可能會長這樣

function foo(arg: number[]): number {
  return arg[0];
}

function bar(arg: string[]): string {
  return arg[0];
}

那如果參數型別是 boolean[]，不就要再多加一個函式 🤔

沒錯，所以才要用泛型，因為泛型可以給予型別定義適當的彈性

它既不會像上一段的 code 的型別定義那樣缺乏彈性，也不會像 any、unknown 一樣過度彈性

function foo<Type>(arg: Type[]): Type {
  return arg[0];
}

// 也可以不寫<number>、<boolean>，Typescript會自動判斷型別
const getNumber = foo < number > [1, 2, 3];
const getBoolean = foo < boolean > [true, true, false];

泛型函式(generic function)

泛型函式的型別定義方式有 2 種，分別為用<>或{}包起來

function foo<Type>(arg: Type[]): Type[] {
  return arg;
}

用<>包起來
const foo1: <Input>(value: Input[]) => Input[] = (value) => value;

// 用{}包起來
const foo3: { <Input>(value: Input[]): Input[] } = (value) => value;

多個型別參數

泛型函式也可以接收多個引數，只要在<>內多寫一個參數即可

type Profile = {
  name:string;
  job:'ninja' | 'samurai',
  favor:string
}

function foo<T, K >(profile:T, detail:K extends T){
    return {
      profile,
      detail
    }
}

// 使用Pick可以挑出型別中需要的部分
const tempuraSamurai = foo<Pick<Profile, 'name' | 'favor'>, {weapon:string}>({name:'TempuraSamurai', favor:'shrimp'}, {name:'TempuraSamurai', favaor:'shrimp', weapon:'katana made with hijiki'});

// 也可以不傳入引數，TS會自行判斷
const tempuraNinja = foo({name:'TempuraNinja', job:'ninja'}, {name:'TempuraNinja', job:'ninja', skill:['eating onigiri', 'writing words']});

enum Weekday {
  'Monday' = 'Monday',
  'Tuesday' = 'Tuesday',
  'Wednesday' = 'Wednesday',
  'Thursday' = 'Thursday',
  'Friday' = 'Friday',
}

enum Weekend {
  'Sunday' = 'Sunday',
  'Saturday' = 'Saturday',
}

function bar<T, K>(val: keyof T extends keyof K){
  return val;
}

const res2 = bar<typeof Weekday, typeof Weekend>('Sunday');

傳遞型別參數給內部函式

// 函式表達式 + <>
const foo = <T, K extends keyof T>(prop: K, value: T[K]) => {
    return (item: T): boolean =>  {
        return item[prop] === value;
    }
}

比較不推薦用{}，因為在這種情況下會變得難以閱讀

// 函式表達式 + {}
const bar:{<T, K extends keyof T>(props:K, value:T[K]):(item:T) => boolean} = (prop, value) => {
    return (item) => {
        return item[prop] === value;
    }
}

泛型與限制

泛型是有些限制的，並不是傳入一個東西，隨便要求回傳一個沒有的屬性也行

例如這個例子是回傳傳入參數的 length 屬性，但傳入的可能是 number、boolean 等沒有 length 的值，所以會報錯"Property 'length' does not exist on type 'Type'."

function foo<T>(arr: T) {
  return arr.length;
}

這時需要定義一個 interface 或者 type 來將這個型別參數更加具體化

interface withLength {
    length:number;
}

// 限定傳入的參數一定要有length屬性
function foo<T>(arr:T extends withLength){
    return arr.length;
}

實際例子

PropsWithChildren

React 的 PropsWithChildren 就是泛型的一個例子

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

假設有幾個 props 它們都有 children 這個屬性，而其他屬性則不相同

只要把不同的地方抽掉改成型別參數，就能得到一個有 children 屬性的物件型別

interface MapProps {
  center: number[];
  zoom: number;
}

interface TooltipProps {
  position: 'top' | 'bottom';
  permanent: boolean;
}

// 這樣就不用在每個type都寫children了
const Tooltip = ({position, permanent, children}:PropsWithChildren<TooltipProps>) => (// 省略... )

const BikeStationMap = ({center, zoom, children}:PropsWithChildren<MapProps>) => (// 省略... );

HOC

假設有幾個 component 都要套同的 Layout

如果用 HOC 的話，因為我們無法預知以後會用到 Layout 的 componet 有哪些 props，所以 WrappedComponent 的型別就會用到泛型

// WrappedComponent不定義為FunctionComponent<T>是因為props必是一個key為string的物件，所以用Record更加具體化型別會比較好

const withLayout: {
  <T>(
    WrappedComponent: FunctionComponent<Record<string, T>>,
  ): (WrappedComponent: FunctionComponent<Record<string, T>>) => JSX.Element,
} = (WrappedComponent) => {
  const ComponentWithLayout = (props: Record<string, T>) => (
    <Layout>
      <WrappedComponent {...props} />
    </Layout>
  );

  return ComponentWithLayout;
};

參考資料

Typescript - Generics
How to apply generic type for inner function in typescript