Come riutilizzare le definizioni di classi C # esistenti nei progetti TypeScript

Inizierò solo l'uso TypeScriptnel mio progetto client HTML che appartiene a un progetto MVC con un modello di dominio del framework di entità già presente. Voglio che i miei due progetti (lato client e lato server) siano completamente separati in quanto due team lavoreranno su questo ... JSON e REST vengono utilizzati per comunicare oggetti avanti e indietro.

Ovviamente, i miei domainoggetti sul lato client dovrebbero corrispondere agli oggetti sul lato server. In passato, normalmente l'ho fatto manualmente. C'è un modo per riutilizzare le mie definizioni di classe C # (specialmente delle POJOclassi nel mio modello di dominio) per creare le classi corrispondenti in TypeScript "?

Attualmente non esiste nulla che associ C # a TypeScript. Se hai molti POCO o pensi che potrebbero cambiare spesso, potresti creare un convertitore, qualcosa di semplice sulla falsariga di ...

public class MyPoco {
    public string Name { get; set; }
}

Per

export class MyPoco {
    public Name: string;
}

C'è anche una discussione su Codeplex sulla generazione automatica da C # .

Solo per mantenere le cose aggiornate, TypeLite può generare interfacce TypeScript da C #:

http://type.litesolutions.net/

Web Essentials consente di compilare file C # in file TypeScript .d.tsal salvataggio. Quindi puoi fare riferimento alle definizioni dai tuoi .tsfile.

TypeLite e T4TS sopra sembravano buoni, ne ho appena scelto uno, TypeLite, l'ho biforcato per ottenere supporto per

