那很有意思。 我很高兴回滚更改的部分和选择部分

我会说您报告的内容听起来像是 TS 中的错误，具体来说：

输入 '{ baseProp: "foobar"; }' 不可分配到类型 'Partial

好吧。 也许 TS 不知道发生了什么，因为 S 和 baseProp 之间没有关系。

可以传递类型为 { baseProp:number } 的 S，在这种情况下，您不能为 baseProp 分配字符串是正确的。

也许如果 S 扩展了 baseProp 版本？

我以前尝试过这样的事情：

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' } );
    }
}

虽然访问正常，但 setState 调用有相同的错误：

'{ baseProp: "foobar"; 类型的参数 }' 不可分配给类型为 '((prevState: Readonly\ , props: P) => Pick & Partial\ ) | 的参数
}' 不可分配给类型 'Pick & Partial\ '。输入 '{ baseProp: "foobar";

这可能不是构造它的好方法 - 毕竟，某些子类可以声明与基类上的变量发生冲突的状态变量。 所以打字稿抱怨它不能确定那里会发生什么可能是正确的。 奇怪的是，访问这些道具没有问题。

唔。 这现在绝对感觉像是 TS 中的一个错误。

我今天会玩这个，可能会去掉 & Partial。

我也会将此添加为测试用例，并尝试另一个想法让智能感知快乐

你好，
同样的问题在这里...

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 版本中它运行良好。

Typescript 有几个相关的问题，他们已经按照设计的方式关闭了它们：

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

我在这里做了一些例子的要点： https :

虽然这种行为看起来仍然很奇怪。 特别是，您可以在没有强制转换的情况下分配给类型为基类的变量，然后毫无问题地进行相同的调用。 这个问题似乎表明分配和比较是两件不同的事情。

没有忘记你们。 很快就会修复

引用的 PR 应该可以解决这个问题。 我还添加了应该防止再次打破这种边缘情况的测试。

@ericanderson感谢您的快速回复:)

新修复是否有任何限制/缺点？

没有我目前知道的。 我能够保持智能感知（实际上比以前更好，因为它解决了一些边缘情况）。

详细地说， & Partial<S>解决方案是欺骗智能感知来揭示可能的参数，但它通过声明它们是X | undefined 。 这当然会无法编译，但有点令人困惑。 获取| S修复了智能感知，以便它建议所有正确的参数，现在它不会显示错误类型。

我尝试研究从setState回调中添加null作为可能的返回值（您可以返回到不想更改任何状态的状态，而无需使return;也有效），但这反而使类型推断完全放弃并选择never作为键 😢

现在，在我确实想跳过更新状态的回调中，我一直在使用return null! 。 此返回的never类型使 TypeScript 忽略泛型类型推断的返回。

嗨，大家好...

最后一次提交解决了我的问题。
感谢您及时的回复 ：）

哪个版本有修复？ 发布到 npm 了吗？ 我遇到了 setState 的回调版本告诉我返回值中存在属性不匹配的情况，就像发现的@UselessPickles一样。

应该适用于最新的@types/react

我为 15 和 16 系列修复了它

import produce from 'immer';

interface IComponentState
{
    numberList: number[];
}

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

React 的旧类型定义..

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

Intellisense 现在可以从 React 的状态感知属性。 然而，感知的属性现在被视为possibly undefined 。

即使 numberList 不是未定义也不是可空的，也必须使用空断言运算符：

我将继续使用旧的类型定义，直到类型检测得到改进。 同时，我将在 immerproduce 的泛型参数上明确说明类型。 produce<IComponentState>比list!更容易推理。

你的第一个错误是因为你没有返回任何东西。 这不是 setState 的工作方式。

即使在生产中没有返回变量，它也能工作。 我只是按照这里的例子（非 TypeScript）：

https://github.com/mweststrate/immer

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

阻止 TypeScript 运行该代码的唯一原因是它从 React 类型定义中错误地推断出类型。 类型定义报告numberList does not exist on type Pick<IComponentState, never> 。 能够通过在生产的泛型参数上显式传递类型来消除编译错误，即produce<IComponentState> 。

我什至尝试在 generate 中返回变量，看看它是否有助于 React 类型定义推断类型（尽管这是一个鸡和蛋的问题），但是 React 类型定义仍然无法检测状态的正确类型。 因此草稿的智能感知没有出现：

或者也许我对编译器有错误的期望:) 编译器无法根据 setState 的类型为草稿变量创建类型，因为编译器从内到外处理代码。 然而，建议的类型定义不知何故让我认为编译器可以从外到内处理代码，它可以选择它可以从外部代码（ 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 的类型定义，使编译器能够将状态的类型传递给生成的草稿：

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;

代码现在正在编译:)

您的错误与 setState 无关，您的错误在产品内部。 您对产品的类型定义是什么？

我上面的 PR 在绝对类型的测试脚本上有错误，我没有在本地测试。 所以我现在在本地测试它。

这是 immer/produce 类型定义。

/**
 * 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'>)

但这并不理想，因为：
1) 这种语法非常冗长
2）更重要的是，类型断言可能会违反我的实际数据。 例如， newState as Pick<AppState, 'somethingElse'>也通过了检查，尽管它不适合我的数据。

我认为部分应该以某种方式与 Pick 兼容, 由于部分只是从 T 中选择不确定数量的键。我不确定我的理解是否准确。 无论如何，从我的角度来看，理想的用法应该是我可以传递类型为 Partial 的变量直接进入setState。

您能否考虑一下我的建议或指出我的误解（如果有）？ 谢谢！

首先这是一个非常古老的变化。 因此，除非其他人最近更改了这一点，否则您可能会找错树。

那说。 部分允许未定义的值。

const a : Partial<{foo: string}> = { foo: undefined }

a 是有效的，但很明显，更新到您的状态的结果会使您的状态 foo 未定义，即使您声明这是不可能的。

因此部分不能分配给选择。 Pick 是确保您的类型不会说谎的正确答案

我觉得不允许：

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

是超级限制。

@Kovensky的解决方法是我所知道的唯一明智的解决方法，但编写起来仍然很痛苦。

有什么可以做来支持这种（我会说）相当常见的模式吗？

唯一可以做的就是删除类型安全

有人可以解释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;

Tbh 我什至不知道为什么上面的签名甚至适用于部分状态更新，因为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: "" };
});

是超级限制。

@Kovensky的解决方法是我所知道的唯一明智的解决方法，但编写起来仍然很痛苦。

我刚刚遇到了这个确切的问题，但我在线程中看不到任何对 Kovensky 的引用（也许有人更改了他们的用户名？）。 谁能指出我目前推荐的解决方法

@timrobinson33此评论解释了解决方法https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment -351884578

这是一件好事，我们不必再用钩子担心这个了🙂

@timrobinson33此评论解释了解决方法#18365（评论）

非常感谢。 最后，我认为我的代码看起来更好，因为几个小的 setState 调用在它们之外带有If语句，即使这意味着某些路径将多次调用 setState。

我想这实际上类似于我们如何使用钩子，将状态视为我们独立更新的几个小事情。