初始 state 作为 React 中的 object

Question

I have a following state in React:

interface A {
   foo: string;
}

const [val, setVal] = useState<A>({});
                              // ^^^ error

However Im getting error that Im missing foo in the initial state. But I dont have any initial value for foo field.

What is the proper way to handle it?

useState<Partial<A>>({});

or 

useState<A>({} as A);

or make `foo` optional?

useState<{ foo?: string }>({});

What is the correct fix for such situation?

Answer 1

I think this solution is good:

useState<{ foo?: string }>({});

Other solution is:

interface A {
 foo: string;
}

const [val, setVal] = useState<A>({ foo: '' });

Answer 2

You have 3 options to fix your issue.

1. Make the foo property optional:

interface A {
   foo?: string;
}

const [val, setVal] = useState<A>({});

2. Initialize your object with empty string:

interface A {
   foo: string;
}

const [val, setVal] = useState<A>({ foo: '' });

3. Change the type of your state:

interface A {
   foo: string;
}

const [val, setVal] = useState<A | undefined>();

Answer 3

If you want to handle undefined initial state then use undefined .

interface A {
   foo: string;
}

const [val, setVal] = useState<A | undefined>();

Then you have a good chance to handle undefined inside your component. You also get help from your IDE.

Answer 4

I think this is property of typescript and if val state is using A interface it must have foo property with string value if its possible for your code to have initial foo value it would be better to add it like this:

useState<A>({
  foo:''
})

if not, my suggestion is using this syntax:

useState<A | undefined>()

Answer 5

The answer is, it depends on how your app should work. Take a look at possible solutions and decide which is fitting your logic or app context

https://www.typescriptlang.org/play?ssl=43&ssc=11&pln=44&pc=20#code/JYWwDg9gTgLgBAJQKYEMDGMA0BvArgZyQGUYUYkBfOAMyghDgHIpUNGAod4AO3KmvRI4AQTjZ2cSTQgQAXHHwwoPAOYBudhU4B6bXCIQANrhjAI3OAEY4Ad2AwAFnDQEY9ODACeYJCtwooABN2alxuDDMLYHxhADkIGABRcC8AChR5UQAfMQoASnkUOGiRMQkpFhhcKAt0uBR8ETyAOmoZOABCAF4uuDDApGoeJECNLXY0c0URMDA4XtS8roA+cSlnKfgAbRRMQhhhAF0ugmJScgAebNzl1Ox8jXXdDe5pnb2kA+PTkjIkK9u93qjWEeTUcAAIuZGPBTsDCLBInAAEZINAoOH2ZwoCyGVCBDwQYr4fC4JCNaAo3AqfCYPrheggJC8DYDercAmEISOMj1VrtQzDKwATmJcAgAGsqfAseiLKi4EgUp5xaiAFYYTjrSrVbipcrrSQXZYGw3rbDROIJZJgNIoPJwABkjr5bQgWjNZuwKH57tN6wu2hN6zymh0egMxlM5jgACZbPYnNxcIZDOKoPSBkNuCMJpsZmB4wslqtTc9Jq9trt9kcToRfpdrsnU7dm4YwaaK29q59az9zv9rv1BsNArdh9mRh3TTqavrPXBjf7Pd6nS6fW6PZ7A8GpKHxs9IyYkQBmOAASW4WLAdB8sBVdkccCzGMM8AAbihjEg85WC2fixWNYpC7KsPi+Oszj+AE7mXSQ3XkRgIUGDEYDTT9v2kDM3Q4dYHi1CpPl1edt13BdJG9X0tzNHdTX3TgeD4AQ0CEYRRGA+CZAAfnkRRlG4dQw3YQ8jGPGMzwAWRQCUhAgW1Ii-aQiRvOSkHvYpqGKGBGEadAqi-QwVTk6NuC-X9pmEWYABZ5jgRYgM7fN3hrb56wHK5hEBfCZyIuc4MXMjyMot1Oh6TMRxzAl nVdGRqMNWiQzDIA