Transforming resx files into TypeScript models before build (npm)

Introduction

For a while now i have been looking for a way to work with resources from .resx files in web applications where i use TypeScript.

I don’t like the manual labour of creating models/interfaces, but i want to work with intellisense in TypeScript and without having to use magic strings (or even enums) while using resource texts.

At first i tried to use T4 templates to generate TypeScript files, but i couldn’t find a nice way to get it to work during build time and so i abonded that idea. A colleague suggested that i could use a gulp task to execute a node module at build to generate the .resx TypeScript models and i followed up on that suggestion.

resx-to-typescript

This node package that i created enables you to transform .resx files to TypeScript models (and add them to your project) at build.

At the moment, the module exposes only one method execute, which takes 3 parameters in:

execute(typeScriptResourcesNamespace, virtualTypeScriptFolder, virtualResxFolder)

  • typeScriptResourcesNamespace – Name of module/namespace for the TypeScript resx models
  • virtualResxFolder – Virtual folder path to scan for .resx files
  • virtualTypeScriptFolder – Virtual TypeScript output path (leave empty to generate models next to .resx files)

To install the package in your web project

npm install resx-to-typescript --save

Also, for this example install gulp if you do not already have it installed

npm install gulp --save

Then, you should have a gulpfile.js in your project root that contains something like:

/// <binding BeforeBuild='default' />
var gulp = require('gulp');
var transformResxToTypescript = require('resx-to-typescript');

gulp.task('default', function (cb) {
    transformResxToTypescript.execute('exampleApp.resources', '/', '/App/Resources');
});

In the above example i want the namespace of the TypeScript models to be exampleApp.resources, scan from the root of the project for .resx files and set the output folder to /App/Resources folder.

Any suggestions for improvements are welcome and i will upgrade the package in case of improvements/new features.

Links

link-github

link-npm

 

2 thoughts on “Transforming resx files into TypeScript models before build (npm)

  1. Hi Martijn, this is exactly what I was looking for, but I do have some questions/suggestions:

    I’ve noticed that the current output doesn’t export the module, is there a reason for this? As it means that Visual studio doesn’t recognise the generated file as a module when using the following statement:
    import resource from 'path';
    An alternative might be to have the option to not add a namespace at all, as in this scenario it’s not really necessary.

    I’m also wondering how you handle different languages, it seems strange to me to have a separate file for each language. An example would be greatly appreciated.

    • Martijn van der Corput says:

      Hi TV,

      First off thanks for the first non spam reply on my blog

      I must admid that i normally don’t use TypeScript import statements and i sort of use the module as a namespace. This, along with MVC bundling works for me in my projects, but i guess i use those techniques because i have been a long time back end developer.

      I think the package should support exporting modules and leaving modules/namepaces blank so will i update the package soon with those features!

      You could handle different languages by creating different MVC bundles that you include dynamically in razor layouts/views. I have not worked out this idea for when importing external modules (with require) but i can image you can create some service that loads the correct resource module based on active application language.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>