Komponent funkcyjny z <T>, jako const [TypeScript, React]

Question

Cześć, mam pytanie, być może trywialne - jak zapisać w komponencie funkcyjnym przypisanym do zmiennej (stałej dokładnie) przekazany parametr <T>?

Już tłumaczę przykładami. Wiem, że jest możliwe coś takiego i to działa, ale jednak chciałbym się trzymać przyjętego standardu w aplikacji i stosować zapis z przypisaniem funkcji do `const`.

export interface ITestComponentProps<T> {
  dataRow: T[]
}

Więc zamiast tego:

import _ from 'lodash'

import { ITestComponentProps } from './TestComponent.interface'

function TestComponent<T>(props: ITestComponentProps<T>): JSX.Element {
  return <>{_.map(props.dataRow)}</>
}

export default TestComponent

Chciałbym coś takiego osiągnąć:

import _ from 'lodash'

import { ITestComponentProps } from './TestComponent.interface'

const TestComponent = <T> (props: ITestComponentProps<T>): JSX.Element => {
  return <>{_.map(props.dataRow)}</>
}

export default TestComponent

Jest to w ogóle możliwe, a jak tak, to w jaki sposób musiałbym zapisać typ do funkcji?

Odpowiadając na mój zamysł, to tworzę uniwersalny komponent - wrapper. Przykładowo uniwersalną tabelę, która przyjmuje różnego typu dane do wierszy. A `<T>` jest mi niezbędny, żeby potem nie wpisywać `<any>` typów przy innych typach i interfejsach.

Przy okazji, polecacie stosować nazewnictwo T, jakby zgodnie z typescriptem, czy lepiej użyć jakiejś konkretnej nazwy mówiącej, czym właściwie ten typ jest, np. `<IRowData>`?

Answer 1

Hmm, ale Twój zapis powinien działać. Może masz jakąś starą wersję TypeScriptu?

Przy okazji, polecacie stosować nazewnictwo T, jakby zgodnie z typescriptem, czy lepiej użyć jakiejś konkretnej nazwy mówiącej, czym właściwie ten typ jest, np. `<IRowData>`?

Imo T jest na tyle rozpowszechnione, że każdy się domyśli, o co chodzi, czy wręcz będzie oczekiwał takiej nazwy dla generyka. 

Comments

Moja wersja TS to `"typescript": "^4.5.5".`

Błąd to: 

JSX element 'T' has no corresponding closing tag.

Projekt wygenerowany przez CRA - typescript

Przy poniższym zapisie działa, ale czemu z funkcją strzałkową nie chce, to nie rozumiem.

import _ from 'lodash'

import { ITestComponentProps } from './TestComponent.interface'

const TestComponent = function <T>(props: ITestComponentProps<T>): JSX.Element {
  return <>{_.map(props.dataRow)}</>
}

export default TestComponent

 

---

OK, wygląda na to, że się nie da → https://github.com/microsoft/TypeScript/issues/15713#issuecomment-300545248

Ogólnie: przy takim zapisie generyk jest traktowany jako znacznik otwierający w JSX.

---

Chociaż jest pewien hack: https://github.com/microsoft/TypeScript/issues/15713#issuecomment-499474386