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

【问题标题】：How to declare interfaces which are used by multiple view models如何声明多个视图模型使用的接口
【发布时间】：2017-02-07 10:40:02
【问题描述】：

我刚刚开始使用 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
        }
    ];
}

product-card.html

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

product-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 中导入定义文件

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

【问题讨论】：

标签： typescript interface aurelia definition

【解决方案1】：

Aurelia 鼓励使用 MVVM（模型-视图-视图模型）设计模式。

products.html 是您的视图
products.ts 是您的 ViewModel
product.d.ts 是您的模型，可以在多个 ViewModel 中包含/使用

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

您可以在这个很棒的博客中看到更多关于项目结构的提示：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

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

【讨论】：