如何爲微風實體生成打字稿界面/定義

我是SPA的新手，我正在用杜蘭和微風學習它。最近我已將我的解決方案轉換爲Typescript，我想知道是否有任何好的解決方案可以在TypeScript中基於服務器上的EF模型生成類型化的breeze實體。我發現的唯一的東西是這篇文章Breeze.js typed entities，但這只是一小段代碼，甚至不是一個真正的項目。我想知道這個問題有沒有更好的解決方案？如何爲微風實體生成打字稿界面/定義

來源

2014-01-27 dnf

我們使用typelite http://type.litesolutions.net/其中使用T4模板來生成打字稿接口。它大多運作良好。（老問題我konw） – mortb

下面是一個頁面，您可以放在您的網站以生成打印機接口定義。頁面獲取breeze元數據，然後遍歷所有類型，併爲每個類型輸出一個打字稿接口聲明。然後可以將此頁面的輸出粘貼到任何打字稿文件（* .ts）或打字稿定義文件（* .d.ts）中。如果要命名空間接口，請將結果括在模塊聲明中：declare module northwind { ... paste interfaces here... }。

在使用該頁面之前，您需要進行一次編輯：將實體管理器的控制器url從「api/northwind」更改爲您微風控制器的網址。

生成的接口對Knockout.js打字稿定義它，你可以抓住這裏的依賴：https://github.com/borisyankov/DefinitelyTyped/tree/master/knockout/

從learn.breezejs.com使用羅斯文例子，這個定義生成頁面的輸出會是這樣的：

export interface Employee extends breeze.Entity { 
    FirstName: KnockoutObservable<string>; 
    LastName: KnockoutObservable<string>; 
}

，你可以接着使用微風執行查詢，並將結果轉換爲員工的數組是這樣的：

var manager = new breeze.EntityManager('api/northwind'); 

var query = new breeze.EntityQuery() 
    .from("Employees"); 

manager.executeQuery(query).then(data => { 
    // ***cast the results to a strongly typed array of Employee*** 
    var employees = <Employee[]>data.results; 
}).fail(e => { 
    alert(e); 
});

下面是定義生成器頁面 - 將新的html文件添加到名爲「definitions.html」的項目中，運行項目並導航到頁面。

<html> 
<head> 
    <title>Typescript Definition Generator</title> 
    <style> 
     code { 
      white-space: pre; 
     } 
    </style> 
    <script src="//code.jquery.com/jquery-2.1.0.min.js"></script> 
    <script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/breezejs/1.4.4/breeze.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var entityManager = new breeze.EntityManager('api/northwind'); 
      entityManager.fetchMetadata() 
       .then(function() { 
        var html = '', 
         types = entityManager.metadataStore.getEntityTypes(), 
         type, 
         i, 
         j, 
         property, 
         crlf = String.fromCharCode(13), 
         code = document.createElement('code'), 
         script = document.createElement('script'); 

        function getJSType(metadataType) { 
         if (/(Int64)|(Int32)|(Int16)|(Byte)|(Decimal)|(Double)|(Single)|(number)/.test(metadataType)) 
          return 'number'; 
         else if (/(DateTime)|(DateTimeOffset)|(Time)|(Date)/.test(metadataType)) 
          return 'Date'; 
         else if (/(Boolean)/i.test(metadataType)) 
          return 'boolean'; 
         return 'string'; 
        } 

        for (i = 0; i < types.length; i++) { 
         // type declaration 
         var type = types[i]; 
         html += 'export interface ' + type.shortName; 

         // base type 
         html += ' extends '; 
         if (type.hasOwnProperty('baseEntityType')) { 
          html += type.baseEntityType.shortName; 
         } else { 
          html += 'breeze.Entity'; 
         } 
         html += ' {' + crlf; 

         // data properties 
         for (j = 0; j < type.dataProperties.length; j++) { 
          property = type.dataProperties[j]; 
          if (type.baseEntityType && type.baseEntityType.dataProperties.filter(function (p) { return p.name === property.name; }).length > 0) 
           continue; 
          html += ' ' + property.name; 
          //if (property.isNullable) 
          // html += '?'; 
          html += ': KnockoutObservable&lt;'; 
          html += getJSType(property.dataType.name); 
          html += '&gt;; //' + property.dataType.name + crlf; 
         } 

         // navigation properties 
         for (j = 0; j < type.navigationProperties.length; j++) { 
          property = type.navigationProperties[j]; 
          if (type.baseEntityType && type.baseEntityType.navigationProperties.filter(function (p) { return p.name === property.name; }).length > 0) 
           continue; 
          html += ' ' + property.name; 
          //if (property.isNullable) 
          // html += '?'; 
          if (property.isScalar) 
           html += ': KnockoutObservable&lt;'; 
          else 
           html += ': KnockoutObservableArray&lt;'; 
          html += property.entityType.shortName; 
          html += '&gt;;' + crlf; 
         } 

         html += '}' + crlf + crlf; 
        } 

        code.innerHTML = html; 

        $(code).addClass('prettyprint'); 

        document.body.appendChild(code); 

        script.setAttribute('src', '//google-code-prettify.googlecode.com/svn/loader/run_prettify.js'); 
        document.body.appendChild(script); 
       }) 
       .fail(function (reason) { 
        alert(reason); 
       }); 
     }); 
    </script> 
</head> 
<body> 
</body> 
</html>

來源

2014-03-23 13:47:35

Tnx求助。我是新手，我不確定如何在我的項目中使用此代碼？我試圖添加新的html文件到項目並在運行時訪問它，但沒有生成任何內容。你能幫助我如何使用這段代碼並預覽生成的實體嗎？ – dnf

我已經用完整的html文件更新了答案，您可以放入任何網站。 –

現在它開始;）Tnx分享。如果我可能會問，我現在想知道如何將查詢結果從微風翻譯成生成的實體。我可以複製字段值，但實體將從微風模型斷開？ – dnf

我們正在研究這個問題，目前還沒有發佈的版本......請聯繫我們[email protected]，如果您希望成爲我們的Beta版本，請聯繫我們。

來源

2014-01-31 19:03:27

如何爲微風實體生成打字稿界面/定義

回答

相關問題