TypeScript creating global Variables and Methods

Question

I am new to Typescript... I have some external js files (have to keep them and work with them)

So in TypeScript I am trying to create a GlobalVariables object and GlobalMethods object that maps to the external js files vars and functions. I have the GlobalVariables object working, not the GlobalMethods object. Code below...

The STATUS_MESSAGE_RESPONSE property that's commented out is the part not working...

declare function HelloWorld(): string;
declare var siteRoot: string;
declare function StatusMessageResponse(msg: any, callBackFunction: string): void;

export const GlobalVariables = Object.freeze({
    BASE_API_URL: 'http://example.com/',
    SITE_ROOT: siteRoot,
});

export const GlobalMethods = Object.freeze({
    HELLO_WORD: HelloWorld(),
    //STATUS_MESSAGE_RESPONSE(msg: any, callBackFunction: string): StatusMessageResponse(msg: any, callBackFunction: string): void,
});

Nitzan Tomer · Accepted Answer · 2017-02-02 18:14:04Z

1

It should be:

export const GlobalMethods = Object.freeze({
    HELLO_WORD: HelloWorld,
    STATUS_MESSAGE_RESPONSE: StatusMessageResponse
});

When assigning (using =) you must pass a value not a type.
If you want to specify a type then:

export const GlobalMethods: {
    HELLO_WORD: () => string;
    STATUS_MESSAGE_RESPONSE: (msg: any, callBackFunction: string) => void
} = Object.freeze({
    HELLO_WORD: HelloWorld,
    STATUS_MESSAGE_RESPONSE: StatusMessageResponse
});

Edit

Let's start with the simple assignment:

export const GlobalMethods = Object.freeze({
    HELLO_WORD: HelloWorld,
    STATUS_MESSAGE_RESPONSE: StatusMessageResponse
});

This is all javascript, the object that is being passed to Object.freeze is a simple object containing two properties: HELLO_WORD and STATUS_MESSAGE_RESPONSE and they reference two functions that you've declared that are present in the global scope.

To spice things up we can annotate it with types.
There are several ways to accomplish that, all of these are equivalent:

export const GlobalMethods: {
    HELLO_WORD: () => string;
    STATUS_MESSAGE_RESPONSE: (msg: any, callBackFunction: string) => void
} = Object.freeze({ ... });

Using an interface:

interface MyFunctions {
    HELLO_WORD: () => string;
    STATUS_MESSAGE_RESPONSE: (msg: any, callBackFunction: string) => void
}
export const GlobalMethods: MyFunctions = Object.freeze({ ... });

Using type alias:

type MyFunctions = {
    HELLO_WORD: () => string;
    STATUS_MESSAGE_RESPONSE: (msg: any, callBackFunction: string) => void
}
export const GlobalMethods: MyFunctions = Object.freeze({ ... });

You can also type assert instead of declaring the type for the variable:

export const GlobalMethods = Object.freeze({ ... }) as MyFunctions;

All of the above declare a type that contains two properties of function types with specific signatures:

HELLO_WORD is a function with no args which returns a string: () => string
STATUS_MESSAGE_RESPONSE is a function with two args msg of type any and callBackFunction of type string (probably a mistake?) and the function doesn't return.

edited Feb 2, 2017 at 18:14

answered Feb 2, 2017 at 17:37

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

6 Comments

Mark Over a year ago

Hey mate, it looks like what you have is correct. But can you explain it to me a little more? I'm a newbie to TypeScript... Also, the HELLO_WORD returns the function structure, not the string? It returns, function HelloWorld() { return "Hello World!"; } .

Nitzan Tomer Over a year ago

Check my revised answer. Hopefully I managed to clear things for you

Mark Over a year ago

Thanks! But, still why doesn't HELLO_WORD return the string "Hello World!"? Instead it returns the function structure?

Nitzan Tomer Over a year ago

Because it has a reference to the function object. I haven't noticed that in your code you're doing HELLO_WORD: HelloWorld(), I have it as HELLO_WORD: HelloWorld (notice that my version doesn't end with ())

Mark Over a year ago

I guess it does return the string, just not in console.log()... Thanks again mate.

|

Collectives™ on Stack Overflow

TypeScript creating global Variables and Methods

1 Answer 1

Edit

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related