如何声明多个视图模型使用的接口

Question

我刚刚开始使用 Aurelia 和 Typescript，正在寻找有关最佳实践的一些建议。这是基本代码，它基本上描述了产品列表，这些产品被分成父 products 视图，其中包含详细的 product-card 视图：

products.html

<template>
    <require from="./product-card"></require>

    // ...

    <div repeat.for="product of products" class="product-cards">
        <product-card product.bind="product"></product-card>
    </div>

    // ...
</template>

products.ts

export class Products {
    public products: Product[] = [
        {
            name: 'Salt',
            price: 10
        },{
            name: 'Orange Juice',
            price: 12
        }
    ];
}

产品-card.html

<template>
    Name: ${product.name}
    Price: ${product.price}
</template>

产品-card.ts

import {bindable} from 'aurelia-framework';

export class ProductCard {
    @bindable product: Product;
}

所有这些文件都在同一个目录中，在 product.ts 和 product-card.ts 中使用的 Product 界面就像...

export interface Product {
    name: string;
    price: number;
}

除了 products.ts 和 product-card.ts 实际上都不知道上面代码的 Product 接口之外，这基本上是有效的。

这是我解决这个问题的方法：

在与所有其他文件相同的文件夹中创建专用定义文件product.d.ts
使用 import {Product} from './product';

products.ts

product-card.ts

为多个视图模型共享的简单界面创建专用定义文件是否被视为 good/best 实践，或者是否有任何其他方法可以解决此问题？也可以将 *.d.ts 放在与源相同的文件夹中，还是应该放在其他地方？

Answer 1

Aurelia 鼓励使用 MVVM (Model-View-ViewModel) 设计模式。

products.html 是您的视图
products.ts 是你的 ViewModel
product.d.ts 是您的模型，可以 included/used 在多个 ViewModel

我更喜欢叫product-model.ts，但名字是你的。通常需要创建一个服务 class（例如：product-service.js）来向服务器发出请求，有时还需要一些业务逻辑，在这种情况下，您可以将模型包含在此服务中class。（在 TypeScript 中，它通常在文件中放置多个 class）

您可以在这个很棒的博客中看到有关项目结构的更多提示：https://blog.ashleygrant.com/2016/04/19/suggestions-for-structuring-a-large-aurelia-application/

在此示例中，您不需要创建 ViewModel "product-card.ts"，您可以只创建视图：http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/1

重播您的问题是的，可以将模型放在单独的文件和同一文件夹中。

如何声明多个视图模型使用的接口

How to declare interfaces which are used by multiple view models

interface

definition

typescript

aurelia