यह तो दिलचस्प है। मुझे आंशिक रूप से वापस रोल करने और परिवर्तन के हिस्से को चुनने में खुशी हो रही है

मैं कहूंगा कि आप जो रिपोर्ट करते हैं वह TS में एक बग की तरह लगता है, विशेष रूप से:

टाइप करें '{बेसप्रॉप: "फोबार"; }' 'आंशिक' टाइप करने के लिए असाइन करने योग्य नहीं है

ठीक है। हो सकता है कि TS को पता न चले कि क्या हो रहा है क्योंकि S और बेसप्रॉप के बीच कोई संबंध नहीं है।

कोई एक एस पास कर सकता है जो टाइप { बेसप्रॉप: नंबर } है, जिस स्थिति में यह सही है कि आप बेसप्रॉप को एक स्ट्रिंग असाइन नहीं कर सकते।

शायद अगर एस ने बेसप्रॉप संस्करण बढ़ाया?

मैंने पहले ऐसा कुछ करने की कोशिश की थी:

interface BaseState_t
{
    baseProp: string
}

export abstract class ComponentBaseClass<P, S extends BaseState_t> extends React.Component<P, S >
{
    foo()
    {
        this.state.baseProp;
        this.setState( { baseProp: 'foobar' } );
    }
}

जबकि पहुंच ठीक है, सेटस्टेट कॉल में एक ही त्रुटि है:

प्रकार का तर्क '{बेसप्रॉप: "फोबार"; }' प्रकार के पैरामीटर के लिए असाइन करने योग्य नहीं है '((prevState: Readonly\ , props \ ) |
}' 'चुनें और आंशिक ' टाइप करने के लिए असाइन करने योग्य नहीं है टाइप करें '{बेसप्रॉप: "फोबार";

यह शायद इसे संरचित करने का एक अच्छा तरीका नहीं है - आखिरकार, कुछ बाल वर्ग राज्य चर घोषित कर सकते हैं जो बेस क्लास पर चर के साथ टकराते हैं। तो टाइपस्क्रिप्ट शिकायत करने के लिए सही हो सकता है कि यह सुनिश्चित नहीं हो सकता कि वहां क्या होने जा रहा है। यह अजीब है कि हालांकि उन प्रॉप्स तक पहुंचने में कोई समस्या नहीं है।

हम्म। यह निश्चित रूप से अब टीएस में एक बग की तरह लगता है।

मैं आज इसके साथ खेलूंगा और संभवत: और आंशिक निकालूंगा।

मैं इसे एक परीक्षण मामले के रूप में भी जोड़ूंगा और इंटेलिजेंस को खुश करने के लिए एक और विचार का प्रयास करूंगा

नमस्ते,
वही समस्या है...

export interface ISomeComponent {
    field1: string;
    field2: string;
}

interface SomeComponentState {
    field: string;
}

export class SomeComponent<
    TProps extends ISomeComponent = ISomeComponent,
    TState extends SomeComponentState = SomeComponentState> extends React.Component<TProps, TState>{

    doSomething() {
        this.setState({ field: 'test' });
    }

    render() {
        return (
            <div onClick={this.doSomething.bind(this)}>
                {this.state.field}
            </div>
        );
    }
}

सेटस्टेट में त्रुटि:
TS2345 (TS) Argument of type '{ field: "test"; }' is not assignable to parameter of type '((prevState: Readonly<TState>, props: TProps) => Pick<TState, "field"> & Partial<TState>) | (Pick...'. Type '{ field: "test"; }' is not assignable to type 'Pick<TState, "field"> & Partial<TState>'. Type '{ field: "test"; }' is not assignable to type 'Partial<TState>'.

इस परिवर्तन के बाद ही त्रुटि होने लगी। संस्करण 16.0.10 में इसने ठीक काम किया।

टाइपस्क्रिप्ट में कई संबंधित मुद्दे हैं, उन्होंने उन्हें डिज़ाइन के अनुसार काम करने के लिए बंद कर दिया है:

https://github.com/Microsoft/TypeScript/issues/19388

मैंने यहां कुछ उदाहरणों का सार दिया है: https://gist.github.com/afarnsworth-valve/93d1096d1410b0f2efb2c94f86de9c84

हालांकि व्यवहार अभी भी अजीब लगता है। विशेष रूप से, आप बिना कास्ट के बेस क्लास के रूप में टाइप किए गए वेरिएबल को असाइन कर सकते हैं, और फिर बिना किसी समस्या के उसी कॉल को कर सकते हैं। ऐसा लगता है कि

आप लोग नहीं भूले हैं। जल्द ही ठीक कर देंगे

संदर्भित पीआर को इस मुद्दे को हल करना चाहिए। मैंने ऐसे परीक्षण भी जोड़े जो इस बढ़त के मामले को फिर से तोड़ने से बचाना चाहिए।

@ericanderson त्वरित प्रतिक्रिया के लिए धन्यवाद :)

