Defining TypeScript variable type function or string

Question

I have this interface:

interface IParameters {
    form: number;
    field: string;
    ...
}

I want the formproperty to be number or function and field to be string or function.

I try something like this:

interface IParameters {
    form: number | Function;
    field: string | Function;
    ...
}

I need this because in my code i use this variables like this:

var form = (typeof _oParameters.form === "function" ? _oParameters.form() : _oParameters.form);
var field = (typeof _oParameters.field === "function" ? _oParameters.field() : _oParameters.field);

I don't want change this variable in all my code from string/number to default function and to prevent setting this variables to other types.

but if I try to call one of this two variable like function:

var param:IParameters;
param.form();
...

I get this error:

Cannot invoke an expression whose type lacks a call signature.

but param.form = 12; works.

The only solution that i have found is to declare form and field to any type.

Is other way to define this variable without any type?

NielsNet · Accepted Answer · 2018-02-13 18:54:27Z

20

If you try to use the code from seriesOne you will notice, that you cannot assign form (or field) a value that isn't a function. You would get a
Type '{ form: string; }' is not assignable to type 'IParameters'. Types of property 'form' are incompatible. Type 'string' is not assignable to type '() => string'.

I found that using form: (() => string) | string; resolves this problem.

You can try the code at the typescript playground.

Working sample:

    interface IParameters {
        form: (() => string) | string;
    }

    function strFunct(): string {
        return 'Hello TypeScript';
    }

    function test() {
        let paramA: IParameters = {
            form: strFunct
        }

        let paramB: IParameters = {
            form: 'Hello stackoverflow'
        }
    }

    class Foo {
        constructor(param: IParameters) {
            var x = typeof param.form === 'string' ? param.form : param.form();
        }
    }

answered Feb 13, 2018 at 18:54

NielsNet

8288 silver badges11 bronze badges

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

2 Comments

Jose A Over a year ago

Woah! Th parenthesis between the function on IParameters did the trick!!

joshstrike Over a year ago

This. Oddly if you write ()=>string|string the compiler will allow it but classes which consume it will only expect ()=>string and will not be allowed to pass a string literal. On the other hand if you reverse the order and write string|()=>string typescript won't parse it. Putting the parentheses around the call signature it fixes both cases.

Matthew Layton · Accepted Answer · 2016-03-30 08:57:32Z

7

Perhaps if you define your union type using a call signature rather than Function, like so...

interface IParameters {
    // form is of type function that returns number, or number literal.
    form: () => number | number;

    // field is of type function that returns a string, or string literal.
    field: () => string | string;
}

class Foo {
    constructor (param: IParameters) {
        var x = typeof param.form === "number" ? param.form : param.form();
        var y = typeof param.field === "string" ? param.field : param.field();
    }
}

Here, I am still checking form and field using typeof, however TypeScript is happy for it to be either a function call, or a value.

answered Mar 30, 2016 at 8:57

Matthew Layton

42.8k59 gold badges213 silver badges345 bronze badges

Comments

Li0liQ · Accepted Answer · 2016-03-30 08:07:29Z

2

Upd
That behavior appears to be an issue #3812 with TypeScript.
It is to be fixed as a part of TypeScript 2.0 according to the milestone assigned.

Original answer

You could use instanceof as a type guard like

var field = (_oParameters.field instanceof Function ? _oParameters.field() : _oParameters.field);

edited Mar 30, 2016 at 8:07

answered Mar 29, 2016 at 14:08

Li0liQ

11.3k38 silver badges52 bronze badges

3 Comments

TotPeRo Over a year ago

if i use your code i get the same error Cannot invoke an expression whose type lacks a call signature. with this define form: number | Function;

Li0liQ Over a year ago

You're right. That appeared to be an issue with TypeScript. It'll hopefully be fixed at v2.0.

jayarjo Over a year ago

is it fixed now?

Collectives™ on Stack Overflow

Defining TypeScript variable type function or string

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related