Hello
And here, another (and last) article is an example of my framework for generating a TypeScript glue code: Reinforced.Typings (before that there was another one and more ). Today, we learn how to automatically generate TypeScript wrappers for calls to MVC controller methods, provide them with documentation and lay them out in different files. I hope you will appreciate how quickly and easily such problems are solved using RT. As part of my tutorial, we implement the generation of a helper class for calling controller methods using jQuery and promises, as well as a service for angular.js, which is ready for embedding into your application and bringing transparent calls to server methods. Next, we will include in the generated TypeScript documentation for this case (import from XMLDOC) and decompose it in files so that it does not mix. Anyone interested and willing to have such a thing in their projects, welcome under cat.

Prologue

In short, RT uses the code generator system to generate the source TypeScript code. Recently (version 1.2.0) I abandoned the practice of writing TypeScript code directly into an open text stream (which was inconvenient, but very quickly) and came to the practice of using a very simple AST (Abstract Syntax Tree) . In fact, this tree is very basic, far from complete, and it is focused on TypeScript declaration elements. Well, that is, without expressions, statements, switches, variable creatures, etc. Only classes / interfaces, methods, fields, modules. After the introduction of AST, I will not hide, it became easier. Including formatting the displayed code, as opposed to the old solution, when the user had to take care of formatting on his own. Yes, of course, in a certain sense, this is a compromise in usher of flexibility, but in terms of profitability and ease of use, but in general, it seems to me, the game is worth the candle. In addition, in the main places no one restricts you in the type of tree nodes. What does it mean? And this means that you can insert an abusive commentary (even multi-line) into the middle of a class through AST. Yes, yes, and he also correctly set the tab at the beginning of the line. Well, let's get started.

Right off the bat

Let me explain with a simple example - generating jQuery wrappers with promises for controller calls. Because the angular way may be alien to someone, but with jQuery, in general, everything is clear.

So, this is given: a simple ASP.NET MVC application, jQuery, a controller with methods that you want to pull from the client's TypeScript, several View models and your itchy hands.
Task: set the server API in the TypeScript class, so as not to be steamed with the constant $ .post / $. Load, or, well, $ .ajax.
Decision:

Step 0. Infrastructure

I will mark here the test code that we have, so that it is something to make a start from.
')
Modelka:

2. public class SampleResponseModel { public string Message { get ; set ; } public bool Success { get ; set ; } public string CurrentTime { get ; set ; } }
3. public class SampleResponseModel { public string Message { get ; set ; } public bool Success { get ; set ; } public string CurrentTime { get ; set ; } }
4. public class SampleResponseModel { public string Message { get ; set ; } public bool Success { get ; set ; } public string CurrentTime { get ; set ; } }
5. public class SampleResponseModel { public string Message { get ; set ; } public bool Success { get ; set ; } public string CurrentTime { get ; set ; } }
6. public class SampleResponseModel { public string Message { get ; set ; } public bool Success { get ; set ; } public string CurrentTime { get ; set ; } }
7. public class SampleResponseModel { public string Message { get ; set ; } public bool Success { get ; set ; } public string CurrentTime { get ; set ; } }

Controller:

2. public class JQueryController : Controller
3. {
4. public ActionResult SimpleIntMethod ( )
5. {
6. return Json ( new Random ( ) . Next ( 100 ) ) ;
7. }
9. public ActionResult MethodWithParameters ( int num, string s, bool boolValue )
10. {
11. return Json ( string . Format ( "{0} - {1} - {2}" , num, s, boolValue ) ) ;
12. }
14. public ActionResult ReturningObject ( )
15. {
16. var result = new SampleResponseModel ( )
17. {
18. CurrentTime = DateTime . Now . ToLongTimeString ( ) ,
19. Message = "Hello!" ,
20. Success = true
21. } ;
22. return Json ( result ) ;
23. }
25. public ActionResult ReturningObjectWithParameters ( string echo )
26. {
27. var result = new SampleResponseModel ( )
28. {
29. CurrentTime = DateTime . Now . ToLongTimeString ( ) ,
30. Message = echo,
31. Success = true
32. } ;
33. return Json ( result ) ;
34. }
36. public ActionResult VoidMethodWithParameters ( SampleResponseModel model )
37. {
38. return null ;
39. }
40. }

In addition, we will get a TypeScript file (which I have in /Scripts/IndexPage.ts) for testing. Here is this (for example, MVVM followers forgive me, the material below will be for you):

