5

我有以下项目：

https://github.com/napolev/stencil-cannot-find-name

其中包含以下两个文件：

自定义容器.tsx

import { Component, Element, State } from '@stencil/core';

@Component({
    tag: 'custom-container',
    styleUrl: 'custom-container.scss',
})
export class WebComponent {
    @Element() el!: HTMLStencilElement;
    @State() label: String = '<empty>';
    componentDidLoad() {
        document.querySelector('.button_get_anchor').addEventListener('click', () => {
            let position = '<unset>';
            position = this.el.querySelector('custom-details').getDefaultKnobEPosition();
            this.label = position;
        });
    }
    render() {
        return [
            <div class="label">{this.label}</div>,
            <custom-details></custom-details>,
            <div>
                <button class="button_get_anchor">Get Anchor</button>
            </div>
        ];
    }
}

自定义详细信息.tsx

import { Component, Method } from '@stencil/core';

@Component({
    tag: 'custom-details',
    styleUrl: 'custom-details.scss',
})
export class WebComponent {
    render() {
        return [
            <div class="details">This is the "custom-details"</div>
        ];
    }
    @Method()
    sayHelloWorldOnConsole() {
        console.log('Hello World!');
    }
    //*
    @Method()
    getDefaultKnobEPosition(): Anchor {
        return Anchor.Left;
    }
    //*/
}
export enum Anchor {
    Left = 'left',
    Center = 'center',
    Right = 'right',
}

我的问题是：当我运行时：

$ npm start --es5

我收到以下错误：

[ ERROR ]  TypeScript: ./stencil-cannot-find-name/src/components.d.ts:66:39
           Cannot find name 'Anchor'.

     L65:  interface CustomDetails {
     L66:    'getDefaultKnobEPosition': () => Anchor;
     L67:    'sayHelloWorldOnConsole': () => void;

[21:56.0]  dev server: http://localhost:3333/
[21:56.0]  build failed, watching for changes... in
           15.59 s

如下图所示：

在此处输入图像描述

此外，即使在使用 编译之前npm，Visual Studio Code我也会收到有关该问题的通知，如下图所示：

在此处输入图像描述

这是导致问题的行：

https://github.com/napolev/stencil-cannot-find-name/blob/master/src/components.d.ts#L66

上面那个文件在哪里auto-generated，所以我不能修改它来解决这个问题。

关于如何解决这个问题的任何想法？

谢谢！

4

2 回答 2

2

放入Anchor自己的文件可以解决构建问题：

/src/components/custom-details/Anchor.ts

export enum Anchor {
    Left = 'left',
    Center = 'center',
    Right = 'right',
}

/src/components/custom-details/custom-details.tsx

import { Component, Method } from '@stencil/core';
import { Anchor } from './Anchor';

@Component({
    tag: 'custom-details',
    styleUrl: 'custom-details.scss',
})
export class WebComponent {
    render() {
        return [
            <div class="details">This is the "custom-details"</div>
        ];
    }
    @Method()
    sayHelloWorldOnConsole() {
        console.log('Hello World!');
    }
    //*
    @Method()
    getDefaultKnobEPosition(): Anchor {
        return Anchor.Left;
    }
    //*/
}
于 2018-09-17T12:47:30.787 回答
1

如果文件是自动生成的，那你基本上就完蛋了。该components.d.ts文件可以进行类型检查的唯一方法是它是否可以Anchor通过导入它来访问

import {Anchor} from './custom-details';

您可以通过将 Anchor 注入全局范围来使其成为 TypeCheck，从而使其对编译上下文中的所有文件可见

自定义详细信息.tsx

export class WebComponent {
   // ....
}

declare global {
  enum Anchor {
    Left = 'left',
    Center = 'center',
    Right = 'right'
  }
}

(<{Anchor: typeof Anchor}>window.Stencil).Anchor = {
  Left = 'left',
  Center = 'center',
  Right = 'right'
};

但你真的，真的不想这样做！

这会污染全局命名空间的类型，更糟糕的是，还有一个值！

提交错误报告。

于 2018-09-16T07:37:24.893 回答