Niezrozumiały zapis typu generycznego w hooku

Cześć.
Wracam do Reacta po długiej przerwie i zauważyłem że jest coś w zapisie hooków na co nie natknąłem się wcześniej:

const [fileList, setFileList] = useState<FileList | null>(null);

Czy możecie mi wyjaśnić jak się nazywa taki zapis i co to robi?

Jest to typ generyczny z TypeScript https://www.typescriptlang.org/docs/handbook/2/generics.html

interface FileList {
  id: number;
  name: string;
  author?: string; 
}

// ...
// ...

const [file, setFileList] = useState<FileList | null>(null);

i teraz TypeScript oznaczył, że zmienna file, lub argument setFileList może być obiektem, lub nullem

setFileList(null); // okej
setFileList({}); // błąd
setFileList({ id: 10 }); // błąd, bo brakuje właściwości name
setFileList({ id: 11, name: 'foo' }); // okej
setFileList({ id: 11, name: 'foo', author: 'bar' }); // okej, bo właściwość author jest dobrowolna i nie trzeba zawsze jej podawać

Podobne błędy pojawią się przy zmiennej file jeśli skorzystamy z niej w zły sposób.

adams0 napisał(a):

Cześć.
Wracam do Reacta po długiej przerwie i zauważyłem że jest coś w zapisie hooków na co nie natknąłem się wcześniej:

const [fileList, setFileList] = useState<FileList | null>(null);

Czy możecie mi wyjaśnić jak się nazywa taki zapis i co to robi?

To jest praktycznie to samo co:

const [fileList, setFileList] = useState(null);

To coś FileList | null
to union type.
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

FileList | null oznacza, że obiekt tego typu jest albo typu FileList albo typu null - gdzie typ null to singleton z jedną instancją null.