2. module Reinforced. Typings . Samples . Difficult . CodeGenerators . Pages {
3. export class IndexPage {
4. constructor ( ) {
5. $ ( '#btnSimpleInt' ) . click ( this . btnSimpleIntClick . bind ( this ) ) ;
6. $ ( '#btnMethodWithParameters' ) . click ( this . btnMethodWithParametersClick . bind ( this ) ) ;
7. $ ( '#btnReturningObject' ) . click ( this . btnReturningObjectClick . bind ( this ) ) ;
8. }
10. private btnSimpleIntClick ( ) { }
12. private btnMethodWithParametersClick ( ) { }
14. private btnReturningObjectClick ( ) { }
15. }
16. }

Important! Don't forget to set yourself the jQuery taypings from NuGet from DefinitelyTyped. Otherwise, there will be problems with compiling TS.

Well and a sin not to make test (it is supposed that jQuery at you is already connected). Rewrite your Index.cshtml, for example, like this:

2. < span id = "loading" > < / span >
3. Result: < strong id = "result" > < / strong >
4. < button class = "btn btn-primary" id = "btnSimpleInt" > Tynts < / button >
5. < button class = "btn btn-default" id = "btnMethodWithParameters" > Klac < / button >
6. < button class = "btn btn-default" id = "btnReturningObject" > Bums < / button >
7. < button class = "btn btn-default" id = "btnReturningObjectWithParameters" > Bidd < / button >
8. < button class = "btn btn-default" id = "btnVoidMethodWithParameters" > Quack! < / button >
9. @section Scripts
10. {
11. < script type = "text / javascript" src = "/Scripts/IndexPage.js" > < / script >
12. < script type = "text / javascript" src = "/Scripts/query.js" > < / script >
13. < script type = "text / javascript" >
14. $ (document) .ready (function () {
15. var a = new Reinforced.Typings.Samples.Difficult.CodeGenerators.Pages.IndexPage ();
16. })
17. < / script >
18. }

You must have noticed the inclusion of query.js in the document. Do not worry - it is necessary, in the next section I will explain what's what.

Everything, it was a footcloth test infrastructure. It will be easier later.

Step 1. Requests

First of all, let's move only one method into a separate TypeScript class, which we will use to query the server. Just jQuery in this regard is somewhat cumbersome and I would not like to repeat all this sample code in each method for the sake of readability. So, a small class with a small method to make requests to the server:

/Scripts/query.ts

2. class QueryController {
3. public static query < T > ( url : string , data : any , progressSelector : string , disableSelector : string = '' ) : JQueryPromise < T > {
4. var promise = jQuery. Deferred ( ) ;
5. var query = {
6. data : JSON. stringify ( data )
7. type : 'post' ,
8. dataType : 'json' ,
9. contentType : 'application / json' ,
10. timeout : 9000000
11. traditional : false ,
12. complete : ( ) => {
13. if ( progressSelector && progressSelector. length > 0 ) {
14. $ ( progressSelector ) . find ( 'span [data-role = "progressContainer"]' ) . remove ( ) ;
15. }
16. if ( disableSelector && disableSelector. length > 0 ) {
17. $ ( disableSelector ) . prop ( 'disabled' , false ) ;
18. }
19. } ,
20. success : ( response : T ) => {
21. promise. resolve ( response ) ;
22. } ,
23. error : ( request , status , error ) => {
24. promise. reject ( { Success : false , Message : error. toString ( ) , Data : error } ) ;
25. }
26. } ;
28. if ( progressSelector && progressSelector. length > 0 ) {
29. $ ( progressSelector ) . append ( '<span data-role = "progressContainer"> Loading ... </ span>' ) ;
30. }
32. if ( disableSelector && disableSelector. length > 0 ) {
33. $ ( disableSelector ) . prop ( 'disabled' , true ) ;
34. }
36. $. ajax ( url , < any > query ) ;
37. return promise ;
38. }
39. }

As you can see, the method is extremely simple; it takes as input the URL for the request, the data (any JS object), and also to make it easier to use, I made two parameters: one to designate the selector of the HTML element that should be disabled at the time of the request, and one ... Well, about the same, only for the element to which the inscription "Loading ..." will be subscribed. I suppose it is self-evident that the inscription “Loading ...” you can easily replace with your own. Returns this jQuery-yevsky Promise method to which you can add .then / .fail / .end and others. However, I believe that the target audience of this article and without me know how to work with promises. :)

