1

有什么方法可以强制 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 添加到导出的类型列表中？

4

1 回答 1

3

Enum完全是一个 TypeScript 概念。JavaScript 没有 Enums 的概念，鉴于 TypeScript Enums 具有的所有功能，您看到的生成代码是 TypeScript 可以生成的“最佳”解决方案。

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

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

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

为了回答这个问题，这里是我使用的示例：

列表项.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.

在此示例中，构建 asdist将包含单独的导出，/dist/collection/my-dropdown/list-items.js以便它可以在其他依赖的应用程序和库中重用。

于 2018-04-25T14:14:42.410 回答