Typing a Partial-but-without-undefined-values type

[jovial parcel]

In react, setState() accepts a partial object of the state - the keys are optional. Unlike typescript's Partial though, the values shouldn't be undefined - if the keys are present, their values must match those in the State type.
Can anyone suggest a better type for my stateUpdate variable here? https://www.typescriptlang.org/play/?#code/C4TwDgpgBAysCGxoF4oG8BQUoDMD2eAXFAHYCuAtgEYQBOA3FlFfLcQM7C0CWJA5owC+GACYQAxgBtW0HGRLjg3PCSjsIwOIggAeANJQIADyQkR7KAGsIIPDlgIkAPgAUnbcRcAFbuMs6tJAAaKD0nAEpw4gA3PG4RRgx1TUcIFzRcAmIARihBcMZkwLSMljYoAHIACwhJSTwKvIKsAHoWqAABYHYAWmNIRT7aWjxaJI1i9OZWHKbGKDbO7r6jAeAhkbGi1Kmy4nkxHF4IETmMc8kNNVSAVTARDygvViV4SQDUp3psRZ0e-6gAHUqogKhZ4MwNEhaFBQJBMjDgFVuOwAPznbj2FwAWUQVQAdLR4GY8BQXOEoE4oAAGfEAVgpmGw7iQdweSCgqAy+CIUFywkEhkk6nQTBZEDZ2k56Gm5WqtXqjQF4xS2jct3u2maQA

[balmy roost]

@jovial parcel Here's a shortened URL of your playground link! You can remove the full link from your message.

jdelstrother#0

Playground Link

Preview:```ts
type State = {
foo: number
bar: string
}
declare function setState<K extends keyof State>(
state: Pick<State, K>
): void

setState({foo: 1})
setState({bar: "hello"})
// @ts-expect-error
setState({bar: 1})
// @ts-expect-error
setState({bar: undefined})
...```

You can choose specific lines to embed by selecting them before copying the link.

[severe stirrup]

You need to turn exactOptionalPropertyTypes on in tsconfig

by default a?: string and ?: string | undefined are treated as the same type, we can't separate them without eOPT

[jovial parcel]

Hm. Shouldn't this @-comment enable that? https://www.typescriptlang.org/play/?exactOptionalPropertyTypes=true#code/PTAEAEFMA8EMGMAuB5ADoglgewHawDYAKATlqpMYgJ4AqV5AzgFyiLECukAUF9eaAGVEsRJFABeUAG8uoUADMsWFjnYBbAEYUA3LNAbYxFgzYYcAc10BfLgBNI8fIbHz2OJNhygGkREJGQADwA0qAwoji2DKAA1pBUWPKCwqIAfAAUJgEs6YQY8DGB-qIANKDBqQCUlSwAblgYtrpcPn4pkOlSCkosAIygVpW6rcUdXQZGoADkABaQ+PhYUwNDsiAQiAwAtDDkSDvEpMQtvqOd+oZ9K7qg6+CbO9B7iAdHJ20B5xMsbvbyZpBbNceFx8L5vO0AKqoWzZUCEQyYAhFdqpbRydaBLbY0AAdRmIim0Vg+l8omIrHoLiwFMQMwwDAA-DwMEl0gBZEQzAB0xFgkSwanSlVAqVAAAZuQBWEUyORZUTQ2GiCTSbrKUD9GxWML4HzSPQKyBKgKq8aXaZzBZLAZcGwjdqZKEwgKrIA

[balmy roost]

@jovial parcel Here's a shortened URL of your playground link! You can remove the full link from your message.

jdelstrother#0

Playground Link

Preview:```ts
// @exactOptionalPropertyTypes: true

type State = {
foo: number;
bar: string;
}
declare function setState<K extends keyof State>(state: (Pick<State, K>)): void;

setState({ foo: 1 });
setState({ bar: 'hello' });
// @ts-expect-error
setState({ bar: 1 });
...```

You can choose specific lines to embed by selecting them before copying the link.

[severe stirrup]

Otherwise you have to modify your system to deal with undefined

Seems you have an issue with your setState type there

The generic is weird. K gets inferred as keyof State, so it wants all props

[balmy roost]

sandiford#0

Playground Link

Preview:```ts
// @exactOptionalPropertyTypes: true

type State = {
foo: number;
bar: string;
}
declare function setState(state: Partial<State>): void;

setState({ foo: 1 });
setState({ bar: 'hello' });
// @ts-expect-error
setState({ bar: 1 });
// @ts-expect-error
setState({ bar: undefined });
...```

You can choose specific lines to embed by selecting them before copying the link.

[jovial parcel]

Bah, that's unfortunate. I guess I'm stuck until that makes it upstream to DefinitelyTyped then

[severe stirrup]

Uh I think you have something wrong

It's a react app?

[jovial parcel]

Yeah. My playground was trying to simplify it down to the bare minimum. You think it's oversimplified?

[severe stirrup]

I just find that typing weird

Let's try to use the real react types

I guess there is more going on in the real world

The solution is going to be to use a concrete type for stateUpdate I think

[balmy roost]

sandiford#0

Playground Link

Preview:```ts
type State = {
foo: number
bar: string
}
declare function setState<K extends keyof State>(
state: Pick<State, K>
): void

setState({foo: 1})
setState({bar: "hello"})
// @ts-expect-error
setState({bar: 1})
// @ts-expect-error
setState({bar: undefined})
...```

You can choose specific lines to embed by selecting them before copying the link.

[severe stirrup]

I think the way that setState is typed just doesn't play nicely with a Partial

[jovial parcel]

Yeah. I'll see if I can refactor to avoid the pre-declared variable 😞

FWIW with actual react typings - https://www.typescriptlang.org/play/?exactOptionalPropertyTypes=true#code/PTAEAEFMA8EMGMAuB5ADoglgewHawDYAKATlqpMYgJ4AqV5AzgFyiLECukAUFxgLaoslUACpQsBqABKkBIlAAzUn1AAiYrKSqA3D2rlQJMpIC8oAN7iWOdnwBGFUAF8u+yKADKiWIndnLClhY1rYOxAA0oHawxCwMbBg4AObOPPD4EpIAYkGgML44ACaSMnIAdADCWAK4kDiIADxGqAyRXj6QAHwWXKBRGQAWABQAlD19ffiQ8vEdAKqohR0shDGYBA3tvp3afSCgDQC0x6AA6gM+AOSSsFHTvsSs9O6Bj4gDGAwA-DwToBgKUBDACyPgGZWIsCK1VGoG6AAYygBWMbmXp-UCzXwLJa+UD+RRBFgARlSfyceXwDHcaIxmO82MWHXxFiiMRYlwGkHw+CwlzJExcf3enzK1MQW0gQyxkBxHRGuj6LicQA

[balmy roost]

@jovial parcel Here's a shortened URL of your playground link! You can remove the full link from your message.

jdelstrother#0

Playground Link

Preview:```ts
// @exactOptionalPropertyTypes: true

import * as React from "react";

type Props = { a: number }
type State = { foo: number, bar: string }

class Foo extends React.Component<Props, State> {
blah() {
let stateUpdate: Partial<State>; // <--- What's a better type for this?
...```

You can choose specific lines to embed by selecting them before copying the link.

sandiford#0

Playground Link

Preview:```ts
// @exactOptionalPropertyTypes: true

import * as React from "react";

type Props = { a: number }
type State = { foo: number, bar: string }

class Foo extends React.Component<Props, State> {
blah() {
if (Math.random() > 0.5) {
const stateUpdate = { foo: 1 }
...```

You can choose specific lines to embed by selecting them before copying the link.

[severe stirrup]

You can't do this?

[severe stirrup]

ah

Yeah it's perfectly safe I think. So it is possble just to cast it to make react accept it

Or you might be able to override some types somewhere, I forget exactly how