Step 2. Attributes

Since through reflection it is impossible to determine what our controller methods return, we will make an attribute that will mark all methods of our JQueryController, for which we need to generate a wrapper. It will look, for example, like this:

2. public class JQueryMethodAttribute : TsFunctionAttribute
3. {
4. public JQueryMethodAttribute ( Type returnType )
5. {
6. StrongType = returnType ;
7. CodeGeneratorType = typeof ( JQueryActionCallGenerator ) ;
8. }
9. }

Here we kill two birds with one stone and specify the CodeGeneratorType for this method. Do not worry that it is not there yet - we will write it in the next section. As for the rest, the existing attribute can be placed above our controller methods. At the same time we will put [TsClass], without departing from the cash register:

2. [ TsClass ]
3. public class JQueryController : Controller
4. {
5. [ JQueryMethod ( typeof ( int ) ) ]
6. public ActionResult SimpleIntMethod ( )
7. {
8. // fold
9. }
11. [ JQueryMethod ( typeof ( string ) ) ]
12. public ActionResult MethodWithParameters ( int num, string s, bool boolValue )
13. {
14. // fold
15. }
17. [ JQueryMethod ( typeof ( SampleResponseModel ) ) ]
18. public ActionResult ReturningObject ( )
19. {
20. // fold
21. }
23. [ JQueryMethod ( typeof ( SampleResponseModel ) ) ]
24. public ActionResult ReturningObjectWithParameters ( string echo )
25. {
26. // fold
27. }
29. [ JQueryMethod ( typeof ( void ) ) ]
30. public ActionResult VoidMethodWithParameters ( SampleResponseModel model )
31. {
32. // fold
33. }
34. }

Just do not forget to put [TsInterface] on the model. Otherwise, as Hmayak Hakobyan used to say, “no miracle will happen”.

2. [ TsInterface ]
3. public class SampleResponseModel
4. {
5. // fold
6. }

Step 3. Code generator

The theory is relatively simple. RT collects in a heap information about what you want to see from your C # types in the resulting TypeScript and in what form, then begins to go round this good in depth, starting with namespaces and going down to the members of the class and the parameters of the declared methods. Upon encountering this or that entity, RT calls the corresponding code generator (it instantiates instances of code generators lazily, with “1 instance for the whole export process” with flytime). This process can be influenced by specifying which code generator you want to use. This can be done using the attribute configuration (CodeGeneratorType field, which is in any RT attribute) - there is no “fool protection”, but it is assumed that you specify the typeof of the heir from the Reinforced.Typings.Generators.ITsCodeGenerator interface with the correct T corresponding to the entity above which is the attribute. You can also use the Fluent call .WithCodeGenerator. There is already a "foolproof" and you will not be able to specify an unsuitable code generator.
There are several built-in code generators available. They are all located in the Reinforced.Typings.Generators namespace. There are code generators for the interface, class, constructor, enumeration, field, property, method, and method parameter. The easiest way to make your code generator is to inherit from the existing one. Further (by increasing complexity) - inherit from TsCodeGeneratorBase <T1, T2>, where T1 is the type of input reflection-entity, and T2 is the type of result in the syntax tree (heir to RtNode). Well, the difficult option is to implement the ITsCodeGenerator on-line independently, which in most cases is not recommended, because it requires knowledge of some subtleties and reading the source, and there is no need.
We will make our JQueryActionCallGenerator simply inheriting from the built-in code generator for methods. So, here is our code generator with detailed comments:

