Definitelytyped: [@ types / response] не может установить состояние с именем динамического ключа, безопасное для типов

Это ограничение самого компилятора, типы, выведенные с помощью вычисленных ключей свойств, не поддерживают типы объединения, он поддерживает только 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'))
  }
}

Я не нашел связанной проблемы с этим ограничением в репозитории машинописного текста. Есть ли шанс, что вы знаете, обсуждалось ли это (и где) в репозитории машинописного текста? В основном интересно, есть ли какие-то планы решить эту проблему в будущих версиях машинописного текста.
Спасибо!

Вот обсуждение, примечания по дизайну от команды 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 - это то, что мы ожидаем, но после этого безопасность типов должна работать.

Мне пришлось добавить as unknown решение @ferdaber :

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

Это предупреждает, если key было логическим, но не числом!

Поэтому я выбрал это более короткое решение:

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

Это предупреждает, является ли key логическим или числом.

Почему https://github.com/DefinitiTyped/DefinitiTyped/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 в исходном сообщении и ответах равен только 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 в keyof State .

Просто добавлю в

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