• ValueTypes ,
• nullables
• camelCasing (il documento radice di TypeScript usa i cammelli, e questo va troppo bene insieme a C #)
• campi pubblici (adoro i POCO puliti e leggibili, facilita anche il compilatore C #)
• disabilita la generazione del modulo

Poi avevo bisogno di interfacce C # e ho pensato che fosse ora di creare qualcosa di mio e ho scritto un semplice script T4 che fa proprio quello che mi serve. Include anche Enums . Nessun repo richiesto, solo <100 righe di T4.

Utilizzo
Nessuna libreria, nessun NuGet, solo questo semplice file T4 semplice: usa "aggiungi elemento" in Visual Studio e scegli un modello T4 qualsiasi. Quindi incollalo nel file. Adatta ogni riga con "ACME" al suo interno. Per ogni classe C # aggiungi una riga

<#= Interface<Acme.Duck>() #>

L'ordine è importante, qualsiasi tipo noto verrà utilizzato nelle seguenti interfacce. Se si utilizzano solo interfacce, l'estensione del file può essere .d.ts , per le enumerazioni è necessario un file .ts , poiché viene istanziata una variabile.

Personalizzazione
Hack lo script.

<#@ template debug="true" hostSpecific="true" language="C#" #>
<#@ output extension=".ts" #>
<#@ Assembly Name="System.Core.dll" #>
<#@ assembly name="$(TargetDir)ACME.Core.dll" #>
<#@ import namespace="System" #>
<#@ import namespace="System.Reflection" #>
<#@ import namespace="System.Collections.Generic" #>
<#@ import namespace="System.Text" #>
<#@ import namespace="System.Linq" #>

<#= Interface<Acme.Bunny>() #>
<#= Interface<Acme.Duck>() #>
<#= Interface<Acme.Birdy>() #>
<#= Enums<Acme.CarrotGrade>() #>
<#= Interface<Acme.LinkParticle>() #>

<#+  
    List<Type> knownTypes = new List<Type>();

    string Interface<T>()
    {   
        Type t = typeof(T);     
        var sb = new StringBuilder();
        sb.AppendFormat("interface {0} {{\n", t.Name);
        foreach (var mi in GetInterfaceMembers(t))
        {
            sb.AppendFormat("  {0}: {1};\n", this.ToCamelCase(mi.Name), GetTypeName(mi));
        }
        sb.AppendLine("}");
        knownTypes.Add(t);
        return sb.ToString();
    }

    IEnumerable<MemberInfo> GetInterfaceMembers(Type type)
    {
        return type.GetMembers(BindingFlags.Public | BindingFlags.Instance)
            .Where(mi => mi.MemberType == MemberTypes.Field || mi.MemberType == MemberTypes.Property);
    }

    string ToCamelCase(string s)
    {
        if (string.IsNullOrEmpty(s)) return s;
        if (s.Length < 2) return s.ToLowerInvariant();
        return char.ToLowerInvariant(s[0]) + s.Substring(1);
    }

    string GetTypeName(MemberInfo mi)
    {
        Type t = (mi is PropertyInfo) ? ((PropertyInfo)mi).PropertyType : ((FieldInfo)mi).FieldType;
        return this.GetTypeName(t);
    }

    string GetTypeName(Type t)
    {
        if(t.IsPrimitive)
        {
            if (t == typeof(bool)) return "bool";
            if (t == typeof(char)) return "string";
            return "number";
        }
        if (t == typeof(decimal)) return "number";            
        if (t == typeof(string)) return "string";
        if (t.IsArray)
        {            
            var at = t.GetElementType();
            return this.GetTypeName(at) + "[]";
        }
        if(typeof (System.Collections.IEnumerable).IsAssignableFrom(t)) 
        {
            var collectionType = t.GetGenericArguments()[0]; // all my enumerables are typed, so there is a generic argument
            return GetTypeName(collectionType) + "[]";
        }            
        if (Nullable.GetUnderlyingType(t) != null)
        {
            return this.GetTypeName(Nullable.GetUnderlyingType(t));
        }
        if(t.IsEnum) return "number";
        if(knownTypes.Contains(t)) return t.Name;
        return "any";
    }

    string Enums<T>() // Enums<>, since Enum<> is not allowed.
    {
        Type t = typeof(T);        
        var sb = new StringBuilder();        
        int[] values = (int[])Enum.GetValues(t);
        sb.AppendLine("var " + t.Name + " = {");
        foreach(var val in values) 
        {
            var name = Enum.GetName(typeof(T), val);
            sb.AppendFormat("{0}: {1},\n", name, val);
        }
        sb.AppendLine("}");
        return sb.ToString();
    }
#>

Il livello successivo dello script consisterà nel creare l'interfaccia del servizio dalla classe MVC JsonController.

Se usi vscode puoi usare la mia estensione csharp2ts che fa esattamente questo.

Basta selezionare il codice C # incollato ed eseguire il Convert C# to TypeScriptcomando dalla tavolozza dei comandi Un esempio di conversione:

public class Person
{
    /// <summary>
    /// Primary key
    /// </summary>
    public int Id { get; set; }

    /// <summary>
    /// Person name
    /// </summary>
    public string Name { get; set; }
}

per

export interface Person
{
    /**Primary key */
    Id : number;

    /**Person name */
    Name : string;
}

Ecco il mio approccio per risolverlo. Dichiara le tue classi C # con un attributo e i file .d.ts verranno generati (usando le trasformazioni T4). C'è un pacchetto su nuget e il sorgente è disponibile su GitHub . Sto ancora lavorando al progetto, ma il supporto è piuttosto ampio.

Se utilizzi Visual Studio, aggiungi l'estensione Typewriter.

Raccolta di Visual Studio

Sito web / Documentazione

Aggiornare

Con Web Essentials installato in VS 2015, è possibile fare clic con il pulsante destro del mouse sul file della classe, quindi> Web Essentials> Crea file Typescript Intellisense dal menu contestuale.

Prova il framework Reinforced.Typings. Sembra che risolva il tuo problema.

1. Installalo da NuGet

2. Passa al tuo POCO e aggiungi l' [TsInterface]attributo sopra di esso

   using Reinforced.Typings.Attributes;
   namespace YourNamespace {
       [TsInterface]
       public class YourPoco
       {
           public int YourNumber { get;set; }
           public string YourString { get;set; }
           public List<string> YourArray { get;set; }
           public Dictionary<int, object> YourDictionary { get;set; }
       }
   }

3. Ricostruisci il tuo progetto

4. Scopri il codice TypeScript generato nel %Your_Project_Directory%/Scripts/project.tsfile e aggiungilo al progetto manualmente

   module YourNamespace {
       export interface IYourPoco
       {
           YourNumber: number;
           YourString: string;
           YourArray: string[];
           YourDictionary: { [key: int]: any };
       }
   }

5. Fai lo stesso per tutti i tuoi POCO e fai riferimento project.tsnell'altro codice TypeScript.

Vedi maggiori dettagli nel wiki della documentazione

Ho creato una piccola utility in grado di generare interfacce TypeScript da classi C #. È disponibile come pacchetto NuGet . La documentazione dettagliata può essere trovata sulla pagina web del progetto .

Dai un'occhiata a questa libreria Typewriter

Converte non solo classi, enumerazioni, interfacce, ecc., Ma anche i controller API, il che è semplicemente fantastico ..

Inoltre lo fa non appena salvi il file .cs sorgente, quindi non devo attivare alcuno strumento esterno. Salva .cs e sarai aggiornato .ts

Ho una piccola soluzione che utilizza i modelli T4 ( vedi sorgente ).

Vai da qualsiasi CLR POCO:

public class Parent : Person
{
    public string Name { get; set; }
    public bool? IsGoodParent { get; set; }
    public virtual ICollection<Child> Children { get; set; }
}

A un'interfaccia TypeScript:

///<reference path="Child.d.ts" />
///<reference path="Person.d.ts" />
interface Parent extends Person {
    Name : string;
    IsGoodParent? : bool;
    Children : Child[];
}

Puoi utilizzare il progetto open source NSwag : nella GUI, è possibile selezionare la classe .NET da una DLL .NET esistente e generare l'interfaccia TypeScript per essa.

Il progetto fornisce anche strumenti da riga di comando e supporto per modelli T4, nonché generazione di codice client per controller API Web ...

Se hai bisogno di creare un file separato per ogni classe / interfaccia TypeScript generata (cioè in un modo "singola classe per file"), puoi provare TypeGen . È uno strumento che puoi utilizzare dalla console di Gestione pacchetti per generare file TypeScript in base alle classi / enumerazioni C #. Attualmente supporta:

• esportare enumerazioni; esportare POCO come classi o interfacce TS
• eredità
• tipi generici
• tipi di raccolta / raccolta annidata

oltre ad alcune funzionalità aggiuntive. È anche open source (puoi verificarlo su GitHub ).

Che ne dici del contrario?

Dai un'occhiata a erecruit TypeScript Translator . Viene fornito con il supporto C # pronto per l'uso, ma in realtà è basato su modelli (utilizza Nunjucks per il rendering), il che significa che può generare qualsiasi altra cosa: VB.NET, F #, C ++, XML, SQL, qualunque cosa tu possa codificare con un modello.

Funziona come un programma console .NET, programma NodeJS (per chi non è su Windows) o come estensione di Visual Studio , completo di funzionalità di generazione al salvataggio. E include il supporto per MSBuild, solo per rendere felice il tuo server di compilazione. :-)

Puoi anche usare questo: https://github.com/pankleks/TypeScriptBuilder

Questa piccola libreria genera la definizione del tipo TypeScript basata sui tipi C #. Usalo direttamente nel tuo progetto backend C # per generare codice per il tuo progetto TypeScript frontend. Puoi anche scrivere una piccola app per console, per generare codice con strumenti di pre-compilazione.

Funziona su framework Full & NET Core!

Installa da nuget: Install-Package TypeScriptBuilder

Funzionalità supportate

• Risoluzione della dipendenza dal tipo
• Generics
• Tipo di ereditarietà
• Spazi dei nomi (moduli)
• Enums
• Tipi nullable
• Conversione del dizionario (in oggetti indicizzati TS di tipo forte)
• Set di attributi di controllo della generazione del codice
• any per i tipi che non possono essere convertiti

Più descrizione: https://github.com/pankleks/TypeScriptBuilder/blob/master/README.md

Ragazzi, date un'occhiata a https://github.com/reinforced/ Reinforced.Typings . Ho giocato con i modelli typelite e t4 negli ultimi giorni e ho finito con questo progetto. È semplicissimo e funziona come un fascino. Basta ottenere il pacchetto, modificare il file di configurazione (è come per 10 secondi) e compilare. Tutto viene eseguito automaticamente senza problemi. Benedici l'autore!

La cosa negativa dei modelli T4 è che una volta compilati da VS gli assembly scansionati sono bloccati e devi riavviare VS (quanto è sciocco?). Ci sono alcune soluzioni alternative in T4 Toolbox + alcune direttive di pulizia VS ma nessuna di queste ha funzionato per me.

Mi piace la soluzione citykid. L'avevo allungato un po '. Quindi, anche la soluzione si basa sulla tecnica di codegenerazione con modelli T4.

Può generare tipi TypeScript comuni e dichiarazioni ambientali.

Supporta l'ereditarietà e le implementazioni dell'interfaccia.

Supporta generici, array ed elenchi come campi di tipo.

Inoltre si traduce in tipi TypeScript che non sono esplicitamente menzionati nella configurazione (ad esempio importiamo il tipo A, e nell'output di TS puoi trovare altri tipi: tipi di campi, tipi di base e interfacce).

Puoi anche sovrascrivere il nome del tipo.

Sono supportati anche gli enumerativi.

Esempio di utilizzo (puoi trovarlo nel repository del progetto):

// set extension of the generated TS file
<#@ output extension=".d.ts" #>

// choose the type of TS import TsMode.Ambient || TsMode.Class
<# var tsBuilder = new TsBuilder(TsMode.Ambient); #>

// reference assembly with the c# types to be transformed
<#@ assembly name="$(SolutionDir)artifacts\...\CsT4Ts.Tests.dll" #>

// reference namespaces
<#@ import namespace="CsT4Ts.Tests" #>
<#
    //add types to processing
    tsBuilder.ConsiderType(typeof(PresetDTOBase), "PresetBase");
    tsBuilder.ConsiderType(typeof(PresetDTO), "Preset");
    tsBuilder.ConsiderType(typeof(TestInterface<,>));
#>

// include file with transformation algorithms
<#@ include file="CsT4Ts.t4" #>

E otterrai un output

//CsT4Ts.Tests.PresetDTOBase => PresetBase
// CsT4Ts.Tests.PresetDTO => Preset
// CsT4Ts.Tests.TestInterface`2 => TestInterface
// CsT4Ts.Tests.TestEnum => TestEnum

declare class PresetBase
{
    PresetId: string;
    Title: string;
    InterviewDate: string;
}

declare class Preset extends PresetBase
{
    QuestionsIds: string[];
}

declare interface TestInterface<TA, TB>
{
    A: string;
    B: number;
    C: TestEnum;
    D: TestEnum[];
    E: number[];
    F: TA;
    G: TB[];
}

declare enum TestEnum
{
    Foo = 10,
    Boo = 100
}

Controlla la soluzione completa qui: https://bitbucket.org/chandrush/cst4ts

Puoi anche usare Bridge.net. Dalla versione 1.7 supporta la generazione di definizioni TypeScript per i tipi C #. Vedi http://bridge.net/docs/generate-typescript-definitions/

Mi è piaciuta molto anche la risposta di @ citykid, quindi l'ho estesa per fare un intero spazio dei nomi alla volta. Basta inserire le classi POCO nello spazio dei nomi e ricostruire i modelli T4. Vorrei sapere come generare file separati per ciascuno, ma non è la fine del mondo.

Devi fare riferimento ai file .DLL nella parte superiore (dove sono le classi che desideri) e devi menzionare gli spazi dei nomi. Tutte le righe da modificare sono contrassegnate con ACME. Grandi complimenti a @citykid, apprezzatelo!

<#@ template debug="true" hostSpecific="true" language="C#" #>
<#@ output extension=".ts" #>
<#@ Assembly Name="System.Core.dll" #>
<#@ assembly name="$(TargetDir)YOUR_DLL_NAME_HERE_ACME.dll" #>
<#@ assembly name="$(TargetDir)YOUR_OTHER_DLL_NAME_HERE_ACME.dll" #>
<#@ assembly name="$(TargetDir)YOUR_OTHER_DLL_NAME_HERE_ACME.dll" #>
<#@ assembly name="$(TargetDir)YOUR_OTHER_DLL_NAME_HERE_ACME.dll" #>
<#@ import namespace="System" #>
<#@ import namespace="System.Reflection" #>
<#@ import namespace="System.Collections.Generic" #>
<#@ import namespace="System.Text" #>
<#@ import namespace="System.Linq" #>
<#@ import namespace="System.Reflection" #>

<#= Process("My.Very.Special.Namespace.ACME") #>
<#= Process("My.Other.Very.Special.Namespace.ACME") #>
<#= Process("My.Other.Very.Special.Namespace.ACME") #>
<#= Process("My.Other.Very.Special.Namespace.ACME") #>

<#+  

    List<Type> knownTypes = new List<Type>();

    string Process(string nameSpace) {
      var allass = AppDomain.CurrentDomain.GetAssemblies();
      var ss = "";
      foreach (var ass in allass)
      {
         ss += ProcessAssembly(ass, nameSpace);
      }
      return ss;
    }

   string ProcessAssembly(Assembly asm, string nameSpace) {
      try {
            Type[] types;
            try
            {
                types = asm.GetTypes();
            }
            catch (ReflectionTypeLoadException e)
            {
                types = e.Types;
            }
            var s = "";
            foreach (var t in types.Where(t => t != null))
            {
               try {

               if (String.Equals(t.Namespace, nameSpace, StringComparison.Ordinal))
               {
                    s += InterfaceOfType(t);
               }

               } catch (Exception e)
               {
               }
            }
            return s;      
      }
      catch (Exception ee2) {
        return "// ERROR LOADING TYPES: " + ee2;
      }

   }

    string InterfaceOfType(Type T)
    {   
        Type t = T;     
        var sb = new StringBuilder();
        sb.AppendFormat("interface {0} {{\r\n", t.Name);
        foreach (var mi in GetInterfaceMembers(t))
        {
            sb.AppendFormat("  {0}: {1};\r\n", this.ToCamelCase(mi.Name), GetTypeName(mi));
        }
        sb.AppendLine("}");
        knownTypes.Add(t);
        return sb.ToString();
    }

    string Interface<T>()
    {   
        Type t = typeof(T);     
        var sb = new StringBuilder();
        sb.AppendFormat("interface {0} {{\n", t.Name);
        foreach (var mi in GetInterfaceMembers(t))
        {
            sb.AppendFormat("  {0}: {1};\r\n", this.ToCamelCase(mi.Name), GetTypeName(mi));
        }
        sb.AppendLine("}");
        knownTypes.Add(t);
        return sb.ToString();
    }

    IEnumerable<MemberInfo> GetInterfaceMembers(Type type)
    {
        return type.GetMembers(BindingFlags.Public | BindingFlags.Instance)
            .Where(mi => mi.MemberType == MemberTypes.Field || mi.MemberType == MemberTypes.Property);
    }

    string ToCamelCase(string s)
    {
        if (string.IsNullOrEmpty(s)) return s;
        if (s.Length < 2) return s.ToLowerInvariant();
        return char.ToLowerInvariant(s[0]) + s.Substring(1);
    }

    string GetTypeName(MemberInfo mi)
    {
        Type t = (mi is PropertyInfo) ? ((PropertyInfo)mi).PropertyType : ((FieldInfo)mi).FieldType;
        return this.GetTypeName(t);
    }

    string GetTypeName(Type t)
    {
        if(t.IsPrimitive)
        {
            if (t == typeof(bool)) return "boolean";
            if (t == typeof(char)) return "string";
            return "number";
        }
        if (t == typeof(decimal)) return "number";            
        if (t == typeof(string)) return "string";
        if (t.IsArray)
        {            
            var at = t.GetElementType();
            return this.GetTypeName(at) + "[]";
        }
        if(typeof (System.Collections.IEnumerable).IsAssignableFrom(t)) 
        {
            var collectionType = t.GetGenericArguments()[0]; // all my enumerables are typed, so there is a generic argument
            return GetTypeName(collectionType) + "[]";
        }            
        if (Nullable.GetUnderlyingType(t) != null)
        {
            return this.GetTypeName(Nullable.GetUnderlyingType(t));
        }
        if(t.IsEnum) return "number";
        if(knownTypes.Contains(t)) return t.Name;
        return "any";
    }

    string Enums<T>() // Enums<>, since Enum<> is not allowed.
    {
        Type t = typeof(T);        
        var sb = new StringBuilder();        
        int[] values = (int[])Enum.GetValues(t);
        sb.AppendLine("var " + t.Name + " = {");
        foreach(var val in values) 
        {
            var name = Enum.GetName(typeof(T), val);
            sb.AppendFormat("{0}: {1},\r\n", name, val);
        }
        sb.AppendLine("}");
        return sb.ToString();
    }
#>

La mia soluzione era scrivere un piccolo util codegen che prende semplicemente un assembly del progetto (e gli assembly di riferimento) e inizia la scansione dei tipi che sono coinvolti nell'interazione tra dattiloscritto e c #. Questo util emette sia javascript come d.ts ... Lo strumento viene chiamato nell'evento post-build ... funziona a meraviglia!

Se sei interessato, puoi usare TypedRpc . Il suo scopo non è solo creare le interfacce in TypeScript, ma creare tutte le comunicazioni con il servizio in .Net utilizzando il protocollo JsonRpc.

Esempio per una classe nel server:

[TypedRpc.TypedRpcHandler]
public class RpcServerExample
{
    public String HelloWorld()
    {
        return "Hello World!";
    }
}

Utilizzo del codice TypeScript generato:

/// <reference path="Scripts/TypedRpc.ts" />

let rpc: TypedRpc.RpcServerExample = new TypedRpc.RpcServerExample();

var callback = function(data, jsonResponse) {
    console.log(data);
};

rpc.HelloWorld().done(callback).fail(callback);

Dai un'occhiata a https://github.com/Rodris/TypedRpc per altri esempi di come usarlo.

I generatori di client API Web ASP.NET possono essere più utili, meno sovraccarico rispetto alla toolchain spavalda e altri durante SDLC.

Sebbene i programmatori generalmente utilizzino WebApiClientGen per generare codici API client, questo progetto fornisce anche POCO2TS.exe, un programma a riga di comando che genera interfacce TypsScript dalle classi POCO. Puoi utilizzare Poco2ts.exe o il componente poco2ts per integrare la generazione del codice con la tua pipeline di build.

Se vuoi convertirlo tramite node.js, puoi usare questo pacchetto (csharp-to-typescript). https://www.npmjs.com/package/csharp-to-typescript

codice sorgente: https://github.com/YuvrajSagarRana/csharp-to-typescript

eg: 
// After installation, import the package.
var { CsharpToTs, getConfiguration } = require("csharp-to-typescript");

// Use CsharpToTs to convert your source code a. Method one give your source code as string:
const sourceCodeInString =   `public class Address
{
  public int Id {get; set;}
  public string Street { get; set; }
  public string City { get; set; }
}`

var outputTypescript = CsharpToTs(sourceCodeInString, getConfiguration());
console.log(outputTypescript);

// Output is

export class Address
{
  Id: number;
  Street: string;
  City: string;
}

Se stai usando VSCode, potresti dare un'occhiata a quell'estensione C # a TypeScript

Guarda come posso convertirlo da codice C # con un solo clic. Naturalmente, non tutte le classi verranno convertite come la fabbrica, ma è abbastanza buono per il lato client. Abbiamo solo bisogno della forma dei dati. A volte, se ho bisogno di utilizzare il motivo visitatore, decorerò con metodi aggiuntivi di cui ho bisogno. Ci sono voluti solo 5 secondi per farlo. Confrontando con un minuto sopra, potrei dire che è una grande vittoria.

Vedi più dettagli nel mio post sul blog