क्या नए फ़िक्सेस की कोई सीमाएँ/नकारात्मक पहलू हैं?

कोई भी नहीं जो मुझे वर्तमान में पता है। मैं इंटेलिजेंस रखने में सक्षम था (वास्तव में पहले से बेहतर, क्योंकि यह कुछ किनारे के मामलों को हल करता है)।

विस्तृत करने के लिए, & Partial<S> समाधान संभावित पैरा को प्रकट करने के लिए इंटेलिजेंस को चकमा देना था, लेकिन ऐसा यह बताते हुए किया गया कि वे X | undefined । यह निश्चित रूप से संकलित करने में विफल होगा लेकिन यह थोड़ा भ्रमित करने वाला था। | S करना इंटेलिजेंस को ठीक करता है ताकि यह सभी सही पैरा का सुझाव दे और अब यह झूठा प्रकार नहीं दिखाता है।

मैं जोड़ने में देख कोशिश की null से एक संभावित वापसी मान के रूप में setState कॉलबैक (आप राज्य के लिए तुम नहीं लौट सकते हैं क्या, किसी भी राज्य को बदलने के लिए बनाने के बिना चाहते हैं return; मान्य भी है), लेकिन इसके बजाय टाइप अनुमान को पूरी तरह से छोड़ दें और कुंजी के रूप में never चुनें

अभी के लिए, कॉलबैक में जहां मैं वास्तव में अद्यतन स्थिति को छोड़ना चाहता हूं, मैं return null! का उपयोग कर रहा हूं। इस रिटर्न का never प्रकार टाइपस्क्रिप्ट को सामान्य प्रकार के अनुमान के लिए रिटर्न की उपेक्षा करता है।

हाय दोस्तों...

आखिरी कमिटमेंट ने मेरी समस्या को ठीक कर दिया।
तुरंत प्रतिसाद के लिए धन्यवाद :)

किस संस्करण में फिक्स है? क्या यह npm पर प्रकाशित हुआ है? मैं उस मामले को मार रहा हूं जहां सेटस्टेट का कॉलबैक संस्करण मुझे बता रहा है कि वापसी मूल्य में एक संपत्ति मेल नहीं है, जैसे @UselessPickles मिला।

नवीनतम @types/react . पर अच्छा होना चाहिए

मैंने इसे १५ और १६ श्रृंखला के लिए तय किया

import produce from 'immer';

interface IComponentState
{
    numberList: number[];
}

export class HomeComponent extends React.Component<ComponentProps, IComponentState>

प्रतिक्रिया की पुरानी प्रकार की परिभाषा ..

// We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
// See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
// Also, the ` | S` allows intellisense to not be dumbisense
setState<K extends keyof S>(
    state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> | S)) | (Pick<S, K> | S),
    callback?: () => void
): void;

.. यह त्रुटि उत्पन्न करता है:

