为什么以下打字稿类型联合代码无效？

Question

I am trying to create a function that either accepts a string or accepts a function that returns a string but I get the following error:

Code

interface Props {
    title: (values: string) => string | string;
}

const a: Props = {
    title: 'Title'
}

const b: Props = {
    title: (t) => t
}

Error:

Type '{ title: string; }' is not assignable to type 'Props'.
  Types of property 'title' are incompatible.
    Type 'string' is not assignable to type '(values: string) => string'.
const a: Props

Playground Link

Answer 1

You just need to wrap (values: string) => string in parentheses, otherwise union is applied to return type and reads string | string string | string :

interface Props {
    title: ((values: string) => string) | string;
}

Slightly cleaner option would be extracting (values: string) => string to its own type:

type TitleBuilder = (values: string) => string;

interface Props {
    title: TitleBuilder | string;
}