TypeScript 扩展参数类型

Question

I want to call a function from my UI library with a type which extends the original ( Suggestion ) parameter type with additional properties. According to this link it looks like it should be possible: https://github.com/Microsoft/TypeScript/issues/2225 (bottom comments)

What am I doing wrong and do you do this correctly? Note that the getSuggestion function and its type is located in a UI library package and I want to call it from my apps package.

Playground link

Code:

import React from 'react'

type Suggestion = {
    name: string
}

interface UIProps {
    getSuggestion: <T = {}>(suggestion: Suggestion & T) => string
}

function UIComponent(props: UIProps) {
    return null
}

type AppSuggestion = {
  name: string
  enabled: boolean
}

function AppComponent() {
    return (
        <UIComponent
          getSuggestion={(suggestion: AppSuggestion) => 'hello from app'}
        />
    )
}

Error:

I have also tried using interfaces instead, but without luck.

Playground link

Code:

import React from 'react'

interface Suggestion {
    name: string
}

interface UIProps {
    getSuggestion: <T>(suggestion: T) => string
}

function UIComponent(props: UIProps) {
    return null
}

interface AppSuggestion extends Suggestion {
  name: string
  enabled: boolean
}

function AppComponent() {
    return (
        <UIComponent
          getSuggestion={(suggestion: AppSuggestion) => 'hello from app'}
        />
    )
}

Error:

Answer 1

The generic type parameter should be on the interface and the component, not the function. If you have a generic function the implementation ( (suggestion: AppSuggestion) => 'hello from app' ) needs to accept any type argument for the type parameter, which it currently does not.

You need to put the type parameter on the component and the props. This means that the type parameter will be inferred when you create your component:

interface UIProps<T> {
    getSuggestion: (suggestion: T) => string
}

function UIComponent<T>(props: UIProps<T>) {
    return null
}

interface AppSuggestion extends Suggestion {
  name: string
  enabled: boolean
}

function AppComponent() {
    return (
        <UIComponent
          getSuggestion={(suggestion: AppSuggestion) => 'hello from app'}
        />
    )
}

Playground Link