Cara menggunakan kembali definisi kelas C # yang ada dalam proyek TypeScript

Saya baru saja akan mulai menggunakan TypeScriptproyek klien HTML saya yang termasuk dalam proyek MVC dengan model domain kerangka entitas yang sudah ada. Saya ingin dua proyek saya (sisi klien dan sisi server) benar-benar terpisah karena dua tim akan mengerjakan ini ... JSON dan REST digunakan untuk mengkomunikasikan objek bolak-balik.

Tentu saja, domainobjek saya di sisi klien harus cocok dengan objek di sisi server. Dulu, saya biasanya melakukannya secara manual. Apakah ada cara untuk menggunakan kembali definisi kelas C # saya (khususnya POJOkelas dalam model domain saya) untuk membuat kelas yang sesuai di TypeScript "?

Saat ini tidak ada apa pun yang akan memetakan C # ke TypeScript. Jika Anda memiliki banyak POCO atau menurut Anda mungkin sering berubah, Anda dapat membuat konverter - sesuatu yang sederhana di sepanjang ...

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

Untuk

export class MyPoco {
    public Name: string;
}

Ada juga diskusi di Codeplex tentang pembuatan otomatis dari C # .

Hanya untuk terus memperbarui, TypeLite dapat menghasilkan antarmuka TypeScript dari C #:

http://type.litesolutions.net/

Web Essentials memungkinkan untuk mengkompilasi file C # ke .d.tsfile TypeScript saat disimpan. Kemudian Anda dapat merujuk definisi dari .tsfile Anda .

TypeLite dan T4TS di atas keduanya tampak bagus, cukup pilih satu, TypeLite, buat garpu untuk mendapatkan dukungan

