Definitelytyped: [@types/react]는 유형이 안전한 동적 키 이름으로 setState를 사용할 수 없습니다.

이것은 컴파일러 자체의 한계입니다. 계산된 속성 키를 통해 유추된 유형은 공용체 유형을 지원하지 않으며 string , number , symbol 또는 이들 중 하나의 리터럴만 지원합니다. 3, 그 중 하나의 조합임을 감지하면 일반 string 유형으로 강제 변환합니다. 여기서 해결 방법은 개체를 강제 변환하는 것입니다.

dynSetState(key: StateKeys, value: string) {
  this.setState({
    [key]: value
  } as Pick<State, keyof State>)
}

값이 가능한 속성 값 유형 집합에 없으면 여전히 적절하게 오류가 발생하지만 키가 가능한 속성 키 집합에 없으면 오류가 발생하지 않습니다.

정확히 @ferdaber 는 이와 같은 IMHO 캐스팅이 그다지 "좋은 패턴"이 아니지만 전반적으로 클래스 외부에서 해당 콜백을 테스트하기 쉬운 순수한 테스트 기능으로 추출하는 것과 같은 모범 사례를 다시 준수하는 콜백 패턴을 통해 상태를 업데이트하는 것을 선호해야 합니다. :)

좋은:

class C extends Component<{}, State> {
  updateState(key: StateKeys, value: string) {
    this.setState((prevState) => ({
      ...prevState,
      [key]: value,
    }));
  }
}

더 나은:

const updateState = <T extends string>(key: keyof State, value: T) => (
  prevState: State
): State => ({
  ...prevState,
  [key]: value
})

class C extends Component<{}, State> {
  doSomething(){
    this.setState(updateState('password','123124'))
  }
}

typescript repo에서 이 제한에 대한 관련 문제를 찾지 못했습니다. 이것이 typescript repo에서 논의되었는지(그리고 어디에서) 알 수 있습니까? 기본적으로 향후 typescript 버전에서 이 문제를 해결할 계획이 있는지 궁금합니다.
감사 해요!

다음은 토론, TS 팀의 디자인 노트, 수정 시도(향후 버전에서는 철회된 것으로 생각됨)입니다.
https://github.com/Microsoft/TypeScript/issues/13948
https://github.com/Microsoft/TypeScript/issues/18155
https://github.com/Microsoft/TypeScript/pull/21070

실제로 내가 달성하려는 것은 다음과 같은 작업을 수행하는 것입니다. https://reactjs.org/docs/forms.html#handling -multiple-inputs
그러면 여러 입력이 있는 양식을 더 쉽게 처리할 수 있습니다. "name" 속성이 우리가 기대하는 것과 같은지 확인해야 할 수도 있지만 그 후에는 유형 안전성이 작동해야 합니다.

@ferdaber 의 솔루션에 as unknown 를 추가해야 했습니다.

  this.setState({
    [key]: value
  } as unknown as Pick<State, keyof State>)

key 가 부울이면 경고하지만 숫자이면 경고하지 않습니다!

그래서 저는 이 더 짧은 솔루션을 선택했습니다.

  this.setState<never>({
    [key]: value
  })

key 가 부울 또는 숫자인 경우 경고합니다.

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26635#issuecomment -400260278이 작동하는 이유는 무엇입니까? 내 말은 키가 여전히 유니온 유형이라는 뜻인가요?

이것이 당신을 도울 것입니다

type IAction = {
  [P in keyof IAppSettings]?: IAppSettings[P];
};

function reducer(state: IAppSettings, action: IAction) {
  return {
    ...state,
    ...action,
  };
}

이 문제에 진전이 있습니까?

나는 이것을 작동시킬 수 있었다

handleTextChange(name: keyof State, value: any) {
    this.setState({
        ...this.state,
        [name]: value
    });
}

이것을 보고 자신의 상태 유형에 적용하려는 다른 사람들을 위해 원본 게시물 및 응답의 value 유형은 State 모든 속성 유형 때문에 string 에 State 는 string 입니다. 다른 유형이 포함될 때 any 또는 추가 캐스팅을 사용하는 것을 피하고 대신 value 유형이 키 유형과 일치하는 유형에 해당하도록 유형을 제한하는 것이 좋습니다.

interface State {
  name: string;
  age: number;
}
type StateKeys = keyof State;
function dynSetState<K extends StateKeys>(key: K, value: State[K]) {
  this.setState({ [key]: value }); // fails; if only this worked...
  this.setState({ [key]: value } as Pick<State, K>); // clean cast works
  this.setState((s, _) => ({ ...s, [key]: value })); // avoids cast, but changes js
}
dynSetState("name", "a"); // works as expected
dynSetState("name", 1); // fails as expected
dynSetState("age", "a"); // fails as expected
dynSetState("age", 1); // works as expected

#26635(댓글)이 작동하는 이유는 무엇입니까? 내 말은 키가 여전히 유니온 유형이라는 뜻인가요?

의 종류 때문에 작동 { ...prevState } 충분히 일치 State 우리가 국가의 최소한 모든 속성이 기본적으로 있기 때문에. 그것 없이는 _작동하지 않는_ 이유를 이해하는 데 도움이 될 수 있습니다. 문제의 근본 원인은 생성된 개체의 유형입니다. { [key: K]: State[K] } 가 충분히 구체적이지 않습니다. 그것은이다 { [x: string]: State[K] } 키 캐스팅 할 수없는 string A를 keyof State .

다른 예로 @arinwt에 추가하기만 하면 됩니다.

TL;DR: 하단의 최종 솔루션

콘솔 오류가 있는 확장된 솔루션:

type RegisterTypes = {
    email: string;
    password: string;
}

// ...

const [state, setState] = useState<RegisterTypes>({
    email: "",
    password: "",
});

// ...

const onChangeInput = (key: keyof RegisterTypes) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
        [key]: event.target.value
    } as Pick<RegisterTypes, typeof key>);
};

// ...

<input type="email" onChange={onChangeInput('email')} value={state.email} />

이것은 콘솔에서 다음과 같은 오류를 제공하지만:

Warning: A component is changing a controlled input of type password to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

콘솔 오류가 있는 대체 솔루션(속임수):

경고도 해준다.

type RegisterTypes = {
    [key: string]: string;
}

// ...

const onChangeInput = (key: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
        [key]: event.target.value
    });
};

최종 솔루션 오류 없음:

type RegisterTypes = {
    email: string;
    password: string;
}

// ...

const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newState = { ...state };
    newState[event.target.name as keyof RegisterTypes] = event.target.value;
    setState(newState);
};

// ...

<input name="email" type="email" onChange={onChangeInput} value={state.email} />