Declaring a TypeScript function with properties

Question

I'm writing a library and I want to port it to TypeScript.

Currently it looks something like this:

File index.js

const is = value => {
    // ... Do some returns here
}

is.number = x => typeof x === 'number'
is.bla = x => typeof x === 'bla'

And so on.

I have wrote an interface describing is and all its methods.

type TypeQueryMethod = (val: any) => boolean;

interface Is {
    (val: any): string;
    undefined: TypeQueryMethod;
    null: TypeQueryMethod;
    // ...
}

When I try to mark is with the type: const is: Is = value => ...

It throws an error:

Type '(value: any) => string' is not assignable to type 'Is'.
Property 'undefined' is missing in type '(value: any) => string'.

Which makes sense because the declaration of the object is split.

How do you construct such an object that is both a method, and has methods?

jcalz · Accepted Answer · 2021-08-13 01:53:18Z

10

Update for TypeScript 3.1+

TypeScript 3.1 introduced support for declaring properties on functions, to allow you to do this the way you were doing it to begin with:

const is: Is = (val: any) => typeof val; // okay
is.undefined = (val: any) => typeof val === 'undefined'; 
is.null = (val: any) => (val === null)

For TypeScript versions before 3.1:

If you want to make the type checker happy, you can use Object.assign() to return a fully-formed Is object without building it in stages:

const is: Is = Object.assign(
  (val: any) => typeof val,
  {
    undefined: (val: any) => typeof val === 'undefined',
    null: (val: any) => (val === null)
    // ...
  }
);

Of course, if you don't want to change the structure of your code, then you can do as @Saravana suggests and use a type assertion to just inform the type checker that is is definitely an Is, even though it technically isn't one until you're done building it.

Either way works, but I prefer the Object.assign() method because the type checker will warn you if you neglect to implement something:

// error, "undefined" is missing
const is: Is = Object.assign(
  (val: any) => typeof val,
  {
    null: (val: any) => (val === null)
    // ...
  }
);

while the type assertion method will not:

const is = ((val: any) => typeof val) as any as Is;
is.null = (val) => val === null;
// no error

whereas the type assertion method will not. It's up to you.

Playground link to code

edited Aug 13, 2021 at 1:53

answered Sep 30, 2017 at 15:13

jcalz

339k29 gold badges452 silver badges449 bronze badges

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

2 Comments

SCLeo Over a year ago

The Object.assign approach is just infinitely better than the type assertion version.

jcalz Over a year ago

I don't get it... this answer just got accepted after four years, even though it and the question were obsolete since TypeScript 3.1. 🤷‍♂️ Oh well!

Saravana · Accepted Answer · 2017-09-30 12:23:24Z

4

You cannot implement a function as well as its properties at the same time. You can define the function first and assert it to Is and define the rest of the methods:

const is = ((val: any) => typeof (val)) as any as Is;

is.null = (val) => true;
is.undefined = (val) => true;

Or use a factory function to create Is:

function createIs(): Is {
    const is = ((val: any) => {
        return "";
    }) as Is;
    is.null = (val) => true;
    is.undefined= (val) => true;
    return is;
}

const is: Is = createIs();

edited Sep 30, 2017 at 12:23

answered Sep 30, 2017 at 12:15

Saravana

41k20 gold badges110 silver badges112 bronze badges

2 Comments

jcalz Over a year ago

You should be able to use Object.assign() to create an Is with no type assertions.

GOTO 0 Over a year ago

@jcalz Object.assign is only available when the target version is es6 or higher.

Slavik Meltser · Accepted Answer · 2020-02-17 18:25:29Z

2

All you need to do, is to provide the properties as optional:

type TypeQueryMethod = (val: any) => boolean;

interface Is {
    (val: any): string;
    undefined?: TypeQueryMethod;
    null?: TypeQueryMethod;
    ...
}

And now you can safely define it as Is:

const is: Is = value => ...

answered Feb 17, 2020 at 18:25

Slavik Meltser

10.5k3 gold badges53 silver badges48 bronze badges

Collectives™ on Stack Overflow

Declaring a TypeScript function with properties

File index.js

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

File index.js

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related