Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why do i get error TS2345 on directive definition?

I try to migrate an existing angular app to typescript (version 1.5.3):

Here is the code:

  'use strict';
    angular.module('x')
    .directive('tabsPane', TabsPane)

    function TabsPane(itemTabs) {

        return {
            restrict: 'E',
            compile: compileTabs
        };

        function compileTabs(tElement) {
            var template = createTabsTemplate(); //function which i don't include here for brevity
            tElement.append(template);
        }}

When i compile the javascript i get:

error TS2345: Argument of type '(itemTabs: any) => { restrict: string; compile: (tElement: any) => void; }' is not assignable to parameter of type 'any[]'. Property 'push' is missing in type '(itemTabs: any) => { restrict: string; compile: (tElement: any) => void; }'.

I tried to understand why it complains here i went to the typescript definition of angular:

Somehow typescript implies this definition

directive(name: string, inlineAnnotatedFunction: any[]): IModule;

where the following definition would be more appropriate:

directive(name: string, directiveFactory: IDirectiveFactory): IModule;

I am totally new to typescript, so I assume that i make something wrong, but i can't find anything relevant with google.

like image 344
David Michael Gang Avatar asked Aug 26 '15 15:08

David Michael Gang


2 Answers

I've encountered the same problem while migrating from old javascript angularJs 1.4.9 code to typescript 2.6 code. I'm using @types/angular ver 1.6.39. I've added 'any' as return type of the parameter function like:

    angular.module("app")
      .directive("tabsPane", function TabsPane(itemTabs): any { 
            return {
                restrict: 'E',
                compile: compileTabs
            };

            function compileTabs(tElement) {
                var template = createTabsTemplate();
                tElement.append(template);
            }
       });

The error disappeard :)

like image 126
Wiesio Pie Avatar answered Nov 15 '22 18:11

Wiesio Pie


When running compile in a directive, it must always return something, so in this case a simple return true; added to the bottom of your compile function would solve your issues.

like image 21
Mike Kleiman Avatar answered Nov 15 '22 17:11

Mike Kleiman