question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

setState typescript signature is too restrictive.

See original GitHub issue

The typescript signature of setState is too restrictive, since it assumes it’s parameter must be exactly the type of the component’s StateType type parameter.

TypeScript has a builtin type Partial<T> that has the same type as T, but with all properties forced to be optional defined as:

type Partial<T> = {
    [P in keyof T]?: T[P];
}

And define the signature of setState to be setState(state: Partial<StateType>, opts?: any).

I’ll PR this in when I have a moment!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
Avol-Vcommented, Jan 1, 2017

Also have the same problem.

If I describe my State as strong set of options:

interface MyState
{
	option1: string;
	option2: string[];
}

I can’t set only one option in set:

this.setState(
	{option1: 'Hello'}, // Error: Property 'option2' is missing
);

But if I mark options with ?:

interface MyState
{
	option1?: string;
	option2?: string[];
}

I have another problem – TypeScript think that options can be undefined (but I set them in constructor):

const option2 = [...this.state.option2, 'new']; // Error

So wating for

setState(state: Partial<StateType>, opts?: any): void;
1reaction
ericandersoncommented, Jan 11, 2017

After TS 2.1.5 comes out, we should be able to merge the react changes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript Custom useStateIfMounted React Hook - Not all ...
The hook is fine, but the caller gets the error when trying to call setState(). How should I type the useCallback() so I...
Read more >
React state meets Typescript's Union type - Level Up Coding
If you're not familiar with it, the Union type is the basic Typescript tool we use to describe a value that is “one...
Read more >
Useful Patterns by Use Case - React TypeScript Cheatsheets
When a component can render differently based on their props, it's similar to how a function can be overloaded to have multiple call...
Read more >
Freshness - TypeScript Deep Dive - Gitbook
TypeScript provides a concept of Freshness (also called strict object literal checking) to make it easier to type check object literals that would...
Read more >
React and TypeScript: `useState` Hook - Educative.io
In order to fix this issue, we need to pass a type argument to setState . We treat pill as text in JSX,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found