Error ts2769 no overload matches this call - Исправление ошибок и поиск оптимальных решений проблем

Typescript: 3.7.2
vue-property-decorator: 8.3.0
Vue: 2.6.10

All compiles fine, and I see component in browser which is working as expected, BUT
I forced to use ts-ignore on Vue initialization =(
Just uncomment this line,
and start npm run deploy.dev and you catch this error:

error TS2769: No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, { mySelected: null; }, object, object, "$el" | "$options" | "$parent" | "$root" | "$children" | "$refs" | "$slots" | "$scopedSlots" | "$isServer" | "$data" | "$props" | ... 15 more ... | "$createElement"> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, { mySelected: null; }, object, object, "$el" | "$options" | "$parent" | "$root" | "$children" | "$refs" | "$slots" | "$scopedSlots" | "$isServer" | "$data" | "$props" | ... 15 more ... | "$createElement">'.
      Type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to type 'ComponentOptions<Vue, DataDef<{ mySelected: null; }, Record<"$el" | "$options" | "$parent" | "$root" | "$children" | "$refs" | "$slots" | "$scopedSlots" | "$isServer" | "$data" | "$props" | "$ssrContext" | ... 14 more ... | "$createElement", any>, Vue>, object, object, ("$el" | ... 25 more ... | "$createElement")[],...'.
        Types of property 'components' are incompatible.
          Type '{ IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }'.
            Property 'IamHeader' is incompatible with index signature.
              Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
                Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue>'.
                  Type 'IamHeader' is not assignable to type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.
                    Type 'IamHeader' is missing the following properties from type 'Vue': $el, $options, $parent, $root, and 23 more.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, { mySelected: null; }, object, object, { readonly $el: unknown; readonly $options: unknown; readonly $parent: unknown; readonly $root: unknown; readonly $children: unknown; readonly $refs: unknown; readonly $slots: unknown; ... 19 more ...; $createElement: unknown; }> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, { mySelected: null; }, object, object, { readonly $el: unknown; readonly $options: unknown; readonly $parent: unknown; readonly $root: unknown; readonly $children: unknown; readonly $refs: unknown; readonly $slots: unknown; readonly $scopedSlots: unknown; ... 18 more ......'.
      Type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to type 'ComponentOptions<Vue, DataDef<{ mySelected: null; }, { readonly $el: unknown; readonly $options: unknown; readonly $parent: unknown; readonly $root: unknown; readonly $children: unknown; readonly $refs: unknown; readonly $slots: unknown; readonly $scopedSlots: unknown; ... 18 more ...; $createElement: unknown; }, Vu...'.
        Types of property 'components' are incompatible.
          Type '{ IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
      Types of property 'components' are incompatible.
        Type '{ IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }'.
          Property 'IamHeader' is incompatible with index signature.
            Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
              Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue>'.
TypeScript: 1 semantic error
TypeScript: emit failed
[10:57:17] 'transpile.dev' errored after 1.56 s
[10:57:17] Error: TypeScript: Compilation failed
    at Output.mightFinish (C:Projectssystemjs-ts-es6-vuenode_modulesgulp-typescriptreleaseoutput.js:131:43)
    at Output.finish (C:Projectssystemjs-ts-es6-vuenode_modulesgulp-typescriptreleaseoutput.js:123:14)
    at ProjectCompiler.inputDone (C:Projectssystemjs-ts-es6-vuenode_modulesgulp-typescriptreleasecompiler.js:97:29)
    at CompileStream.end (C:Projectssystemjs-ts-es6-vuenode_modulesgulp-typescriptreleaseproject.js:125:31)
    at DestroyableTransform.onend (C:Projectssystemjs-ts-es6-vuenode_modulesreadable-streamlib_stream_readable.js:577:10)
    at Object.onceWrapper (events.js:286:20)
    at DestroyableTransform.emit (events.js:203:15)
    at DestroyableTransform.EventEmitter.emit (domain.js:466:23)
    at endReadableNT (C:Projectssystemjs-ts-es6-vuenode_modulesreadable-streamlib_stream_readable.js:1010:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue>
from src

@Component({
	name,
	template,
})
export class IamHeader extends Mixins(BemComponent) {
}

from src

@Component
export class BemComponent extends Vue
	implements IBem, IClassComponent {
}

Источник

I’ve heard folks say, “write the blog post you wish that you’d found.” Well, this post is for anyone searching for an answer to a cryptic TypeScript error that first reared it’s head after installing the Material Design-compliant React Native UI library: react-native-paper.

The error

I like to keep a terminal window open with the TypeScript compiler running in watch mode (with a "tsc": "tsc" npm script, this can be done with: npm run tsc -- -w). When I first noticed this error, I found it taking up nearly the entire window:

The contents of the error is printed below:

src/ui/YPButton.tsx:24:10 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<ViewProps & { children: ReactNode; style?: StyleProp<ViewStyle>; theme: Theme; }, "children" | "testID" | "style" | ... 48 more ... | "onTouchEndCapture"> & { ...; } & { ...; } & { ...; }, "children" | ... 61 more ... | "contentStyle"> & { ...; }, context?: any): ReactElement<...> | Component<...>', gave the following error.
    Type '{ children: ReactNode; styleName?: string; style?: any; onPress: () => void; mode: "text" | "outlined" | "contained"; uppercase: boolean; nativeID: string; }' is missing the following properties from type 'Pick<Pick<ViewProps & { children: ReactNode; style?: StyleProp<ViewStyle>; theme: Theme; }, "children" | "testID" | "style" | "onLayout" | ... 47 more ... | "onTouchEndCapture"> & { ...; } & { ...; } & { ...; }, "children" | ... 61 more ... | "contentStyle">': isTVSelectable, hasTVPreferredFocus, tvParallaxProperties, tvParallaxShiftDistanceX, and 3 more.
  Overload 2 of 2, '(props: Pick<Pick<ViewProps & { children: ReactNode; style?: StyleProp<ViewStyle>; theme: Theme; }, "children" | "testID" | "style" | ... 48 more ... | "onTouchEndCapture"> & { ...; } & { ...; } & { ...; }, "children" | ... 61 more ... | "contentStyle"> & { ...; } & { ...; }, context?: any): ReactElement<...> | Component<...>', gave the following error.
    Type '{ children: ReactNode; styleName?: string; style?: any; onPress: () => void; mode: "text" | "outlined" | "contained"; uppercase: boolean; nativeID: string; }' is missing the following properties from type 'Pick<Pick<ViewProps & { children: ReactNode; style?: StyleProp<ViewStyle>; theme: Theme; }, "children" | "testID" | "style" | "onLayout" | ... 47 more ... | "onTouchEndCapture"> & { ...; } & { ...; } & { ...; }, "children" | ... 61 more ... | "contentStyle">': isTVSelectable, hasTVPreferredFocus, tvParallaxProperties, tvParallaxShiftDistanceX, and 3 more.

24         <Button onPress={onPress} mode={mode} uppercase={uppercase} nativeID={testID} {...otherProps}>

My initial instinct was to begin adding the props that it had called me out for omitting (following is missing the following properties from type in the error). However, these TV related props weren’t listed as mandatory in the Paper docs, so why do I have to include them? Besides, it’s very unlikely this app will ever run on a TV.

Also concerning to me was the cryptic looking Prop type:

Pick<Pick<ViewProps & { children: ReactNode; style?: StyleProp<ViewStyle>...

Did I really want to invest in a library that was using such complex types for one of their most simple components? 😬

I turned to the source, and found that the Paper TypeScript Props for their Button component were in fact fine; concise and well-documented. If this wasn’t an issue with Paper, and it wasn’t occurring before I began using the library, what could be the culprit?

The solution: @types/react-native@0.57.65

On a hunch, and running out of other things to try, I noticed that my installed version of @types/react-native (0.57.7) was quite a bit behind the latest patch release of the 0.57.* versions. I took a look at the released versions on npm and found that the latest available release for 0.57 was 0.57.65. I installed it with the following command:

npm i @types/react-native@0.57.65 --save-dev

… once 👆 was installed and I’d started back up my TypeScript watch command, I was very relieved to finally see that familiar, comforting compiler output again: Found 0 errors. Watching for file changes.

Hopefully this tip can save you a few gray hairs.

Источник

Содержание

Type error no overload matches this call
No overload matches this call error in TypeScript #
Conclusion #
TS2769: No overload matches this call #374
Comments
This comment has been minimized.
This comment has been minimized.
My mistake which caused this:
Possible another solution
Possible another solution
TS2769: No overload matches this call #374
Comments
This comment has been minimized.
This comment has been minimized.
My mistake which caused this:
Possible another solution
Possible another solution

Type error no overload matches this call

Reading time В· 4 min

No overload matches this call error in TypeScript #

The error «No overload matches this call» occurs when we call a function and pass it a parameter that doesn’t match any of its specified overloads. To solve the error, make sure the function is being called with the correct number of arguments of the correct type, or use a type assertion.

Here are 2 examples of how the error occurs.

In the first example, we take only 1 parameter in the callback, but it expects a minimum of 2 parameters.

To solve the error, specify the correct number of parameters in the function’s definition.

In the second example, TypeScript gets confused about the type of the value we call the function with.

This is a valid function call, but the compiler has limitations, so we have to use a type assertion when calling the example function.

The as any syntax is called a type assertion and effectively turns off type checking for the specific parameter.

If the suggestions above did not help, the best way to solve the error is to understand its cause.

You might be getting the error when calling a function with overloads from a third party library or one that you have defined yourself, but the following applies either way.

Here is an example of a function that has 2 overloads:

The first two lines are called the overload signatures, and the third line is the function implementation.

The Date() constructor can be passed different arguments to create a Date object.

In the first signature, the function takes a timestamp ( number ) parameter and returns a Date object.

In the second signature, the function takes 3 comma-separated parameters of type number and returns a Date object.

Even though the line where we call the createDate function satisfies its implementation signature, because the function has 2 optional parameters, we get an error.

If you are getting the error when calling a function from a third-party module, open its type definitions. For example, in VSCode you can do that by pressing the ALT key and clicking on the function’s name with your mouse.

Now look at the overload signatures of the function — you can only call one of the function’s overload signatures, not its implementation signature.

The example function can be called with a single argument of type string , which satisfies the first overload signature.

The function can also be called with 2 arguments of type number , which satisfies the second overload signature.

The implementation signature of the function cannot be called directly, you have to call one of the overload signatures.

Conclusion #

Источник

TS2769: No overload matches this call #374

Typescript: 3.7.2
vue-property-decorator: 8.3.0
Vue: 2.6.10

All compiles fine, and I see component in browser which is working as expected, BUT
I forced to use ts-ignore on Vue initialization =(
Just uncomment this line,
and start npm run deploy.dev and you catch this error:

Type ‘typeof IamHeader’ is not assignable to type ‘VueConstructor
from src

The text was updated successfully, but these errors were encountered:

npm run deploy is working without ts-ignore & without errors
differences in tsconfig.dev.json vs tsconfig.json

«strictFunctionTypes»: false is not helped to me

Please minimize your reproduction to make sure your problem is actually caused by vue-class-component. e.g. Remove extra build tool / configuration (gulp, multiple tsconfig.json etc.), only include codes which causes this problem.
See how to make reproduction: https://new-issue.vuejs.org/?repo=vuejs/vue#why-repro

@ktsn ok I am working on it

Hi guys, any update about this issue?

@decentraliser I can’t reproduct this problem on another small project.

it happened to me when I deleted package-lock.json and /node_modules , then npm i .
not sure if I can reproduce it
afterwards I just cloned my repo in a new folder and everything worked

@decentraliser I just tried your way, but deleting node_modules folder & package-lock.json didn’t help me.

Closing until a minimal reproduction is provided. If you are able to provide it which clarify the problem is caused by vue-class-component, please open a new issue.

Just in case anyone else is getting similar «no overload matches this call» errors, I was having a similar issue when I was trying to import a component defined in vanilla JS.

The main thing is that the rule about needing to use Vue.extend(<>) applies to child components as well.

To fix it I just needed to change this:

My mistake which caused this:

I had same issue, however, I was able to fix it. Propably nobody else will have totally same retarded mistake as I made, but this might help in debugging.

This was causing TS2769 . Thanks to @ericksonc I tried his way to fix this. So I end up with following code:

Well, this did either work. I end up with ERROR in /. /HStockWidgetActions.vue.ts(29,2) . So this error was caused totally by faulty module. In my case the fault in this module was missing the extending of Vue.

Meaning by wrong code was following

while it supposed be

After this I just put back the «correct» code and it passed without problems.

Possible another solution

I remember also having this issue few weeks before also. When this happend after I switched node from 10 to 13 with nvm . Solution to this was just drop the node_modules folder and install again. Problem solved with that.

Just one question rises. Why the heck Javascript/TypeScript packages are so easy to break and why they dont have proper stacktrace to debug. 😑

Possible another solution

This helped me to solve my problem, to anyone finding this googling the error code. After double-checking my export s and extend s and my spelling of everything, and having the problem persist, refreshing my project packages with yarn install resolved this very annoying issue. Thank you @NikoGrano for the footnote!

@ktsn, can you reopen this issue?
Reproduction project
Problem code (as soon as updating vue-property-decorator from v8.4.2 to v9.1.2 & npm run lint or npm run test )

That isn’t a reproduction, though. A reproduction is a 5 file (or less) «hello world» project, so you can eliminate it’s not some other issue.

For anyone coming here and none of the above solutions worked for you I wanted to share why I was getting this error and how I fixed it. The errors being shown for me were not readily apparent and did not help narrow down the problem.

I had all working code and class based components working in my NuxtJS project. I added a global mixin computed property and then all these errors started showing up:

It was very confusing and I didn’t know why. I then started traversing down into the components being imported. All the spelling was correct and all components were being property extended.

Then I realized that one of the nested components had a Property name with the same name as the computed property I had in the mixin:

Once I removed the property value since it was no longer needed all of the TS errors went away:

I hope this was helpful for anyone else coming here by googling that TS error! Good luck!!

Источник

TS2769: No overload matches this call #374

Typescript: 3.7.2
vue-property-decorator: 8.3.0
Vue: 2.6.10

Type ‘typeof IamHeader’ is not assignable to type ‘VueConstructor
from src

The text was updated successfully, but these errors were encountered:

npm run deploy is working without ts-ignore & without errors
differences in tsconfig.dev.json vs tsconfig.json

«strictFunctionTypes»: false is not helped to me

@ktsn ok I am working on it

Hi guys, any update about this issue?

@decentraliser I can’t reproduct this problem on another small project.

it happened to me when I deleted package-lock.json and /node_modules , then npm i .
not sure if I can reproduce it
afterwards I just cloned my repo in a new folder and everything worked

@decentraliser I just tried your way, but deleting node_modules folder & package-lock.json didn’t help me.

Closing until a minimal reproduction is provided. If you are able to provide it which clarify the problem is caused by vue-class-component, please open a new issue.

Just in case anyone else is getting similar «no overload matches this call» errors, I was having a similar issue when I was trying to import a component defined in vanilla JS.

The main thing is that the rule about needing to use Vue.extend(<>) applies to child components as well.

To fix it I just needed to change this:

My mistake which caused this:

I had same issue, however, I was able to fix it. Propably nobody else will have totally same retarded mistake as I made, but this might help in debugging.

This was causing TS2769 . Thanks to @ericksonc I tried his way to fix this. So I end up with following code:

Meaning by wrong code was following

while it supposed be

After this I just put back the «correct» code and it passed without problems.

Possible another solution

Just one question rises. Why the heck Javascript/TypeScript packages are so easy to break and why they dont have proper stacktrace to debug. 😑

Possible another solution

@ktsn, can you reopen this issue?
Reproduction project
Problem code (as soon as updating vue-property-decorator from v8.4.2 to v9.1.2 & npm run lint or npm run test )

That isn’t a reproduction, though. A reproduction is a 5 file (or less) «hello world» project, so you can eliminate it’s not some other issue.

I had all working code and class based components working in my NuxtJS project. I added a global mixin computed property and then all these errors started showing up:

It was very confusing and I didn’t know why. I then started traversing down into the components being imported. All the spelling was correct and all components were being property extended.

Then I realized that one of the nested components had a Property name with the same name as the computed property I had in the mixin:

Once I removed the property value since it was no longer needed all of the TS errors went away:

I hope this was helpful for anyone else coming here by googling that TS error! Good luck!!

Источник

I’m currently reaching out for help as typescript gave me the following error that I cannot just make sense of it when trying to write a useReducer.

TS2769: No overload matches this call.   Overload 1 of 5, ‘(reducer:
ReducerWithoutAction, initializerArg: any, initializer?:
undefined): [any, DispatchWithoutAction]’, gave the following error.
    Argument of type ‘(state: AuthState, action: AuthAction) => Error | { wallet: string | null; profile: { [key: string]: Object[]; } |
null; account: { [key: string]: Object[]; } | null; error: { [key:
string]: Object[]; } | null; }’ is not assignable to parameter of type
‘ReducerWithoutAction’.   Overload 2 of 5, ‘(reducer: (state:
AuthState, action: AuthAction) => Error | { wallet: string | null;
profile: { [key: string]: Object[]; } | null; account: { [key:
string]: Object[]; } | null; error: { …; } | null; }, initialState:
never, initializer?: undefined): […]’, gave the following error.
    Argument of type ‘AuthState’ is not assignable to parameter of type ‘never’.

import React from 'react'

type AuthState = {
    wallet: string | null,
    profile: { [key: string]: Object[] } | null,
    account: { [key: string]: Object[] } | null,
    error: { [key: string]: Object[] } | null,
}

type AuthAction = {
    type: 'SET_WALLET' | 'SET_ACCOUNT' | 'SET_ERROR' | 'LOGOUT',
    payload: AuthState
}

const initialState: AuthState = {
    wallet: null,
    profile: null,
    account: null,
    error: null
}

const authReducer = (state: AuthState, action: AuthAction) => {
    switch (action.type) {
        case 'SET_WALLET':
            return {...state, wallet: action.payload.wallet}
        case 'SET_ACCOUNT':
            return {...state, profile: action.payload.profile, account: action.payload.account}
        case 'SET_ERROR':
            return {...state, error: action.payload.error}
        case 'LOGOUT':
            return {...state, wallet: action.payload.wallet}
        default:
            return new Error(`Unhandled  action type ${action.type}`)
    }
}

const AuthContext = React.createContext(initialState)

type Props = {
    children: JSX.Element
}

const AuthProvider = ({children}: Props) => {
    const [state, dispatch] = React.useReducer(authReducer, initialState)
    const value = {state, dispatch}
    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )
}

export {AuthContext, AuthProvider}

If only someone could help me understand whys that is and what I am doing wrong.

>Solution :

default:
  return new Error(`Unhandled  action type ${action.type}`);

The reason you’re getting a type error is because of this line. If this case is reached, then you’ll return an error object, replacing your state with that instead of an AuthState object.

If you’re just wanting to log an error, you could do:

default: 
  console.error(`Unhandled action type ${action.type}`);
  return state;

If you want it to blow up instead, you could throw an error:

default:
  throw new Error(`Unhandled  action type ${action.type}`)

Or if the code is correct and you want your state to be replaced with an error object, you can change the type of the reducer to know that Error is a possibility:

const authReducer = (state: AuthState | Error, action: AuthAction) => {

Источник