Question

有没有办法强制StencilJS导出枚举以供常规JavaScript代码使用？

生成的JavaScript文件仅导出组件类。

export { Calendar, CalendarDailyView, CalendarMonthlyView, CalendarWeeklyView, CalendarYearlyView };

它不会导出使用JavaScript定义的其他类或枚举。

让我们假设Enum在TypeScript中定义如下：

export enum ViewType {
    daily = 0,
    weekly = 1,
    monthly = 2,
    yearly = 3
}

生成的JavaScript文件包含：

var ViewType;
(function (ViewType) {
    ViewType[ViewType["daily"] = 0] = "daily";
    ViewType[ViewType["weekly"] = 1] = "weekly";
    ViewType[ViewType["monthly"] = 2] = "monthly";
    ViewType[ViewType["yearly"] = 3] = "yearly";
})(ViewType || (ViewType = {}));

如何强制StencilJS将ViewType添加到导出的类型列表中？

Answer 1

Enum完全是TypeScript概念。 JavaScript没有Enums的概念，您看到的生成代码是TypeScript可以生成的“最佳”解决方案given all of the functionality TypeScript Enums have。

为了使它与普通的旧JavaScript兼容，可能值得将ViewType声明为基本数组，例如

export const ViewType = [
    { id: 1, name: 'Day' },
    { id: 2, name: 'Month' },
    { id: 3, name: 'Year' }
];

在JS中比编译的TypeScript更容易解释，如果你要将任何这些数据渲染到屏幕上，这是一个更好的解决方案。

为了使这个答案粗俗，这是我的使用示例：

<强>列表items.ts

export const ListItems = [
    { id: 1, name: 'Day' },
    { id: 2, name: 'Month' },
    { id: 3, name: 'Year' }
];

我-dropdown.tsx

import { Component, State } from '@stencil/core'; import { ListItems } from './list-items'; @Component({ tag: 'my-dropdown' }) export class MyDropdown { @State() state: { selectedId?: number } = {}; private onSelectedValueChanged(evt: UIEvent) { this.state = { ...this.state, selectedId: parseInt((evt.target as HTMLInputElement).value) }; } render() { return ( <div> <select onChange={this.onSelectedValueChanged.bind(this)}> <option>Please select...</option> {ListItems.map(i => <option value={i.id}>{i.name}</option>)} </select> <br />Selected ID: {this.state.selectedId} </div> ); } }

重要：要在其他应用中重复使用导出的集合或枚举，请务必构建为dist（请参阅stencil.config.js中的outputTargets documentation。

在此示例中，构建为dist将在/dist/collection/my-dropdown/list-items.js中包含单独的导出，以便可以在其他相关应用和库中重复使用。

StencilJS导出自定义类

1 个答案: