Typescript：具有 function 参数值的可区分联合解析为“任意”

Question

Both of these examples fail to see the type of the parameter in onSelect ... TS claims value is any if clearable is not provided.

I'm at a loss. I've attempted both with and without a generic: no dice. Any help?

• Without Generics playground
• With Generics playground

import React from 'react';

interface RequiredProps {
    value: string;
    clearable?: false;
    onSelect: (value: string) => void;
}

interface ClearableProps {
    value: string | null;
    clearable?: true;
    onSelect: (value: string | null) => void;
}

const Select: React.FC<ClearableProps | RequiredProps> = ({ value, clearable, onSelect }) => {
    return <div />;
}

const Clearable = <Select value="abc" onSelect={(value) => { }} clearable={true} />;
const ExplicitNotClearable = <Select value="abc" onSelect={(value) => { }} clearable={false} />;

// Why doesn't TS know `value` is a `string`, but rather thinks this function has no type?
const NotClearable = <Select value="abc" onSelect={(value) => { }} />;

import React from 'react';

interface Props<T> {
    clearable?: boolean;
    onSelect: (value: T) => void;
    value: T;
}

interface RequiredProps extends Props<string> {
    clearable?: false;
}

type ClearableType = string | null;
interface ClearableProps extends Props<ClearableType> {
    clearable: true;
}

const Select: React.FC<ClearableProps | RequiredProps> = ({ value, clearable, onSelect }) => {
    return <div />;
}

const Clearable = <Select value="abc" onSelect={(value) => { }} clearable={true} />;
const ExplicitNotClearable = <Select value="abc" onSelect={(value) => { }} clearable={false} />;

// Why doesn't TS know `value` is a `string`, but rather thinks this function has no type?
const NotClearable = <Select value="abc" onSelect={(value) => { }} />;

Answer 1

I'm a little confused because in your two cases, clearable is either optional or required in ClearableProps . I expect you mean it to be required in both versions, right? Anyway, I will assume that.

This looks like a known bug, microsoft/TypeScript#31618 . The value callback parameter is not being contextually typed when the callback is assigned to a union-typed onSelect property. When you explicitly discriminate the union by setting clearable the problem goes away.

This issue is on the backlog, so it's not likely to be addressed anytime soon.

You can work around this by explicity annotating the type of value :

const ImplicitlyNotClearable = <Select value="abc" onSelect={(value: string) => { }} />;

which isn't the best, but it least it's something.

Okay, hope that helps; good luck!

Playground link to code