2. using System ;
3. using System.Linq ;
4. using System.Reflection ;
5. using Reinforced.Typings.Ast ;
6. using Reinforced.Typings.Generators ;
9. /// <summary>
10. /// Our code generator for wrappers on calls to the controller method.
11. /// It is sharpened to take MethodInfo as input and produce as output
12. /// instance of RtFunction, which is a piece of the syntax tree
13. /// with TypeScript.
14. /// As mentioned above, we inherit from the built-in RT MethodCodeGenerator,
15. /// which normally generates a method with a signature and an empty implementation
16. /// </ summary>
17. public class JQueryActionCallGenerator : MethodCodeGenerator
18. {
19. /// <summary>
20. /// Naturally, we overload the GenerateNode method. Actually, it is almost the only
21. /// and the main method in the code generator.
22. /// </ summary>
23. /// <param name = "element"> Method for which code will be generated as MethodInfo </ param>
24. /// <param name = "result">
25. /// Result AST-node (RtFunction).
26. /// We do not create a node from scratch. And to be honest, I forgot why I made such an architectural decision :)
27. /// But we can still return null to exclude the node / method from the final TypeScript file
28. /// </ param>
29. /// <param name = "resolver">
30. /// And this is an instance of TypeResolver. This is a special class that we can use.
31. /// to display types in the resulting TypeScript, so as not to do anything by hand.
32. /// </ param>
33. /// <returns> RtFunction (also known as the syntax tree node, also known as the AST node) </ returns>
34. public override RtFuncion GenerateNode ( MethodInfo element, RtFuncion result, TypeResolver resolver )
35. {
36. // First, generate the "as usual" method wrapper
37. // Next, we will expand and complement it
38. result = base . GenerateNode ( element, result, resolver ) ;
40. // If for some reason an empty node is generated, then it should be
41. // we will not interfere in this process
42. if ( result == null ) return null ;
44. // Make our method static
45. result . IsStatic = true ;
47. // And also add a couple of extra parameters to the method to specify
48. // element that will be disabled while the server method is being called,
49. // as well as the element to which the loading indicator should be added
50. result . Arguments . Add (
51. new RtArgument ( )
52. {
53. Identifier = new RtIdentifier ( "loadingPlaceholderSelector" ) ,
54. Type = resolver . ResolveTypeName ( typeof ( string ) ) ,
55. DefaultValue = "''"
56. } ) ;
58. result . Arguments . Add (
59. new RtArgument ( )
60. {
61. Identifier = new RtIdentifier ( "disableElement" ) ,
62. Type = resolver . ResolveTypeName ( typeof ( string ) ) ,
63. DefaultValue = "''"
64. } ) ;
66. // Store the original method return value
67. // for further we need to parameterize it with jQueryPromise
68. var retType = result . ReturnType ;
70. // ... and if the return type is void, we just leave JQueryPromise <any>
71. bool isVoid = ( retType is RtSimpleTypeName ) && ( ( ( RtSimpleTypeName ) retType ) . TypeName == "void" ) ;
73. // here I use TypeResolver to get an AST node for the name of the type "any"
74. // just to demonstrate the use of TypeResolver
75. // (well, also because I'm lazy enough to create with any hands)
76. if ( isVoid ) retType = resolver . ResolveTypeName ( typeof ( object ) ) ;
78. // OK, redefine the return value of our method, wrapping it
79. // in jQueryPromise
80. // We use the RtSimpleType class, passing generic arguments to it,
81. // so as not to write angle brackets
82. result . ReturnType = new RtSimpleTypeName ( "JQueryPromise" , new [ ] { retType } ) ;
84. // Now it's up to the parameters. We get them through reflection.
85. // Next, we use the extension. GetName () to get the name of the parameter
86. // This extension comes with Reinforced.Typings and returns the name of the parameter.
87. // method with all potential overloads via Fluent configuration or
88. // attribute [TsParameter]
89. var p = element . GetParameters ( ) . Select ( c => string . Format ( "'{0}': {0}" , c . GetName ( ) ) ) ;
91. // Link parameters to generate method body code
92. var dataParameters = string . Join ( "," , p ) ;
94. // Get the path to the controller
95. // Here we have a simple solution that requires having a MVC route on / {controller} / {action}
96. // it is assumed that he is (although whom I cheat, he is in 90% of applications)
97. string controller = element . DeclaringType . Name . Replace ( "Controller" , String . Empty ) ;
98. string path = String . Format ( "/ {0} / {1}" , controller, element . Name ) ;
100. // Now let's create a glue-code with a call to QueryController, which we defined in query.ts
101. string code = String . Format (
102. @ "return QueryController.query <{2}> (
103. '{0}',
104. {{ {one} }},
105. loadingPlaceholderSelector,
106. disableElement
107. ); " ,
108. path, dataParameters, retType ) ;
110. // Wrap the code in RtRaw and stuff as the body into our result
111. result . Body = new RtRaw ( code ) ;
113. // Now let's add some JSDOC to make the results of our work more obvious.
114. result . Documentation = new RtJsdocNode ( ) { Description = String . Format ( "Wrapper method for call {0} of {1}" , element . Name , element . DeclaringType . Name ) } ;
116. // Actually, that's all. Return RtFunction
117. // According to the default settings of the config, this good will be recorded in the project.ts
118. return result ;
119. }
120. }

