Typescript multiple type definition

Question

I have defined the interface in a d.ts file:

declare module myModule
{
    interface IQedModel {
        field: string | string[];
        operator: string;

    }
}

In an anuglar controller I have implemented it:

vm.filters = <myModule.IQedModel>{
    operator: 'and',
    field: []
};

function populateFields() {
    vm.filters.field = [];

    angular.forEach(addedFilters, item => {
        vm.filters.field.push(item.data); //<-- THIS LINE SHOWS ERRORS
    });
}

The error is:

Property 'push' does not exist on type 'string | string[]'

What is the issue here?

The compiler cannot infer the type.You should cast to the array: (vm.filters.field as string[]).push(...) — Bruno Grieder
– Bruno Grieder, Commented Oct 29, 2015 at 11:24
@BGR is that not what the line at the top of the function does? — Callum Linington
– Callum Linington, Commented Oct 29, 2015 at 11:27
Obvioussly the compiler is falling back to the type definition: if you remove the cast to <myModule.IQedModel> on the assignment to vm.filters the compiler will infer the array and will not complain. (the assignment within the populateFields function is unnecessary) — Bruno Grieder
– Bruno Grieder, Commented Oct 29, 2015 at 11:38
Okay cool, I was migrating a JS file to TS so that's why it is there, I guess I'm going to run into a lot of relics — Callum Linington
– Callum Linington, Commented Oct 29, 2015 at 11:48

Remo H. Jansen · Accepted Answer · 2015-10-29 11:56:23Z

2

You can use generics:

declare module myModule
{
    interface IQedModel<T> {
        field: T;
        operator: string;

    }
}

var filters = <myModule.IQedModel<Array<string>>>{
    operator: 'and',
    field: []
};

var filters2 = <myModule.IQedModel<string>>{
    operator: 'and',
    field: ""
};

filters.field.push(""); // works
// filters.field = "" // String not assignable to string[]


filters2.field = ""; // works
// filters2.field.push(""); // push does not exist on type string

Or:

declare module myModule
{
    interface IQedModel<T> {
        field: T;
        operator: string;

    }

    interface ISingleFieldQedModel extends IQedModel<string> {}
    interface IMultiFieldQedModel extends IQedModel<string[]> {}
}

var filters = <myModule.IMultiFieldQedModel>{
    operator: 'and',
    field: []
};

filters.field.push("");
// filters.field = "" // String not assignable to string[]


var filters2 = <myModule.ISingleFieldQedModel>{
    operator: 'and',
    field: ""
};

filters2.field = "";
// filters2.field.push(""); // push does not exist on type string

You can also use Type Guards, take a look to this but there are some issues at the moment.

answered Oct 29, 2015 at 11:56

Remo H. Jansen

25.2k13 gold badges73 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Callum Linington Over a year ago

I like that, neat stuff!

Callum Linington · Accepted Answer · 2015-10-29 11:52:32Z

1

So based on BGR comments I need to cast to an array first:

(<string[]>vm.filters.field).push(item.data);

answered Oct 29, 2015 at 11:52

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

Collectives™ on Stack Overflow

Typescript multiple type definition

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related