• ValueTypes ,
• Nullables
• camelCasing (naskah akar doc menggunakan unta, dan ini berlaku terlalu baik bersama-sama dengan C #)
• bidang publik (suka POCO yang bersih dan dapat dibaca, juga memudahkan Penyusun C #)
• nonaktifkan pembuatan modul

Lalu aku membutuhkan C # antarmuka dan berpikir inilah saatnya untuk membuat barang saya sendiri dan menulis skrip T4 sederhana yang hanya melakukan apa yang saya butuhkan. Ini juga termasuk Enums . Tidak perlu repo, cukup <100 baris T4.

Pemakaian
Tidak ada perpustakaan, tidak ada NuGet, hanya file T4 sederhana ini - gunakan "tambahkan item" dalam Visual Studio dan pilih template T4 apa saja. Kemudian tempel ini ke dalam file. Sesuaikan setiap baris dengan "ACME" di dalamnya. Untuk setiap kelas C # tambahkan satu baris

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

Urutan penting, semua jenis yang diketahui akan digunakan dalam antarmuka follwing. Jika Anda hanya menggunakan antarmuka, ekstensi file bisa .d.ts , untuk enum Anda memerlukan file .ts , karena variabel dibuat.

Kustomisasi
Meretas skrip.

<#@ 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();
    }
#>

Tingkat skrip berikutnya adalah membuat antarmuka layanan dari kelas MVC JsonController.

Jika Anda menggunakan vscode, Anda dapat menggunakan ekstensi saya csharp2ts yang melakukan hal itu.

Anda cukup memilih kode C # yang ditempelkan dan menjalankan Convert C# to TypeScriptperintah dari palet perintah Contoh konversi:

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

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

untuk

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

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

Inilah pendekatan saya untuk menyelesaikannya. Deklarasikan kelas C # Anda dengan atribut dan .d.ts-files akan dibuat (menggunakan transformasi T4). Ada paket di nuget dan sumbernya tersedia di github . Saya masih mengerjakan proyek ini, tetapi dukungannya cukup ekstensif.

Jika Anda menggunakan Visual Studio, tambahkan ekstensi Mesin Ketik.

Galeri Visual Studio

Situs web / Dokumentasi

Memperbarui

Dengan Web Essentials diinstal di VS 2015, Anda dapat mengklik kanan file kelas, lalu> Web Essentials> Buat File Intellisense Skrip Ketik dari menu konteks.

Coba kerangka kerja Reinforced.Typings. Sepertinya itu menyelesaikan masalah Anda.

1. Instal dari NuGet

2. Arahkan ke POCO Anda dan tambahkan [TsInterface]atribut di atasnya

   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. Bangun kembali proyek Anda

4. Temukan kode TypeScript yang dihasilkan dalam %Your_Project_Directory%/Scripts/project.tsfile dan tambahkan ke proyek secara manual

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

5. Lakukan hal yang sama untuk semua POCO Anda dan referensi project.tsdi kode TypeScript Anda yang lain.

Lihat detail lebih lanjut di wiki dokumentasi

Saya telah membuat utilitas kecil yang dapat menghasilkan antarmuka TypeScript dari kelas C #. Tersedia sebagai paket NuGet . Dokumentasi terperinci dapat ditemukan di halaman web proyek .

Silakan lihat di perpustakaan ini Mesin Ketik

Itu mengubah tidak hanya kelas, enum, antarmuka dll, tetapi juga pengontrol api, yang sangat mengagumkan ..

Selain itu, ia melakukannya segera setelah Anda menyimpan file .cs sumber, jadi saya tidak perlu memicu alat eksternal apa pun. Simpan .cs dan dapatkan pembaruan .ts

Saya punya sedikit solusi yang menggunakan template T4 ( lihat sumber ).

Anda pergi dari CLR POCO mana saja:

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

Ke antarmuka TypeScript:

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

Anda dapat menggunakan proyek sumber terbuka NSwag : Di GUI, Anda dapat memilih kelas .NET dari DLL .NET yang ada dan membuat antarmuka TypeScript untuknya.

Proyek ini juga menyediakan alat baris perintah dan dukungan untuk templat T4 serta pembuatan kode klien untuk pengontrol API Web ...

Jika Anda perlu membuat file terpisah untuk setiap kelas / antarmuka TypeScript yang dihasilkan (yaitu dengan cara "kelas tunggal per file"), Anda dapat mencoba TypeGen . Ini adalah alat yang dapat Anda gunakan dari Package Manager Console untuk menghasilkan file TypeScript berdasarkan C # class / enums Anda. Saat ini mendukung:

• mengekspor enum; mengekspor POCO sebagai kelas atau antarmuka TS
• warisan
• tipe generik
• koleksi / jenis koleksi bersarang

ditambah beberapa fitur tambahan. Ini juga open source (Anda dapat memeriksanya di github ).

Bagaimana dengan sebaliknya?

Lihat erecruit TypeScript Translator . Itu datang dengan dukungan C # siap pakai, tetapi sebenarnya berbasis template (menggunakan Nunjucks untuk rendering), yang berarti dapat menghasilkan apa pun - VB.NET, F #, C ++, XML, SQL - apa pun yang dapat Anda encode dengan template.

Berfungsi sebagai program konsol .NET, program NodeJS (untuk mereka yang tidak menggunakan Windows), atau sebagai ekstensi Visual Studio , lengkap dengan fungsi buat-simpan. Dan termasuk dukungan MSBuild, hanya untuk membuat server build Anda senang. :-)

Anda juga dapat menggunakan ini: https://github.com/pankleks/TypeScriptBuilder

Pustaka kecil ini menghasilkan definisi tipe TypeScript berdasarkan tipe C #. Gunakan secara langsung di proyek C # backend Anda untuk menghasilkan kode untuk proyek TypeScript frontend Anda. Anda juga dapat membuat aplikasi konsol kecil, untuk menghasilkan kode dengan alat pra-bangun.

Bekerja pada kerangka Full & NET Core!

Instal dengan nuget: Install-Package TypeScriptBuilder

Fitur yang didukung

• Mengatasi ketergantungan tipe
• Generik
• Ketik warisan
• Namespaces (modul)
• Enum
• Jenis nullable
• Konverison kamus (ke objek indeks TS tipe kuat)
• Set atribut kontrol pembuatan kode
• any untuk jenis yang tidak dapat diubah

Deskripsi selengkapnya: https://github.com/pankleks/TypeScriptBuilder/blob/master/README.md

Guys lihat di https://github.com/reinforced/ Reinforced.Typings . Saya telah bermain-main dengan template typelite dan t4 selama beberapa hari terakhir dan berakhir dengan proyek ini. Ini sangat sederhana dan bekerja seperti pesona. Dapatkan saja paketnya, ubah file konfigurasi (seperti selama 10 detik) dan buat. Semua dilakukan secara otomatis tanpa masalah apa pun. Berkatilah penulisnya!