Kodogenerator ready. It remains only to make our project Rebuild. If you have any difficulties with debugging generators, then you can use the Context generator property of type ExportContext. In addition, there is a property Warnings, which is a collection of RtWarning-s. Add there your own - it will appear in the Warnings window in the studio during the build (this feature was added just recently, in version 1.2.2).

For those who can not wait, here is the result of the work of the code generator:

2. module Reinforced. Typings . Samples . Difficult . CodeGenerators . Models {
3. export interface ISampleResponseModel
4. {
5. Message : string ;
6. Success : boolean ;
7. CurrentTime : string ;
8. }
9. }
10. module Reinforced. Typings . Samples . Difficult . CodeGenerators . Controllers {
11. export class jQueryController
12. {
13. / ** Wrapper method for call SimpleIntMethod of JQueryController * /
14. public static SimpleIntMethod ( loadingPlaceholderSelector : string = '' , disableElement : string = '' ) : JQueryPromise < number >
15. {
16. return QueryController. query < number > (
17. '/ JQuery / SimpleIntMethod' ,
18. { }
19. loadingPlaceholderSelector ,
20. disableElement
21. ) ;
22. }
23. / ** Wrapper method for call MethodWithParameters of JQueryController * /
24. public static MethodWithParameters ( num : number , s : string , boolValue : boolean , loadingPlaceholder : string : string = '' , disableElement : string = '' ) : JQueryPromise < string >
25. {
26. return QueryController. query < string > (
27. '/ JQuery / MethodWithParameters' ,
28. { 'num' : num , 's' : s , 'boolValue' : boolValue } ,
29. loadingPlaceholderSelector ,
30. disableElement
31. ) ;
32. }
33. / ** Wrapper method for call ReturningObject of JQueryController * /
34. public static ReturningObject ( loadingPlaceholderSelector : string = '' , disableElement : string = '' ) : JQueryPromise < Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel >
35. {
36. return QueryController. query < Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel > (
37. '/ JQuery / ReturningObject' ,
38. { }
39. loadingPlaceholderSelector ,
40. disableElement
41. ) ;
42. }
43. / ** Wrapper method for call ReturningObjectWithParameters of JQueryController * /
44. public static ReturningObjectWithParameters ( echo : string , loadingPlaceholderSelector : string = '' , disableElement : string = '' ) : JQueryPromise < Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel >
45. {
46. return QueryController. query < Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel > (
47. '/ JQuery / ReturningObjectWithParameters' ,
48. { 'echo' : echo } ,
49. loadingPlaceholderSelector ,
50. disableElement
51. ) ;
52. }
53. / ** Wrapper method for call VoidMethodWithParameters of JQueryController * /
54. public static VoidMethodWithParameters ( model : Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel , loadingPlaceholderSelector : string = '' , disableElement : string = '' ) : JQueryPromise < any >
55. {
56. return QueryController. query < any > (
57. '/ JQuery / VoidMethodWithParameters' ,
58. { 'model' : model } ,
59. loadingPlaceholderSelector ,
60. disableElement
61. ) ;
62. }
63. }
64. }

It is also an important point - if your code generator worked incorrectly and produced an error that made your TypeScript uncollectible and now you have no solution to generate new taipings, go to Reinforced.Typings.settings.xml, which is at the root of your project and set there RtBypassTypeScriptCompilation to true. This will shift the MSBuild task of building TypeScripts so that it is called after the project is built (and not before, as happens by default). However, do not forget to return it later, because as being active during the execution of publishing tasks, this parameter can lead to the fact that the typing scripts will not be rebuilt before publishing. And this is not really fun.

Step 4. Use

At this point, you can return to your IndexPage.ts and use static calls from the JQueryController class that we generated. In general, everything is quite prosaic and monotonous, so I will recommend that you do it yourself and experience how IntelliSense works. The code for the entire IndexPage.ts is shown below:

2. module Reinforced. Typings . Samples . Difficult . CodeGenerators . Pages {
3. import JQueryController = Reinforced. Typings . Samples . Difficult . CodeGenerators . Controllers . JQueryController ;
5. export class IndexPage {
6. constructor ( ) {
7. $ ( '#btnSimpleInt' ) . click ( this . btnSimpleIntClick . bind ( this ) ) ;
8. $ ( '#btnMethodWithParameters' ) . click ( this . btnMethodWithParametersClick . bind ( this ) ) ;
9. $ ( '#btnReturningObject' ) . click ( this . btnReturningObjectClick . bind ( this ) ) ;
10. $ ( '#btnReturningObjectWithParameters' ) . click ( this . btnReturningObjectWithParametersClick . bind ( this ) ) ;
11. $ ( '#btnVoidMethodWithParameters' ) . click ( this . btnVoidMethodWithParametersClick . bind ( this ) ) ;
12. }
14. private btnSimpleIntClick ( ) {
15. JQueryController. SimpleIntMethod ( '#loading' , '#btnSimpleInt' )
16. . then ( r => $ ( '#result' ) . html ( 'Server tells us' + r ) ) ;
17. }
19. private btnMethodWithParametersClick ( ) {
20. JQueryController. MethodWithParameters ( Math. Random ( ) , 'string' + Math. Random ( ) , Math. Random ( ) > 0.5 , '#loading' , '#btnMethodWithParameters' )
21. . then ( r => {
22. $ ( '#result' ) . html ( r ) ;
23. } ) ;
24. }
26. private btnReturningObjectClick ( ) {
27. JQueryController. ReturningObject ( '#loading' , '#btnReturningObject' )
28. . then ( r => {
29. var s = "<pre> {<br/>" ;
30. for ( var key in r ) {
31. s + = `$ { key } : $ { r [ key ] } , \ n` ;
32. }
33. s + = '} </ pre>' ;
34. $ ( '#result' ) . html ( s ) ;
35. } ) ;
36. }
38. private btnReturningObjectWithParametersClick ( ) {
39. var str = 'Random number:' + Math. random ( ) * 100 ;
40. JQueryController. ReturningObjectWithParameters ( str , '#loading' , '#btnReturningObjectWithParameters' )
41. . then ( r => {
42. var s = "<pre> {<br/>" ;
43. for ( var key in r ) {
44. s + = `$ { key } : $ { r [ key ] } , \ n` ;
45. }
46. s + = '} </ pre>' ;
47. $ ( '#result' ) . html ( s ) ;
48. } ) ;
49. }
51. private btnVoidMethodWithParametersClick ( ) {
52. JQueryController. VoidMethodWithParameters ( {
53. Message : 'Hello' ,
54. Success : true
55. CurrentTime : null
56. } , '#loading' , '#btnVoidMethodWithParameters' )
57. . then ( ( ) => {
58. $ ( '#result' ) . html ( 'not return result' ) ;
59. } ) ;
60. }
61. }
62. }

For lovers of Angular

In principle, all the same. However, in addition to the method generator, we will need a generator for the entire class, because, as in the best traditions of Angulyar, it would be nice to export our server controller to an angular service. So, set DefinitelyTyped for angular.js, connect the angular itself via NuGet and let's look at the code of the method generator. It is slightly different from jQuery-evskogo due to the fact that you need to use other promises, as well as use $ http.post instead of $ .ajax:

2. using System ;
3. using System.Linq ;
4. using System.Reflection ;
5. using Reinforced.Typings.Ast ;
6. using Reinforced.Typings.Generators ;
8. /// <summary>
9. /// Generator wrapper methods for angular.js
10. /// </ summary>
11. public class AngularActionCallGenerator : MethodCodeGenerator
12. {
13. public override RtFuncion GenerateNode ( MethodInfo element, RtFuncion result, TypeResolver resolver )
14. {
15. result = base . GenerateNode ( element, result, resolver ) ;
16. if ( result == null ) return null ;
18. // overload the type of method under our promise
19. var retType = result . ReturnType ;
20. bool isVoid = ( retType is RtSimpleTypeName ) && ( ( ( RtSimpleTypeName ) retType ) . TypeName == "void" ) ;
22. // exactly the same trick with void methods
23. if ( isVoid ) retType = resolver . ResolveTypeName ( typeof ( object ) ) ;
25. // use angular.IPromise instead of jQueryPromise
26. result . ReturnType = new RtSimpleTypeName ( new [ ] { retType } , "angular" , "IPromise" ) ;
28. // method parameters - by the same principle
29. var p = element . GetParameters ( ) . Select ( c => string . Format ( "'{0}': {0}" , c . GetName ( ) ) ) ;
30. var dataParameters = string . Join ( "," , p ) ;
32. // Get the path to the controller
33. string controller = element . DeclaringType . Name . Replace ( "Controller" , String . Empty ) ;
34. string path = String . Format ( "/ {0} / {1}" , controller, element . Name ) ;
36. // Generate code via this.http.post
37. const string code = @ "var params = {{{1}}};
38. return this.http.post ('{0}', params)
39. .then ((response) => {{return response.data;}}); " ;
41. // also wrapped in RtRaw
42. RtRaw body = new RtRaw ( String . Format ( code, path, dataParameters ) ) ;
43. result . Body = body ;
44. return result ;
45. }
46. }