मैंने इस सुझाव की कोशिश की:

setState<K extends keyof S>(
    state:
        ((prevState: Readonly<S>, props: P) => (Partial<S> & Pick<S, K>))
        | (Partial<S> & Pick<S, K>),
    callback?: () => any
): void;

इंटेलिसेंस अब रिएक्ट की स्थिति से संपत्ति को समझ सकता है। हालाँकि, संवेदी संपत्ति को अब possibly undefined रूप में माना जाता है।

अशक्त अभिकथन ऑपरेटर का उपयोग करना होगा, भले ही संख्यासूची अपरिभाषित नहीं है और न ही अशक्त है:

जब तक टाइप सेंसिंग में सुधार नहीं हो जाता, तब तक मैं पुराने प्रकार की परिभाषा पर बना रहूंगा। इस बीच, मैं स्पष्ट रूप से इमर उत्पादन के सामान्य पैरामीटर के प्रकार को स्पष्ट रूप से बताऊंगा। produce<IComponentState> list! तुलना में तर्क करना आसान है।

आपकी पहली त्रुटि इसलिए है क्योंकि आप कुछ भी वापस नहीं कर रहे हैं। ऐसा नहीं है कि सेटस्टेट कैसे काम करता है।

यह तब भी काम करता है जब उत्पादन में एक चर वापस नहीं किया जाता है। मैंने यहां उदाहरण का अनुसरण किया है (गैर-टाइपस्क्रिप्ट):

https://github.com/mweststrate/immer

onBirthDayClick2 = () => {
    this.setState(
        produce(draft => {
            draft.user.age += 1
            // no need to return draft
        })
    )
}

टाइपस्क्रिप्ट को उस कोड को चलाने में सक्षम होने से रोकने वाली एकमात्र चीज यह है कि रिएक्ट प्रकार परिभाषा से गलत तरीके से अनुमानित प्रकार है। प्रकार की परिभाषा numberList does not exist on type Pick<IComponentState, never> त्रुटि की रिपोर्ट करती है। उत्पादन के सामान्य पैरामीटर, यानी produce<IComponentState> पर प्रकार को स्पष्ट रूप से पास करके संकलित त्रुटि को समाप्त करने में सक्षम है।

मैंने वेरिएबल को उत्पादन में वापस करने की भी कोशिश की और देखें कि क्या यह रिएक्ट प्रकार की परिभाषा को प्रकार (एक चिक-एंड-एग समस्या) का अनुमान लगाने में मदद करेगा, लेकिन फिर भी राज्य के सही प्रकार का पता लगाने के लिए रिएक्ट प्रकार की परिभाषा के लिए कोई रास्ता नहीं है। इसलिए ड्राफ्ट के लिए इंटेलिजेंस प्रदर्शित नहीं हो रहा है:

या शायद मुझे कंपाइलर से गलत उम्मीद है :) कंपाइलर सेटस्टेट के प्रकार के आधार पर ड्राफ्ट वेरिएबल के लिए एक प्रकार नहीं बना सकता है क्योंकि कंपाइलर कोड को अंदर से बाहर प्रोसेस करता है। हालाँकि, सुझाई गई प्रकार की परिभाषा ने किसी तरह मुझे यह सोचने पर मजबूर कर दिया कि संकलक बाहर से कोड को संसाधित कर सकता है, कि वह बाहरी कोड ( setState ) से आंतरिक कोड ( produce ) में सबसे अच्छा प्रकार चुन सकता है।

setState<K extends keyof S>(
    state:
        ((prevState: Readonly<S>, props: P) => (Partial<S> & Pick<S, K>))
        | (Partial<S> & Pick<S, K>),
    callback?: () => any
): void;

उपरोक्त प्रकार की परिभाषा के साथ, संकलक यह पता लगा सकता है कि मसौदे में numberList संपत्ति है। हालांकि यह इसे possibly undefined पहचानता है:

आगे की छेड़छाड़ पर, मैंने सेटस्टेट की प्रकार परिभाषा में S जोड़कर राज्य के प्रकार को उत्पादन के मसौदे में पारित करने में सक्षम बनाया:

setState<K extends keyof S>(
    state:
        ((prevState: Readonly<S>, props: P) => (Partial<S> & Pick<S, K> & S))
        | (Partial<S> & Pick<S, K>),
    callback?: () => any
): void;

कोड अब संकलित हो रहा है :)

आपकी त्रुटि सेटस्टेट के साथ नहीं है, आपकी त्रुटि उत्पादन के अंदर है। उत्पादन के लिए आपकी प्रकार की परिभाषा क्या है?

उपरोक्त मेरे पीआर में निश्चित रूप से टाइप की गई टेस्ट स्क्रिप्ट पर त्रुटि है, मैंने स्थानीय रूप से परीक्षण नहीं किया। इसलिए मैं अभी स्थानीय रूप से इसका परीक्षण कर रहा हूं।

यहाँ इमर/उत्पादन प्रकार की परिभाषा है।

/**
 * Immer takes a state, and runs a function against it.
 * That function can freely mutate the state, as it will create copies-on-write.
 * This means that the original state will stay unchanged, and once the function finishes, the modified state is returned.
 *
 * If the first argument is a function, this is interpreted as the recipe, and will create a curried function that will execute the recipe
 * any time it is called with the current state.
 *
 * <strong i="7">@param</strong> currentState - the state to start with
 * <strong i="8">@param</strong> recipe - function that receives a proxy of the current state as first argument and which can be freely modified
 * <strong i="9">@param</strong> initialState - if a curried function is created and this argument was given, it will be used as fallback if the curried function is called with a state of undefined
 * <strong i="10">@returns</strong> The next state: a new state, or the current state if nothing was modified
 */
export default function<S = any>(
    currentState: S,
    recipe: (this: S, draftState: S) => void | S
): S

// curried invocations with default initial state
// 0 additional arguments
export default function<S = any>(
    recipe: (this: S, draftState: S) => void | S,
    initialState: S
): (currentState: S | undefined) => S
// 1 additional argument of type A
export default function<S = any, A = any>(
    recipe: (this: S, draftState: S, a: A) => void | S,
    initialState: S
): (currentState: S | undefined, a: A) => S
// 2 additional arguments of types A and B
export default function<S = any, A = any, B = any>(
    recipe: (this: S, draftState: S, a: A, b: B) => void | S,
    initialState: S
): (currentState: S | undefined, a: A, b: B) => S
// 3 additional arguments of types A, B and C
export default function<S = any, A = any, B = any, C = any>(
    recipe: (this: S, draftState: S, a: A, b: B, c: C) => void | S,
    initialState: S
): (currentState: S | undefined, a: A, b: B, c: C) => S
// any number of additional arguments, but with loss of type safety
// this may be alleviated if "variadic kinds" makes it into Typescript:
// https://github.com/Microsoft/TypeScript/issues/5453
export default function<S = any>(
    recipe: (this: S, draftState: S, ...extraArgs: any[]) => void | S,
    initialState: S
): (currentState: S | undefined, ...extraArgs: any[]) => S

