Defining Multiple Types in Typescript

Question

Defining Multiple Types in Typescript

I have created an interface in a TypeScript definition file named d.ts:

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

    }
}

In an Angular controller, I have utilized this interface like so:

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
    });
}

An error is being thrown which states:

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

What do you think is causing this issue?

typescript

Answer 1

Answer №1

To implement generics in TypeScript, you can use the following syntax:

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(""); // This works
// filters.field = "" // Error - String cannot be assigned to string[]

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

Alternatively, you can define specific interfaces for single and multiple fields like this:

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 = "" // Error - String cannot be assigned to string[]

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

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

If necessary, you can also utilize Type Guards by referring to this resource, although there may be some current issues with it.

Answer 2

To implement generics in TypeScript, you can use the following syntax:

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(""); // This works
// filters.field = "" // Error - String cannot be assigned to string[]

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

Alternatively, you can define specific interfaces for single and multiple fields like this:

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 = "" // Error - String cannot be assigned to string[]

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

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

If necessary, you can also utilize Type Guards by referring to this resource, although there may be some current issues with it.

Answer 3

Answer №2

According to feedback from BGR, it seems that I should start by converting to an array:

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

Answer 4

According to feedback from BGR, it seems that I should start by converting to an array:

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

Defining Multiple Types in Typescript

Answer №1

Answer №2

Similar questions

Encountering a problem while attempting to host an Angular application on localhost:4200

Updating the state of Formik

What are the best practices for preventing risky assignments between Ref<string> and Ref<string | undefined>?

Substitute Customized Interface Type Identifier

Methods to validate CSS attributes specified within a class using React testing library

Is it possible to remove a complete row in Angular 2 using Material Design

A Vue component library devoid of bundled dependencies or the need for compiling SCSS files

Tips for updating state in React TypeScript 2.0?

RXJS expand keeps on recursing indefinitely

What are the distinctions between using findById({_id:historyId}) and findById(historyId) in Mongoose?

Encountering the "potential null object" TypeScript issue when utilizing template ref data in Vue

Encountering a duplication issue when redirecting components in Angular2/TypeScript using navigateByUrl

Another component's Angular event emitter is causing confusion with that of a different component

Having trouble making generics work with extends in Typescript

Capturing user audio on the client side with Angular

Sign out from Azure Active Directory using the ADAL library in an Angular application written in TypeScript

Angular Routing can be a powerful tool for managing multiple article posts in an efficient and organized way

utilize makeStyles to modify button text color

Enforcement of Class Initialization in Typescript 2.7

Issues with Angular Reactive Forms Validation behaving strangely