That's all the magic. Do not forget to set this code generator for all angular-friendly controller methods via an attribute or through a Fluent configuration.

And now let's make a code generator for the class that will contain these methods. The specificity is that the methods are no longer static, we will need to make a private http field that will store the $ http service, a constructor that will inject this service, and also register our controller service in our application.
Here I assume that you already have somewhere creating a module of your application by calling angular.module and the module itself is in the global variable app.

2. using System ;
3. using Reinforced.Typings.Ast ;
4. using Reinforced.Typings.Generators ;
6. /// <summary>
7. /// A generator that wraps our methods in an angular service.
8. /// inherit from the standard class generator
9. /// </ summary>
10. public class AngularControllerGenerator : ClassCodeGenerator
11. {
12. public override RtClass GenerateNode ( Type element, RtClass result, TypeResolver resolver )
13. {
14. // Again, start with the "standard" class generated for the controller
15. result = base . GenerateNode ( element, result, resolver ) ;
16. if ( result == null ) return null ;
18. // Add some documentation
19. result . Documentation = new RtJsdocNode ( ) { Description = "Result of AngularControllerGenerator activity" } ;
21. // create the type name angular.IHttpService
22. var httpServiceType = new RtSimpleTypeName ( "IHttpService" ) { Namespace = "angular" } ;
24. // Add a constructor, ...
25. RtConstructor constructor = new RtConstructor ( ) ;
26. // ... host $ http: angular.IHttpService
27. constructor . Arguments . Add ( new RtArgument ( ) { Type = httpServiceType, Identifier = new RtIdentifier ( "$ http" ) } ) ;
28. // his body will contain a single line -
29. // $http
30. constructor . Body = new RtRaw ( "this.http = $http;" ) ;
32. // , $http
33. RtField httpServiceField = new RtField ( )
34. {
35. Type = httpServiceType,
36. Identifier = new RtIdentifier ( "http" ) ,
37. AccessModifier = AccessModifier . Private ,
38. Documentation = new RtJsdocNode ( ) { Description = " $http " }
39. } ;
41. //
42. result . Members . Add ( httpServiceField ) ;
43. result . Members . Add ( constructor ) ;
45. // ,
46. // Api.%Something%Controller
47. const string initializerFormat =
48. "if (window['app']) window['app'].factory('Api.{0}', ['$http', ($http: angular.IHttpService) => new {1}($http)]);" ;
50. //
51. RtRaw registration = new RtRaw ( String . Format ( initializerFormat,element . Name ,result . Name ) ) ;
53. // ( Context),
54. // Context.Location.CurrentModule.CompilationUnits
55. // CompilationUnits RtNode,
56. // , RtRaw
57. // ,
58. Context . The Location . CurrentModule . CompilationUnits . Add ( registration ) ;
59. return result ;
60. }
61. }

Attach this code generator to your controllers in any way (attribute or Fluent configuration). After that, rebuild the project and safely inject the resulting service into your angular controllers.
Again, the result of this code generator for impatient:

