Question

在我的Typescript文件（这是Aurelia View-Model的一部分）中，我有以下结构：

import {Chart} from './chart';

interface IMargin {
    top: number, right: number, bottom: number, left: number
}

export class App{

    chartOptions: any;

    constructor(margin: IMargin) { // No error here

        this.chartOptions = {
            element: "#chart",
            margin: IMargin    // Error: Cannot find name "IMargin"
        };
    }

    attached() {
        var chart = new Chart(this.chartOptions);
        chart.addChart();
    }
}

Typescript编译器在构造函数中使用接口没有问题，但是当我使用它在构造函数中定义Cannot find name "IMargin"时，它会给出错误margin。这是为什么？

另外，如果这不是正确的方法，那么声明接口的最佳位置在哪里？谢谢。

Answer 1

像这样改变

export class App{

    chartOptions: any;

    constructor(margin: IMargin) { // No error here

        // instead of this
        //this.chartOptions = {
        //    element: "#chart",
        //    margin: IMargin    // Error: Cannot find name "IMargin"
        //};

        // use this
        this.chartOptions = {
            element: "#chart",
            margin: margin
        } as { element: string, margin: IMargin };

我使用as来展示我们如何向TS保证类型......但这不是必需的。关键是，分配给属性margin通过参数边距

Answer 2

问题是您尝试将图表对象的margin属性分配给接口的值，该值不是有效值。您需要将属性设置为有效值，例如string，number，object等。

一段时间以前，我正撞着墙撞向墙壁，并没有意识到这是问题所在。所以，要完成你想要做的事，Radim Kohler说。将margin的值设置为传入的参数，如下所示：

constructor(margin: IMargin) {
     this.chartOptions = {   
          element: "#chart",
          margin: margin
     };
}

或者你可以创建一个IMargin类型的变量，并将属性设置为变量，如下所示：

constructor(margin: IMargin) {
     var myMarginInterfaceObject: IMargin = margin;
     // then you can do some editing on the obj if you want here;

     this.chartOptions = {   
          element: "#chart",
          margin: myMarginInterfaceObject
     };
}

当我使用相互作用时（我现在通常只使用类），我有一个文件夹，其中包含我所有的接口文件。它保持清洁，我总是知道在哪里寻找它们。它还使我的所有（接口）import语句都非常结构化，因为它们都来自同一个位置。

我已经创建了一个GistRun来帮助您想象一些东西： https://gist.run/?id=df782959b005308b3b095c8df569574a

Answer 3

除了RadimKöhler的回答，您还可以执行以下操作：

interface IMargin {
    top: number, right: number, bottom: number, left: number
}

interface IMarginWrapper{
    element:string, margin:IMargin
}

export class App{

    //instead of any specify your type properly here
    chartOptions: {element:string, margin:IMargin}; //alternative#1
    chartOptions1: IMarginWrapper;                  //alternative#2

    constructor(margin: IMargin) {

        //usage does not change much

        this.chartOptions = {
            element: "#chart",
            margin: margin
        };

        this.chartOptions1 = {
            element: "#chart",
            margin: margin
        };
    }
}

Typescript找不到接口名称

3 个答案: