javascript - StencilJS 导出自定义类

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 没有枚举的概念，您看到的生成代码是 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 更容易解释，如果您要将这些数据中的任何一个呈现到屏幕上，这是一个更好的解决方案。

为了回答 Stencily，这是我使用的示例:

list-items.ts

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

my-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 中的 outputTargets documentation。 js.

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