// curried invocations without default initial state
// 0 additional arguments
export default function<S = any>(
    recipe: (this: S, draftState: S) => void | S
): (currentState: S) => S
// 1 additional argument of type A
export default function<S = any, A = any>(
    recipe: (this: S, draftState: S, a: A) => void | S
): (currentState: S, a: A) => S
// 2 additional arguments of types A and B
export default function<S = any, A = any, B = any>(
    recipe: (this: S, draftState: S, a: A, b: B) => void | S
): (currentState: S, a: A, b: B) => S
// 3 additional arguments of types A, B and C
export default function<S = any, A = any, B = any, C = any>(
    recipe: (this: S, draftState: S, a: A, b: B, c: C) => void | S
): (currentState: S, a: A, b: B, c: C) => S
// any number of additional arguments, but with loss of type safety
// this may be alleviated if "variadic kinds" makes it into Typescript:
// https://github.com/Microsoft/TypeScript/issues/5453
export default function<S = any>(
    recipe: (this: S, draftState: S, ...extraArgs: any[]) => void | S
): (currentState: S, ...extraArgs: any[]) => S
/**
 * Automatically freezes any state trees generated by immer.
 * This protects against accidental modifications of the state tree outside of an immer function.
 * This comes with a performance impact, so it is recommended to disable this option in production.
 * It is by default enabled.
 */
export function setAutoFreeze(autoFreeze: boolean): void

/**
 * Manually override whether proxies should be used.
 * By default done by using feature detection
 */
export function setUseProxies(useProxies: boolean): void

@ericanderson क्या आप मुझे क्यों के बारे में चर्चा को इंगित कर सकता है Pick के बजाय प्रयोग किया जाता है Partial ? यह मुझे घंटों दुःख दे रहा है (सादे setState(obj) का उपयोग करके, कॉलबैक संस्करण नहीं), और अभी के लिए मैं एक वर्कअराउंड के रूप में this.setState(newState as State) साथ जा रहा हूं। मैं सिर्फ यह समझना चाहता हूं कि इसे क्यों बदला गया, क्योंकि मुझे कुछ याद आ रहा होगा।

हैलो @ericanderson ,

मुझे नवीनतम परिभाषा के साथ कुछ समस्या है।

मेरा उपयोग मामला संक्षेप में इस प्रकार है:

interface AppState {
  valueA: string;
  valueB: string;
  // ... something else
} 
export default class App extends React.Component <{}, AppState> {
  onValueAChange (e:React.ChangeEvent<HTMLInputElement>) {
    const newState: Partial<AppState> = {valueA: e.target.value}
    if (this.shouldUpdateValueB()) {
      newState.valueB = e.target.value;
    }
    this.setState(newState); // <-- this leads to a compiling error
  }
  // ... other methods
}

त्रुटि संदेश इस प्रकार है:

Argument of type 'Partial<AppState>' is not assignable to parameter of type 'AppState | ((prevState: Readonly<AppState>, props: {}) => AppState | Pick<AppState, "valueA" | "v...'.
  Type 'Partial<AppState>' is not assignable to type 'Pick<AppState, "valueA" | "valueB" | "somethingElse">'.
    Types of property 'valueA' are incompatible.
      Type 'string | undefined' is not assignable to type 'string'.
        Type 'undefined' is not assignable to type 'string'.

ऐसा लगता है कि Partial<AppState> setState के हस्ताक्षर के साथ संगत नहीं है। निश्चित रूप से मैं इसे प्रकार के दावे द्वारा हल कर सकता हूं जैसे

this.setState(newState as Pick<AppState, 'valueA' | 'valueB'>)

लेकिन यह आदर्श नहीं है, क्योंकि:
१) यह वाक्य-विन्यास बहुत क्रियात्मक है
2) सबसे महत्वपूर्ण बात यह है कि टाइप अभिकथन मेरे वास्तविक डेटा का उल्लंघन कर सकता है। उदाहरण के लिए, newState as Pick<AppState, 'somethingElse'> भी चेक पास करता है, हालांकि यह मेरे डेटा में फिट नहीं बैठता है।

मुझे लगता है आंशिकपिक के साथ किसी तरह संगत होना चाहिए, आंशिक के बाद सेबस टी से चाबियों की अनिश्चित संख्या चुनता है। मुझे यकीन नहीं है कि मेरी समझ सटीक है। वैसे भी मेरे दृष्टिकोण से आदर्श उपयोग यह होना चाहिए कि मैं आंशिक टाइप किए गए चर को पास कर सकूंसीधे सेटस्टेट में।