2. module Reinforced. Typings . Samples . Difficult . CodeGenerators . Controllers {
3. if ( window [ 'app' ] ) window [ 'app' ] . factory ( 'Api.AngularController' , [ '$http' , ( $http : ng. IHttpService ) => new AngularController ( $http ) ] ) ;
4. /** Result of AngularControllerGenerator activity */
5. export class AngularController
6. {
7. constructor ( $http : ng. IHttpService )
8. {
9. this . http = $http ;
10. }
11. public SimpleIntMethod ( ) : ng. IPromise < number >
12. {
13. var params = { } ;
14. return this . http . post ( '/Angular/SimpleIntMethod' , params )
15. . then ( ( response ) => { response. data [ 'requestParams' ] = params ; return response. data ; } ) ;
16. }
17. public MethodWithParameters ( num : number , s : string , boolValue : boolean ) : ng. IPromise < string >
18. {
19. var params = { 'num' : num , 's' : s , 'boolValue' : boolValue } ;
20. return this . http . post ( '/Angular/MethodWithParameters' , params )
21. . then ( ( response ) => { response. data [ 'requestParams' ] = params ; return response. data ; } ) ;
22. }
23. public ReturningObject ( ) : ng. IPromise < Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel >
24. {
25. var params = { } ;
26. return this . http . post ( '/Angular/ReturningObject' , params )
27. . then ( ( response ) => { response. data [ 'requestParams' ] = params ; return response. data ; } ) ;
28. }
29. public ReturningObjectWithParameters ( echo : string ) : ng. IPromise < Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel >
30. {
31. var params = { 'echo' : echo } ;
32. return this . http . post ( '/Angular/ReturningObjectWithParameters' , params )
33. . then ( ( response ) => { response. data [ 'requestParams' ] = params ; return response. data ; } ) ;
34. }
35. public VoidMethodWithParameters ( model : Reinforced. Typings . Samples . Difficult . CodeGenerators . Models . ISampleResponseModel ) : ng. IPromise < any >
36. {
37. var params = { 'model' : model } ;
38. return this . http . post ( '/Angular/VoidMethodWithParameters' , params )
39. . then ( ( response ) => { response. data [ 'requestParams' ] = params ; return response. data ; } ) ;
40. }
41. / ** Keeps $ http instance received on construction * /
42. private http : ng. IHttpService ;
43. }
44. }

By the way, the full version of the file from the example live is here .

Add documentation

Also in RT there is the ability to automatically import XMLDOC from the controller methods into the resulting TypeScript code. In addition to writing RtJsdocNode directly with your hands, the following approach is possible:
1) Go to Reinforced.Typings.settings.xml and set the RtGenerateDocumentation parameter to True
2) Turn on the export of XMLDOC for your project. To do this, right-click on your .csproj-e, select Properties, go to the Build tab and tick the “XML Documentation File” in the Output section (see picture). Then save the project via Ctrl-S

3) Reassemble to see the changes. Here it is important to notice two features: firstly, by default, this tick is already in the Release-configuration. Therefore, as an option, you can set the RtGenerateDocumentation parameter and switch the project build configuration to Release.
The second feature is that if you, by fate, export types with a fluent configuration from another assembly, then RT you need to explicitly indicate which documentation file to include (besides the main one). This can be done with the help of the Fluent-call ConfigurationBuilder.TryLookupDocumentationForAssembly, to which the assembly from which the export and the full path to the XML-file with the documentation are transferred.

We decompose by different files.

To activate the layout mode for different files, you will need to enable another build setting. so
1) Go to Reinforced.Typings.settings.xml, set RtDivideTypesAmongFiles to true. Next, find the RtTargetDirectory parameter — it specifies the target folder into which the generated typescript files are dumped. Correct this parameter if necessary
2) Determine which code will fall into which files. This can be done using the [TsFile] attribute, or the Fluent call .ExportTo, available when using .ExportAsClass (es) /. ExportAsInterface (s) /. ExportAsEnum (s). The parameter takes the path to the file relative to the directory indicated in RtTargetDirectory.
3) Rebuild, add the resulting files to the project

It would seem nothing complicated, but a difficult moment with the directive /// comes up. So - I hasten to please, no additional settings are required. RT is smart enough to place these directives correctly without your participation. However, if you need references to any other files, this is easily solved by the [TsAddTypeReference] attribute or the Fluent call .AdReReference, which is available approximately in the same place as .ExportTo. These methods allow you to add a reference to a file by your exported CLR type, or simply by a raw string. By the way, there is also the [assembly: TsReference] attribute, which will add the desired reference to all generated files. The fluent call to .AddReference does the same when applied to ConfigurationBuilder.

Conclusion

The examples presented are available in the Reinforced.Typings repository . I am open to suggestions, questions and suggestions in the comments to this article, as well as in Issues to the RT repository. The project also has a great github-wiki in English, which I develop as there is free time. It was also (and is) a project with Russian documentation on RTFD, but it is now in suspension.
As for the articles and plans for the future, I see that this is the last article about RT, since RT itself is only a component of my other interesting project - Reinforced.Lattice, which I will post some time later, because as it is now passing through the run-in stage and testing on living people. For some reason it seems to me that you will like it. So, the next article from me will be about Lattice and, most likely, not soon.

Thank you for reading to the end.It helps me not to throw a project :)

Reinforced.Typings on Github
Reinforced.Typings in NuGet

______________________

The text was prepared in the Blog Editor from SoftCoder.ru