[reactjs] TypeScript로 useState React Hook에 유형 설정

Program / 글쓴이

후크 기능 (React v16.7.0-alpha)을 사용하기 위해 React with TypeScript 프로젝트를 마이그레이션하고 있지만 구조화 요소의 입력을 설정하는 방법을 알 수 없습니다.

다음은 그 예입니다.

interface IUser {
  name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});

user변수 유형 을 강제하고 싶습니다 IUser. 내 유일한 성공적인 평가판은 두 단계로 수행하는 것입니다. 입력 한 다음 초기화 :

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

하지만 더 나은 방법이 있다고 확신합니다. 또한를 입력으로 받고 아무것도 반환하지 않는 setUser함수로 초기화되어야합니다 IUser.

또한 const [user, setUser] = useState({name: 'Jon'});초기화없이 사용 하면 잘 작동하지만 특히 일부 소품에 의존하는 경우 TypeScript를 사용하여 init에서 유형 검사를 강제하고 싶습니다.

당신의 도움을 주셔서 감사합니다.

답변

이것을 사용하십시오

const [user, setUser] = useState<IUser>({name: 'Jon'});

여기에서 해당 유형을 참조하십시오. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

답변

먼저 useStateIUser가 될 제네릭을 가져옵니다. 그런 다음 반환 된 두 번째 비 구조화 된 요소를 전달하려면 useStateDispatch를 가져와야합니다. 클릭 핸들러가있는 다음 확장 버전의 예제를 고려하십시오.

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>
    )
}

이 답변을 참조하십시오 .

답변

이전에 초기 상태를 선언 한 다음 원할 때마다 호출 할 수도 있습니다.

type User = typeof initUser;
const initUser = {name: 'Jon'}
...
const [user, setUser] = useState<User>(initUser);

I 인터페이스 접두사 정보 : https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface

답변

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>
      </>
    }

답변