क्या आप कृपया मेरे सुझाव पर विचार कर सकते हैं या यदि कोई है तो मेरी गलतफहमी को इंगित कर सकते हैं? शुक्रिया!

यह वास्तव में सबसे पुराना बदलाव है। तो जब तक किसी और ने इसे हाल ही में नहीं बदला है, आप शायद गलत पेड़ को भौंक रहे हैं।

ने कहा कि। आंशिक अपरिभाषित मूल्यों की अनुमति देता है।

कास्ट ए: आंशिक <{foo: स्ट्रिंग}> = {फू: अपरिभाषित}

a मान्य है लेकिन स्पष्ट रूप से आपके राज्य में उस अद्यतन का परिणाम आपके राज्य को foo अपरिभाषित होने के बावजूद रखता है, भले ही आपने घोषित किया कि यह असंभव है।

इसलिए एक आंशिक एक पिक के लिए आबंटित नहीं है। और यह सुनिश्चित करने के लिए कि आपके प्रकार झूठ नहीं बोलते हैं, पिक सही उत्तर है

मुझे लगता है कि अनुमति नहीं दे रहा है:

setState((prevState) => {
  if (prevState.xyz) {
    return { foo: "" };
  }
  return { bar: "" };
});

अति प्रतिबंधात्मक है।

@ कोवेन्स्की का

क्या इसका समर्थन करने के लिए कुछ भी किया जा सकता है (मैं कहूंगा) काफी सामान्य पैटर्न?

केवल एक चीज जो की जा सकती है वह है टाइपसेफ्टी को हटाना

क्या कोई Pick<S, K> | S | null के तर्क की व्याख्या कर सकता है?

        setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;

टीबीएच मैं अब भी नहीं जानता कि क्यों ऊपर हस्ताक्षर आंशिक राज्य अपडेट के लिए भी काम करता है क्योंकि K को keyof S रूप में परिभाषित किया गया है, इसलिए Pick<S, K> अनिवार्य रूप से S फिर से बनाता है?

Partial<S> | null भी काम नहीं करना चाहिए?

        setState(
            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Partial<S> | null)) | (Partial<S> | null),
            callback?: () => void
        ): void;

क्या कोई समझा सकता है...

यह स्पष्ट रूप से कुछ उत्तरों को समझाया गया है।

setState((prevState) => {
  if (prevState.xyz) {
    return { foo: "" };
  }
  return { bar: "" };
});

अति प्रतिबंधात्मक है।

@ कोवेन्स्की का

मैंने अभी इस सटीक समस्या को मारा है, लेकिन मुझे धागे में कोवेन्स्की का कोई संदर्भ नहीं दिख रहा है (हो सकता है कि किसी ने अपना उपयोगकर्ता नाम बदल दिया हो?) क्या कोई मुझे वर्तमान में अनुशंसित वर्कअराउंड की ओर इशारा कर सकता है?

@ timrobinson33 यह टिप्पणी वर्कअराउंड की व्याख्या करती है https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment -351884578

और यह अच्छी बात है कि हमें इसके बारे में अब और चिंता करने की ज़रूरत नहीं है

@ timrobinson33 यह टिप्पणी वर्कअराउंड #१८३६५ (टिप्पणी) की व्याख्या करती है

उसके लिए बहुत बहुत धन्यवाद। अंत में मैंने सोचा कि मेरा कोड अच्छा लग रहा था क्योंकि कई छोटे सेटस्टेट कॉल उनके बाहर If स्टेटमेंट के साथ थे, भले ही इसका मतलब है कि कुछ पथ सेटस्टेट को एक से अधिक बार कॉल करेंगे।

मुझे लगता है कि यह वास्तव में समान है कि हम हुक के साथ कैसे काम करते हैं, एक राज्य को कई छोटी चीजों के रूप में देखते हैं जिन्हें हम स्वतंत्र रूप से अपडेट करते हैं।