TypeScript를 사용하여 useState React Hook에서 유형 설정

TypeScript를 사용하여 useState React Hook에서 유형 설정

후크 기능(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'});

의 대응하는 타입을 확실히 참조해 주세요.입력필

첫번째useState범용 아이유서가 됩니다.다음으로 반환되는 두 번째 구조화 요소를 전달할 경우useState디스패치를 Import해야 합니다.다음 확장 버전의 클릭 핸들러를 가진 예시를 생각해 보십시오.

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

class Form {
    id: NullNumber = null;
    name = '';

    startTime: NullString = null;
    endTime: NullString = null;

    lunchStart: NullString = null;
    lunchEnd: NullString = null;

    [key: string]: string | NullNumber;
}

export const EditDialog: React.FC = () => {
    const [form, setForm] = useState<Form>(new Form());


    const inputChange = (e: ChangeEvent<HTMLInputElement>) => {
        const element = e.target;
        setForm((form: Form) => {
            form[element.name] = element.value;
            return form;
        })
    }
    return (
        <Box pt={3}>
            <TextField
                required
                name="name"
                label="Наименование"
                defaultValue={form.name}
                onChange={inputChange}
                fullWidth
            />
        </Box>
    );
}

언급URL : https://stackoverflow.com/questions/53650468/set-types-on-usestate-react-hook-with-typescript