typescript的泛型(Generics)

背景：公司項目使用的組件庫是ant-design,代碼要求用typescript，剛開始寫代碼，老是紅色波浪線😭, 後面索性用any代替一切類型，在使用過程當中編輯器仍是提示一些錯誤😭，好比使用ant-design的Form組件要使用props.form時必須這樣寫Form.create<AddProps>()(Add),看到<>這是啥？？？好像大學時學c++時見過（只是見過）,後面看了幾遍文檔終於弄明白了，當本身開始真正實操寫代碼時，又熟悉的紅色波浪線😭又出現了，決定寫一篇文章結合實際項目的運用，讓本身入個門...

官方解釋泛型

A major part of software engineering is building components that not only have well-defined and consistent APIs, but are also reusable. Components that are capable of working on the data of today as well as the data of tomorrow will give you the most flexible capabilities for building up large software systems.In languages like C# and Java, one of the main tools in the toolbox for creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their own types. 傳送門 (翻譯: 爲了偷懶及編輯器友好的代碼提示)

快速上手

爲了學習（不報錯）泛型，我準備了一個例子，便於快速入門, 個人解說所有放代碼註釋了，直接看代碼。

// 學習部分
/***************************** * 泛型： （通用的類型） * 泛：（普遍：不少，廣泛） * 型： （類型: 好比number， string， object， array） * 下面的T便是泛型（通用類型）, T能夠隨便命名的, 我當初看的時候，覺得只能<T>, <V>這樣寫。 ***************************/
function identity<T>(arg: T): T {
    return arg;
}
// 調用時把T換成真正的類型
identity<string>("myString")

複製代碼

實際運用

代碼我簡化過哦

函數中運用

舉的栗子是父組件調子組件內部方法

/***************************************
* 場景：React在父組件裏面，
* 想調用子組件裏面的helloWorld函數
*****************************************/
import React from 'react'
import Child from './child'
function Parent(){
    // 不使用泛型這樣寫
    const childRef = React.createRef();
    // 使用泛型這樣寫
     const childRef = React.createRef<Child>();
    return (
    <div>
     <button onClick={() => {
        /*****************************
        *使用泛型的好處體現下面這一行代碼, 當你敲 childRef!.current!.
        * 編輯器會提示組件Child裏面的方法, 好比helloWord這個方法。
        ********************************/
         childRef!.current!.helloWorld()
     }>調用子組件</button>
     <Child ref={childRef}/>
    </div>
    )
}

複製代碼

組件中運用

示例一個泛型組件，並如何在tsx裏面使用

// child.tsx 文件
 import React, { Component } from 'react';
 
 /**********************************************
 * interface是一個接口， PropsType接受泛型T
 *******************************************/
 interface PropsType<T>{
    sayWhat?: string,
    input: T, // input的類型是泛型T
   // callback是一個函數，接受2個參數，
    callback(input: T, e: React.MouseEvent<HTMLElement>): void 
 }
/**************************************************************
* childTemplate爲泛型， 
* PropsType<childTemplate>， 接口PropsType的泛型T被賦值爲childTemplate泛型
************************************************/
class Child<childTemplate> extends Component<PropsType<childTemplate>>{
      render() {
        const { props } = this;
        return (<button onClick={(e) => {
            console.log(props.sayWhat || '沒傳sayWhat')
            // props.input的類型爲childTemplate
            props.callback(props.input, e)
        }}>子組件</button>)  
      }
}

// parent.tsx 文件

 import React, { Component } from 'react';
 import Child from './child'
 // 定義接口CTemplate
 interface CTemplate{
    a: string,
    b: number
 }
class Parent extends Component{
      render() {
       // 定義inputChild
        const inputChild: CTemplate = {
            a: 'hello world',
            b: 77
        }
        return (
            // 劃重點，在tsx裏面的使用，把泛型實例化,這樣寫<Child<CTemplate> />
            <Child<CTemplate> input={inputChild} callback={
                (input: CTemplate, e: React.MouseEvent<HTMLElement>) => {
                    console.log('----------in parent component-------------')
                    // input裏面定義了a和b, 這個時候能夠享受編輯器的自動提示了
                    console.log(input.a + input.b)
                    console.log(e)
                }
            }/>
        )  
      }
}
複製代碼

ant-design使用的一些tips

準備咱們常常用的From表單講解一下泛型，加深自個人理解。

在使用ant-design的組件庫裏咱們常常會用到Form.create這個函數，咱們經過查閱文檔來了解它的使用，其實咱們也能夠經過它的定義文件來了解它的使用， 光標定位到From.create, 按快捷鍵(vscode和webstorm快捷鍵 ctr+B)進入定義文件

// antd/lib/form/Form.d.ts
static create: <TOwnProps extends FormComponentProps<any>>(options?:
FormCreateOption<TOwnProps>) => FormWrappedProps<TOwnProps>;
複製代碼

經過上面一行代碼，咱們能夠獲取的信息有：

1. create函數接受泛型 TOwnProps ，TOwnProps繼承FormComponentProps, 所以咱們在接口中定義Props接受的參數時要繼承FormComponentProps，繼續把光標定位到FormComponentProps,按ctr+B進入定義的地方

從上圖能夠知道，在props裏面會有form這個對象。

2. 接收參數類型爲: FormCreateOption， 當咱們想知道怎麼傳時，繼續按ctr+B定位到定義的地方,

3. 函數返回FormWrappedProps，繼續按ctr+B定位到定義的地方，咱們能夠知道FormWrappedProps是一個函數，(component:C) => ConnectedComponentClass, 參數接受組件，返回組件。

export declare type FormWrappedProps<TOwnProps extends WrappedFormInternalProps> = 
<C extends React.ComponentType<Matching<TOwnProps, GetProps<C>>>>(component: C) => 
ConnectedComponentClass<C, Omit<TOwnProps, keyof WrappedFormInternalProps>>;
複製代碼

看的我頭痛....經過上面的一系列ctrl+b,咱們知道了Form.create的調用方式了，

// YourPropsInterface, FormOption, YourComponent
import React, { useState, Fragment } from 'react';
import { FormComponentProps } from 'antd/es/form';
interface AddProps extends FormComponentProps {
}
function Add(props: AddProps) {
    return <div></div>
}
Form.create<AddProps>({name: 'add-component'})(Add)
複製代碼

總結

缺點：typescript的泛型(Generics)寫起來麻煩，看起來難看

優勢：編輯器代碼提示，代碼更規範，其餘小夥伴更容易維護你的代碼😰😰😰