我正在使用 Breeze + Typescript + Knockout 作为 Spa，我面临以下问题：当我使用 EntityManager.createEntity 创建一个新实体时，typescript 不允许我使用 Breeze 从元数据生成的可观察对象。Typescript 仅“看到”“entityAspect”和“entityType”属性。我正在使用DefinitelyTyped 的类型定义。任何帮助是极大的赞赏！
问问题
2304 次
4 回答
5
您可以为您的类型创建一个扩展接口breeze.Entity：
/// <reference path="breeze.d.ts" />
module model {
export interface ResponsesItem extends breeze.Entity {
ContentTypeID: string;
Title: string;
Description: string;
EventDate: any;
/* etc. */
}
}
然后，您可以在需要以类型化方式处理对象时将对象转换到此接口，例如从服务器加载时的查询结果：
private loadResponses(): void {
this.dataservice.ListResponses()
.then((data: { results: breeze.Entity[]; query: breeze.EntityQuery; XHR: XMLHttpRequest; }) => {
var results: model.ResponsesItem[] = <model.ResponsesItem[]>data.results;
// Do something with typed results array here.
}).fail((error) => {
this.handleDataError(error);
});
}
于 2013-03-22T09:33:15.457 回答
2
查看我在Breeze.js 类型实体中的答案，其中我破解了 T4TS 以吐出支持 Breeze 的 TS 定义。
于 2013-04-16T03:47:04.723 回答
1
Looking at : https://github.com/borisyankov/DefinitelyTyped/blob/master/knockout/knockout.d.ts
Functions you see on ko (e.g. observable etc) are the functions defined on KnockoutStatic interface because of this line:
declare var ko: KnockoutStatic;
Here is a snippet of this interface:
interface KnockoutStatic {
utils: KnockoutUtils;
memoization: KnockoutMemoization;
bindingHandlers: KnockoutBindingHandlers;
virtualElements: KnockoutVirtualElements;
extenders: KnockoutExtenders;
applyBindings(viewModel: any, rootNode?: any): void;
applyBindingsToDescendants(viewModel: any, rootNode: any): void;
applyBindingsToNode(node: Element, options: any, viewModel: any): void;
subscribable: KnockoutSubscribableStatic;
observable: KnockoutObservableStatic;
computed: KnockoutComputedStatic;
observableArray: KnockoutObservableArrayStatic;
.....
So if you want new functions on ko you need to define new functions to the KnockoutStatic interface e.g.:
interface KnockoutStatic {
yourFunc: KnockoutObservableStatic;
}
etc. Since interfaces are open ended you can declare various parts of the interface definition in multiple files. Hope this helps.
于 2013-03-22T04:58:59.443 回答
0
下面是一个页面，您可以将其放入您的站点以生成 typescript 接口定义。该页面获取微风元数据，然后遍历所有类型并为每种类型输出一个打字稿接口声明。然后可以将此页面的输出粘贴到任何打字稿文件 (*.ts) 或打字稿定义文件 (*.d.ts) 中。如果要命名接口，请将结果包含在模块声明中： declare module northwind { ... paste interfaces here... }.
在使用该页面之前，您需要进行一次编辑：将实体管理器的控制器 URL 从“api/northwind”更改为您的微风控制器的 URL。
生成的接口依赖于 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<';
html += getJSType(property.dataType.name);
html += '>; //' + 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<';
else
html += ': KnockoutObservableArray<';
html += property.entityType.shortName;
html += '>;' + 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-24T11:24:43.023 回答