funkcje interfejsu maszynopisu

w ten sposób deklarować typy funkcji w interfejsach maszynopisu. Napisał ten artykuł z powodu mylących informacji i dokumentacji maszynopisu nie jest bezpośrednio o składni.

(zauważ, poniższe przykłady używają klas maszynopisu tylko jako przykładów, ponieważ typy funkcji są tam szczególnie przydatne, ale składnia dotyczy każdego interfejsu maszynopisu.)

przykład 1: funkcja, która nie przyjmuje argumentów i nie zwraca wartości:

w poniższym przykładzieonChange jest deklaracją funkcji. Funkcja zwraca nothing (void), więc deklarujemy zwracany typ jako any. Dzieje się tak dlatego, że void I never są oceniane inaczej w różnych kontekstach (poza zakresem tego artykułu). (Poniżej kilka przykładów wpisywanych wartości zwracanych.)

interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...

przykład 2: Funkcja przyjmująca argument:

zawiera nazwę argumentu i jego typ. Argument name jest wymagany, ale nie musi pasować, gdy tworzysz prawdziwą funkcję, ale typ musi pasować. Jest kaczka na maszynie, tak jak wszystko w maszynopisie.

interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}

przykład 3: Funkcja przyjmująca argument i zwracająca wartość:

Ta funkcja przyjmuje ciąg znaków jako argument i zwraca liczbę.

interface MyClassProps {
onChange(name: string): number;
}

przykład 4: funkcja, która jest opcjonalna:

przyrostek nazwy właściwości z opcjonalnym operatorem?. Umieść ? po nazwie Właściwości i przed listą argumentów. W maszynopisie React wszystkie właściwości są wymagane, chyba że użyjesz opcjonalnego operatora. Tak jak w przypadku wszystkich niewymaganych właściwości w Reaccie, musisz sprawdzić, czy jest to undefinedprzed użyciem.

interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}

przykład 5: użycie słowa kluczowego type:

czasami wygodnie jest najpierw zadeklarować typ funkcji, a następnie użyć go w interfejsie. Aby zadeklarować funkcję jako typ, składnia jest nieco inna. Użyj operatora strzałki.

type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}

Zapraszamy.