Hal buruk tentang template T4 adalah bahwa setelah Anda membangun dari VS, rakitan yang dipindai terkunci dan Anda harus memulai ulang VS (betapa konyolnya itu?). Ada beberapa solusi di T4 Toolbox + beberapa arahan pembersihan VS tetapi tidak ada yang berhasil untuk saya.

Saya suka solusi citykid. Saya telah memperpanjangnya sedikit. Jadi, solusi juga didasarkan pada teknik pembuatan kode dengan template T4.

Itu dapat menghasilkan tipe TypeScript umum dan deklarasi ambient.

Ini mendukung pewarisan dan implementasi antarmuka.

Mendukung generik, array dan daftar sebagai bidang tipe.

Juga diterjemahkan ke jenis TypeScript yang tidak secara eksplisit disebutkan dalam konfigurasi (misalnya kita mengimpor tipe A, dan dalam keluaran TS Anda dapat menemukan beberapa jenis lain: jenis bidang, jenis dasar, dan antarmuka).

Anda juga dapat mengganti nama tipe.

Enum juga didukung.

Contoh penggunaan (Anda dapat menemukannya di repositori proyek):

// 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" #>

Dan Anda akan mendapatkan hasil

//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
}

Periksa solusi lengkapnya di sini: https://bitbucket.org/chandrush/cst4ts

Anda juga dapat menggunakan Bridge.net. Dari versi 1.7 itu mendukung pembuatan definisi TypeScript untuk tipe C #. Lihat http://bridge.net/docs/generate-typescript-definitions/

Saya juga sangat menyukai jawaban @ citykid, jadi saya memperluasnya untuk membuat seluruh namespace dalam satu waktu. Letakkan saja kelas POCO ke dalam namespace, dan buat ulang template T4. Saya berharap saya tahu bagaimana membuat file terpisah untuk masing-masing, tapi itu bukan akhir dari dunia.

Anda perlu mereferensikan file .DLL di bagian atas (di mana kelas yang Anda inginkan), dan Anda perlu menyebutkan namespace. Semua baris yang akan diedit ditandai dengan ACME. Pujian utama untuk @citykid, hargai!

<#@ 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();
    }
#>

Solusi saya adalah menulis util codegen kecil yang hanya mengambil rakitan proyek (dan merujuk rakitan) dan mulai memindai jenis yang terlibat dalam interaksi antara skrip ketikan dan c #. Ut ini mengeluarkan kedua javascript sebagai d.ts ... Alat ini dipanggil dalam acara pasca-pembuatan ... bekerja seperti pesona!

Jika tertarik, Anda bisa menggunakan TypedRpc . Tujuannya tidak hanya untuk membuat antarmuka di TypeScript, tetapi untuk membuat semua komunikasi dengan layanan di .Net menggunakan protokol JsonRpc.

Contoh kelas di server:

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

Penggunaan kode TypeScript yang dihasilkan:

/// <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);

Lihat https://github.com/Rodris/TypedRpc untuk contoh lain tentang cara menggunakannya.

Generator Klien API Web ASP.NET mungkin lebih berguna, lebih sedikit overhead daripada toolchain yang angkuh dan lainnya selama SDLC.

Sementara programmer umumnya menggunakan WebApiClientGen untuk menghasilkan kode API klien, proyek ini juga menyediakan POCO2TS.exe, program baris perintah yang menghasilkan antarmuka TypsScript dari kelas POCO. Anda dapat menggunakan Poco2ts.exe atau komponen poco2ts untuk mengintegrasikan pembuatan kode dengan pipeline build Anda.

Jika Anda ingin mengubahnya melalui node.js maka Anda dapat menggunakan paket ini (csharp-to-typescript). https://www.npmjs.com/package/csharp-to-typescript

kode sumber: 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;
}

Jika Anda menggunakan VSCode, Anda dapat melihat ekstensi C # ke TypeScript

Lihat bagaimana saya bisa mengubahnya dari kode C # hanya dengan satu klik. Tentu saja, tidak semua kelas akan dikonversi seperti pabrik, tetapi cukup baik untuk sisi klien. Kami hanya membutuhkan bentuk datanya. Terkadang jika saya perlu menggunakan pola pengunjung, saya akan menghias dengan metode tambahan yang saya butuhkan. Hanya butuh 5 detik untuk melakukannya. Dibandingkan dengan satu menit di atas, saya bisa mengatakan ini adalah kemenangan besar.

Lihat lebih detail di posting blog saya