Definitelytyped: [@ प्रकार/प्रतिक्रिया] गतिशील कुंजी नाम प्रकार-सुरक्षित के साथ सेटस्टेट नहीं कर सकता

यह संकलक की ही एक सीमा है, गणना की गई संपत्ति कुंजियों के माध्यम से अनुमानित प्रकार संघ प्रकारों का समर्थन नहीं करते हैं, यह केवल 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'))
  }
}

मुझे टाइपस्क्रिप्ट रेपो में इस सीमा के बारे में संबंधित समस्या नहीं मिली है .. किसी भी मौके पर आपको पता है कि टाइपस्क्रिप्ट रेपो में इस पर चर्चा की गई है (और कहां)? मूल रूप से सोच रहा था कि भविष्य के टाइपस्क्रिप्ट संस्करणों में इसे संबोधित करने की कुछ योजनाएं हैं या नहीं।
धन्यवाद!

यहां चर्चा है, टीएस टीम से डिजाइन नोट्स, और इसे ठीक करने का प्रयास (जो मुझे विश्वास है कि भविष्य के संस्करण के लिए वापस ले लिया गया था):
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
जिससे कई इनपुट वाले फॉर्म से निपटना आसान हो जाएगा। मुझे अभी भी यह सुनिश्चित करना पड़ सकता है कि "नाम" विशेषता वही है जो हम उम्मीद करते हैं, लेकिन उसके बाद टाइप-सुरक्षा काम करना चाहिए।

मुझे @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 मूल पोस्ट और प्रतिक्रियाओं में केवल है 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 नहीं डाल सकता है।

बस एक और उदाहरण के रूप में @arinwt को जोड़ना।

टीएल; डीआर: अंतिम समाधान तल पर

कंसोल त्रुटियों के साथ विस्तारित समाधान:

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