StencilJS - TypeScript - «Не удается найти имя ...» при экспорте перечисления - PullRequest
Новая
       32

StencilJS - TypeScript - «Не удается найти имя ...» при экспорте перечисления

0 голосов
/ 16 сентября 2018

У меня есть следующий проект:

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

, который содержит следующие два файла:

заказ container.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>
        ];
    }
}

заказ details.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

, как вы можете видеть на следующем изображении:

enter image description here

Кроме того, даже до компиляции с npm на Visual Studio Code я получаю уведомление об этой проблеме, как вы можете видеть на следующем изображении:

enter image description here

Вот строка, которая вызывает проблему:

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

где этот файл выше auto-generated, поэтому я не могу изменить его, чтобы исправить проблему.

Есть идеи, как это решить?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Помещение Anchor в собственный файл решает проблему сборки:

/ SRC / компоненты / Таможни / Детали Anchor.ts 

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

/ SRC / компоненты / заказная-деталь / заказ 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;
    }
    //*/
}
0 голосов
/ 16 сентября 2018

Если файл автоматически сгенерирован, вы в основном испорчены.Единственный способ, которым файл components.d.ts может выполнить проверку типов, - это если он имеет доступ к Anchor, импортируя его, как в 

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

. Вы можете сделать это TypeCheck, вставив Anchor в глобальную область видимости, тем самым сделав его видимымко всем файлам в контексте вашей компиляции

custom-details.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'
};

Но вы действительно, действительно, не хотите этого делать!

Это загрязняет глобальное пространство имен типом и, что еще хуже, значением!

Отправка отчета об ошибке.

...