CODEWITHSUNDEEP
typescript
Mark
Mark

Reputation: 2587

TypeScript creating global Variables and Methods

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

Upvotes: 0

Views: 94

Answers (1)

Nitzan Tomer
Nitzan Tomer

Reputation: 164357

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.

Upvotes: 1

Related Questions