Working with javascript in typescript

Question

I have a javascript object which is built dynamically and contains my resources (strings of translation) for my app. It looks as follows:

var ResourceManager = (function () {
    function ResourceManager() {
        var currentLanguage = $('#activeLanguage').html();
        this.resources = {
            get Aanmelden() {
                switch (currentLanguage) {
                case "en-GB":
                    return "Register";
                case "nl-NL":
                    return "Aanmelden";
                default:
                    return "Aanmelden";
                }
            },
            get AlgemeenOpslaan() {
                switch (currentLanguage) {
                    case "en-GB":
                        return "Save";
                    case "nl-NL":
                        return "Opslaan";
                    default:
                        return "Opslaan";
                }
            }
        };

    }
    return ResourceManager;
}());

The neat thing is that this way I can use intellisense to find my translations, just like the functionality provided by MVC. Is there a way to provide the same functionality when I am working in typescript? The main problem here is that I could do:

declare class ResourceManager {

}

This however does not give me intellisense for the methods of this class. The reason I use javascript and not typescript btw, is because if I dynamically build a typescript file, it does not seem to automatically compile this to the javascript file I want to send to the client.

Does anyone know either a way to fix this via a typescript resource file instead of javascript, or allowing my other typescript files to work with intellisense over the javascript object?

Paleo · Accepted Answer · 2017-03-09 16:03:38Z

1

The code in TypeScript

I'm unsure what is the need. Maybe this kind of code?

class ResourceManager {
    private currentLanguage: string;
    constructor() {
        this.currentLanguage = $('#activeLanguage').html();
    }
    public resources = {
        get Aanmelden() {
            switch (this.currentLanguage) {
                case "en-GB":
                    return "Register";
                case "nl-NL":
                default:
                    return "Aanmelden";
            }
        },
        get AlgemeenOpslaan() {
            switch (this.currentLanguage) {
                case "en-GB":
                    return "Save";
                case "nl-NL":
                default:
                    return "Opslaan";
            }
        }
    }
}

Notice: You can call the TypeScript compiler programmatically.

Or a declaration for an existing object

interface Resources {
    readonly Aanmelden: string
    readonly AlgemeenOpslaan: string
}

declare class ResourceManager {
    resources: Resources
}

It is also an elegant solution to output the declaration and the data (the code) in separate files. You could:

Generate the TypeScript definition for the interface Resources;
Generate data in a JSON format;
Write once a JS code (with the help of TS?) that dynamically builds the resources properties with Object.defineProperties, from the JSON data.

Additionally, this kind of build process could help to publish and use the work as a npm package.

edited Mar 9, 2017 at 16:03

answered Mar 9, 2017 at 14:43

Paleo

24k5 gold badges74 silver badges84 bronze badges

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

2 Comments

Kai Over a year ago

That does indeed give me the intellisense, but now each time a new resource gets added I need to add a property to the interface as well. It sounds stupid but I COULD build a ts file AND a js file. Use the ts one just for intellisense and the js file to send to the client I guess. Note that the issue is that I can't seem to programmatically build a typescript file and then compile it so it is included as js in my request.

Paleo Over a year ago

@Kai NB: You can call the TypeScript compiler programmatically. I edited to add the link in the answer.

Collectives™ on Stack Overflow

Working with javascript in typescript

1 Answer 1

The code in TypeScript

Or a declaration for an existing object

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The code in TypeScript

Or a declaration for an existing object

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related