Wie definiert man Variable mit einem generischen Argument?

Question

Betrachten Sie den folgenden Code ein Reagieren Komponente mit einem generischen Typ Argument TRow zu definieren:

function DataTable<TRow> ({ rows: TRow[] }) { 
    return (
) 
} 

In früheren Code, ES6 verwendet wurde, und die Komponenten wurden als staatenlos Funktionen definiert:

const DataTable = ({ rows }) => (...) 

Wie kann ich Definieren Sie eine solche Funktion so, dass sie ein generisches Argument TRow hat? Wird dies von Typescript überhaupt unterstützt?

Answer 1

Ja, mit Typoskript können Sie genau das tun, was Sie wollen.

Nehmen wir an, Sie werden Ihre Prop-Typen in eine generische Schnittstelle DataTableProps mit dem Typ Parameterhalter TRow (kann jede Art von Zeile sein).

interface DataTableProps<TRow> { 
     items: Array<TRow> 
    } 

Nun möchten Sie diesen Eigenschaftstyp in der Klasse der reagierenden Komponente verwenden. Angenommen, Ihre Komponente ist zustandslos, verwenden wir den Typ React.SFC, um auf eine zustandslose Reaktionskomponente zu verweisen.

function getDataTableComp<TRow>() : React.SFC<DataTableProps<TRow>>{ 
     return props => <div> 
      <p>{props.items.toString()}</p> 
     </div> 
    } 

Dies ist eine Funktion, die eine bestimmte Art zustandsloser Reaktionskomponente zurückgibt. Dann können wir die Funktion als,

const MyStringDataTable = getDataTableComp<string>(); 

Jetzt nutzen, haben wir einen bestimmten Datentabellentyp, das heißt, Daten-Tabelle der Zeichenfolge Reihen. Dann können wir eine Instanz als

ReactDOM.render(<MyStringDataTable items={['a', 'b']} />, document.getElementById('page-root')) 

verwenden Sie a,b in Ihrer Seite gerendert bekommen.