Typescript Interface with nullable properties

Question

I have an interface IFilterSet with nullable fields:

export interface IFilterSet {
        filter1?: boolean;
        filter2?: boolean;
        filter3?: number;
        fitler4?: string;
    }

I receive another object X, that may contain IFilterSet object among others.

I want to map the IFilterSet properties of object X. First quess would be to make a loop for those properties, but because they are nullable, it won't work, there will be nothing to loop through. Initialiazing an empty IFilterSet would defeat the purpose of those properties being nullable, right?

Why would it defeat the purpose? In the end, {} is assignable to IFilterSet. You can check for the presence of a property by calling hasOwnProperty(prop). — Wickoo
– Wickoo, Commented Jan 22, 2018 at 9:05
You can also define your interface as export interface IFilterSet { filter1: boolean | null; filter2: boolean | null; filter3: number | null; fitler4: string | null; if you want the fields always be there, but have null values, but I like the first version more. — Wickoo
– Wickoo, Commented Jan 22, 2018 at 9:10
How would object X contain that IFilterSet? Would it be X.filterSet, X.etc[?], or other way? — Justinas Marozas
– Justinas Marozas, Commented Jan 22, 2018 at 9:37
it would be X.filter1, X.filter2, X.SomeOtherStuff, X could have 0-all of IFilterSet properties — AlexandruC
– AlexandruC, Commented Jan 22, 2018 at 9:45
There are solutions for the problem at hand, like the one pointed out by Wickoo, I wonder what is the elegant, general solution for populating an Interface with optional properties, if there is one. — AlexandruC
– AlexandruC, Commented Jan 22, 2018 at 9:47

Wickoo · Accepted Answer · 2018-01-22 10:35:28Z

I'm not sure if I fully get your question, but how about this:

function map(filterSet: IFilterSet, obj: X) {
    (obj as any)['filter1'] = filterSet.filter1;
    (obj as any)['filter2'] = filterSet.filter2;
    (obj as any)['filter3'] = filterSet.filter3;
    (obj as any)['filter4'] = filterSet.filter4;
}

This way, the X instance will get all the properties of filterSet and gets undefined for the ones are not present, but all the fields will end up there.

Or this (if you try to construct a new IFilterSet instance):

function map(obj: X): IFilterSet {
    return {
        filter1: (obj as any)['filter1'],
        filter2: (obj as any)['filter2'],
        filter3: (obj as any)['filter3'],
        filter4: (obj as any)['filter4']
    }
}

Here you will get an instance of IFilterSet, with their fields either undefinedor the value of the filter1 through filter4.

Either way you HAVE TO hardcode the name of fields, I'm not sure if you can get it differently.

Raphaël · Accepted Answer · 2018-01-22 12:52:43Z

Defining optional properties like filter1? does not means that the value will be defined or null. It means that the property may be defined (or not).

Let say you receive the following object:

{
   "name": "foo",
   "type": "bar"
}

You can use it like this:

const filterSet = objectX as IFilterSet;

if (filterSet.filter1 === true) {
    console.log('Do something when filter1 is defined and true');
}
else if (filterSet.filter1 === false) {
    console.log('Do something when filter1 is defined and false');
}
else {
    console.log('filter1 is not true nor false (may be null, undefined or something else)');
}

const value2 = filterSet.filter2 || false;
const value3 = filterSet.filter3 || 0;
console.log('value2 and value3 will always have a value');

You don't really need to use null for those cases.

If you really need to isolate the properties of IFilterSet in a different object. I would recommend using a function like this one:

const filterSetFrom = (source: any) => {
    const filterSet = {};
    ['filter1', 'filter2', 'filter3', 'filter4']
        .forEach((property) => filterSet[property] = source[property] || null);
    return filterSet;
};

Justinas Marozas · Accepted Answer · 2018-01-22 10:48:04Z

0

To have properties of IFilterSet as as properties of X, all you need to do is declare that X extends IFilterSet, or use type assertions if you can't control Xs declaration.

class X implements IFilterSet {
    ...
}
...
const x:X = ...
const filterSet = x as IFilterSet;

If you're making properties of IFilterSet optional to obey lose structure of X, you could have IFilterSet with required properties (without ?) and have X implement Partial<IFilterSet>. Partial<T> gives you a type with all properties of T, but made optional.

answered Jan 22, 2018 at 10:48

Justinas Marozas

2,7321 gold badge21 silver badges40 bronze badges

Collectives™ on Stack Overflow

Typescript Interface with nullable properties

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related