Migruję projekt React z TypeScript, aby korzystać z funkcji hooków (React v16.7.0-alpha), ale nie mogę dowiedzieć się, jak ustawić typizację zniszczonych elementów.
Oto przykład:
interface IUser {
name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});
Chcę, aby user
zmienna była typu IUser
. Moja jedyna zakończona sukcesem wersja próbna obejmuje dwie fazy: wpisywanie, a następnie inicjowanie:
let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});
Ale jestem pewien, że jest lepszy sposób. Ponadto, setUser
powinny być inicjowane jako funkcję, która pobiera IUser
jako dane wejściowe i zwraca niczego.
Warto również zauważyć, że używanie const [user, setUser] = useState({name: 'Jon'});
bez inicjalizacji działa dobrze, ale chciałbym skorzystać z TypeScript, aby wymusić sprawdzanie typów w init, zwłaszcza jeśli zależy to od niektórych właściwości.
Dzięki za pomoc.
źródło
IUser
, tj. ma takie same właściwości. Nazywa się to pisaniem kaczek.type MyType = MyObj[];
następnieuseState<MyType>
useState
zwraca dobrze wpisaną krotkę, która jest przypisana do[user, setUser]
i TypeScript nie jest trudno zrozumieć, że zmienne powinny być tego samego typu co składniki krotki. Nie wiem, czy wyjaśniłem sprawę, czy jeszcze bardziej cię zdezorientowałem.Najpierw
useState
pobiera ogólny, który będzie Twoim IUser. Jeśli chcesz następnie ominąć drugi zniszczony element, który jest zwracanyuseState
, musisz zaimportować Dispatch. Rozważ tę rozszerzoną wersję Twojego przykładu, która ma moduł obsługi kliknięć:import React, { useState, Dispatch } from 'react'; interface IUser { name: string; } export const yourComponent = (setUser: Dispatch<IUser>) => { const [user, setUser] = useState<IUser>({name: 'Jon'}); const clickHander = (stateSetter: Dispatch<IUser>) => { stateSetter({name : 'Jane'}); } return ( <div> <button onClick={() => { clickHander(setUser) }}>Change Name</button> </div> ) }
Zobacz tę odpowiedź .
źródło
Możesz również zadeklarować stan początkowy przed, a następnie móc go wywołać w dowolnym momencie:
type User = typeof initUser; const initUser = {name: 'Jon'} ... const [user, setUser] = useState<User>(initUser);
Informacje o prefiksach interfejsu I: https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface
źródło
https://fettblog.eu/typescript-react/hooks/
// import useState next to FunctionComponent import React, { FunctionComponent, useState } from 'react'; // our components props accept a number for the initial value const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { // since we pass a number here, clicks is going to be a number. // setClicks is a function that accepts either a number or a function returning // a number const [clicks, setClicks] = useState(initial); return <> <p>Clicks: {clicks}</p> <button onClick={() => setClicks(clicks+1)}>+</button> <button onClick={() => setClicks(clicks-1)}>-</button> </> }
źródło