HTML Elements Forums General Discussions Typescript bindings

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by Avatar admin 8 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #99760
    Avatar
    Anonymous

    Do you have plans to include Typescript bindings some time in near future?
    I am using proprietary in-house Typescript MVC framework and evaluating new UI layer for it for our next project.
    Your framework looks very promising but without bindings can not use it 🙁
    We use WebStorm IDE and FuseBox bundler.

    #99761
    Avatar
    admin
    Keymaster

    Hi petays,

    Thank you for writing.

    We will consider adding Typescript definitions in the future versions. At present, we are focused on building the User Interface components and adding the missing features to the existing components.
    Is not it possible to use the Framework without Typescript? We have tutorials like that one https://www.htmlelements.com/docs/create-angular-and-react-applications-with-shared-web-components/ which shows how to use a Custom Element from our framework within Angular & React projects which use Typescript. As for Type checking, all properties in our UI Components are Typed(int, float, date, string, bool) with built-in type checking at run-time i.e invalid values are handled by the framework.

    Best regards,
    Boyko Markov

    https://www.htmlelements.com
    Smart HTML Elements Team

    #99763
    Avatar
    Anonymous

    Hi
    Good to hear that you have not abandoned typescript totally.
    It is indeed possible to use Smart HTML Elements with typescript using just one import:

    import "@smarthtmlelements/smart-elements/source/smart.elements.js";

    Only that I am missing intellisense and code completion as I can not use actual types but HTMLElement or nearest type from it if I believe that I can use it.
    And can not Ctrl-click (jump) to object or method in question.
    I have to copy every method that I use from your API or examples pages. It is a bit tedious but once I got all the words and have tested them to work things go quite smoothly 🙂

    Overall I like custom tags very much as they make manipulating DOM elements really slick with only one instance to track and you can use DOM API for that.
    IMO your framework has definitely a bright future as it matures a bit and is more feature complete.

    Example: Smart HTML Elements with typescript without type definitions

    P.S. I would love to have a preview button before submitting post with heavy formatting.

    • This reply was modified 1 year, 5 months ago by Avatar . Reason: fix link, retry submit
    #99772
    Avatar
    Anonymous

    I decided to roll on my own type definitions to keep typescript compiler happy.
    With a smart guy this kind of type definitions could be generated programmatically in no time!
    It is a bit tedious and I feel a bit stupid doing this, but I feel it is easier for my eyes to do this way:

    export interface MenuEvent extends CustomEvent {
        detail: SmartMenuItem;
    }
    
    export interface SmartMenu extends HTMLElement {
        locale: string;
    }
    
    export interface SmartMenuItem extends HTMLElement {
        item: any;
        label: any;
        value: any;
    }
    export interface SmartTextBox extends HTMLElement {
        locale: string;
        readonly: boolean;
        required: boolean;
        theme: string;
        value: string;
    }
    
    export interface SmartPasswordTextBox extends HTMLElement {
        locale: string;
        maxLength: number;
        minLength: number;
        passwordStrength: (password, allowedSymbols) => string;
        required: boolean;
        showPasswordIcon: boolean;
        showPasswordStrength: boolean;
        theme: string;
        tooltipArrow: boolean;
        value: string;
    }
    export interface SmartDropDownList extends HTMLElement {
        displayMember: string;
        locale: string;
        selectedIndexes: any[];     // array type?
        selectedValues: any[];      // array type?
        selectionMode: string;
        valueMember: string;
        clearItems();
        insert(position: number, value: any);
    }
    #99777
    Avatar
    admin
    Keymaster

    Hi petays,

    Thanks for sharing this. We are sure it would be helpful to many.

    Best Wishes,
    Smart HTML Elements Team
    https://www.htmlelements.com

    #100592
    Avatar
    admin
    Keymaster

    Update:

    Typescript definitions are now part of the Smart Web Components download package.

    Best Wishes,
    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.