WebTyped

WebTyped is a tool for generating strongly typed TypeScript code from your http://ASP.NET or http://ASP.NET/core Web Apis.

Quick Start

npm install @guimabdo/webtyped -g
npm install @guimabdo/webtyped-common
npm install @guimabdo/webtyped-[fetch|jquery|angular|angular4]

Create a webtyped.json configuration file in your project. Example:

{
	"files": [
		"../Controllers/**/*.cs",
		"../Models/**/*.cs"
	],
	"outDir": "./webtyped/", //optional, default: "webtyped",
	"serviceMode": "angular", //optional, default: "fetch", current options: "fetch", "angular", "angular4" or "jquery"
	"trims": ["My.Namespace"], //optional
	"baseModule": "WebApis", //optional
	"keepPropsCase": false, //optional, default: false. May be useful with old versions of Asp.Net WebApi
	"clear": true //optional, default: true. Delete typescript files that are not part of the current generation
}

At the command line, run webtyped:

webtyped

Or use 'watch' option for generating typescript code and start watching cs files:

webtyped watch

Use generated services wherever you want:

import { MyService } from './webtyped/<services-folder>';
let myService = new MyService(); //Generated from MyController.cs
myService.get().then(result => console.log(result));

Angular

webtyped.json

• serviceMode: "angular" for >=6.0.0
• serviceMode: "angular4" for >=4.3.0 <6.0.0

Import the generated module and inject services when needed:

app.module.ts

import { WebTypedGeneratedModule } from './webtyped';
@NgModule({
	imports: [WebTypedGeneratedModule.forRoot()]
})
export class AppModule {}

some.component.ts (for example)

import { MyService } from './webtyped/<services-folder>';
@Component({...})
export class SomeComponent {
	constructor(myService: MyService){}
}

Requirements

netcore 2.0 on dev machine

WebTyped.Annotations

Attributes for changing services/models generator behaviour.

ClientTypeAttribute

Use this attribute for mapping a Server Model to an existing Client Type so it won't be transpiled by the generator.

• typeName: correspondent client type name, or empty if it has the same name as the server type.
• module: type module, leave it empty if the type is globally visible.

Generated API services will know how to resolve the type.

example:

[WebTyped.Annotations.ClientType(module: "primeng/components/common/selectitem")]
public class SelectItem { 
    public string Label { get; set; }
    public long Value { get; set; }
}

NamedTupleAttribute

Sometimes your application have lots of multiparameted webapis. Instead of creating a Model for each webapi method, you may want to use Named Tuples like this:

[HttpPost("")]
public void Save([FromBody](name: string, birthdate: DateTime, somethingElse: number) parameters) {[
    ...
}

This will be transpiled to the client accordingly to .NET compiled tuple field names (Item1, Item2, Item3, ...), otherwise deserialization will not work when server receives the data. This will result in a non-friendly usage in client:

myService.save({ item1: "John", item2: "2010-12-01", item3: 42});

Decorating the method parameter with NamedTuple attribute makes the generator create the client function parameter using the original field names. This function will change the parameter field names (to item1, item2...) before sending it to the server. So the usage becomes:

myService.save({ name: "John", birthdate: "2010-12-01", somethingElse: 42});