javascript - StencilJS - TypeScript - 导出枚举时“找不到名称......”
问题描述
我有以下项目:
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
,所以我不能修改它来解决这个问题。
关于如何解决这个问题的任何想法?
谢谢!
解决方案
放入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;
}
//*/
}
推荐阅读
- sql - 如何在具有一个固定值的多对多表中一次插入多行?
- html - 带有检查点的进度条 - 自定义形状
- python - 如何解决类参数“self”
- node.js - 如何让语音计数?
- arrays - 将 pandas 数据框列转换为 numpy 数组,每个数组根据 otehr 列中的值进行分隔
- reactjs - react typescript如何配置routes.ts文件
- python - Spyder IDE 中的 IPython 控制台中没有打印输出
- python - PySpark 将两个或多个数据框与条件结合起来
- angular - 在使用 *ngFor 遍历时需要从 Angular 中的 Array 中过滤一些数据
- spring - 与光池的数据库连接中的spring boot 2.3.1异常