Semantic-ui: Typescript definitions

[val-samonte]

Example:
Typescript compiler would complain because jQuery doesn't have a function named modal.
$('.ui.modal').modal('show');

[jlukic]

I don't believe this is a bug with the library.

[DaSchTour]

This is not a bug in the library but it would be nice if somebody could create Typings for Semantic UI JavaScript Librarys. So Maybe this could be reopened as a feature request?

[val-samonte]

@jlukic I know this is not the right place to file the issue, but as @DaSchTour mentioned this would be better as a feature request? It is really convenient for the Typescript users if we had this one, or maybe submit a PR to DefinitelyTyped repo?

[hugohomesquita]

I started, we will continue :D https://github.com/hugohomesquita/DefinitelyTyped

[mikeesouth]

@hugohomesquita Can you submit a PR for your Semantic UI definitions to the DefinitelyTyped master repo?

[alfkonee]

Has this been merged with the main DefinatelyTyped Library

[tomtobac]

@hugohomesquita how we can use it? I installed typings install dt~jquery --global and still I don't have the references, and typings search semantic-ui gives _No results found_. Any clue? Thanks

[larvanitis]

@hugohomesquita I can't find it in your repo.

Is anyone working on it? If yes, where?

[tripflex]

Yes this would be very beneficial to have, especially so we can set it up in IDEs like PHPStorm, etc.

Here's what I found in his repo:
https://github.com/hugohomesquita/DefinitelyTyped/tree/master/semantic-ui

[tripflex]

@alfkonee no it has not, and I do not see any PRs open for it either.

[tripflex]

@jlukic does this mean you guys have no intention of adding typescript definitions?

[budiadiono]

Hi guys, I created a helper module to generate the type definitions. It's on https://github.com/budiadiono/semantic-ui-typescript. Or you just can use semantic-ui.d.ts directly.

[dusthub]

@budiadiono Will you plan to contribute your project to DefinitelyTyped/DefinitelyTyped ?

[budiadiono]

@dusthub It's good idea, but I'm not sure I have a chance to do that since semantic is modular so I have to create separated d.ts files for each module. But I'll think about it when I'm free.

[valepu]

9 hours ago someone made a Pull Request on DefinitelyTyped to add Semantic UI https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14252#pullrequestreview-18565205

[leonard-thieu]

This is merged now.

npm install --save-dev @types/semantic-ui

[0x450x6c]

Awesome ! Thanks for that :)

[subramn]

Are there examples on how to use this.

[larvanitis]

If you already have jquery's type definitions up and running, it is just a matter of npm i @types/semantic-ui. After that you can use it like:

const settings: SemanticUI.DropdownSettings = {
  allowReselection: true,
  allowAdditions: 'abc', // <- this will produce an error since it is specified as `boolean` in typedefs
};

$('#my-dropdown').dropdown(settings);
$('#my-dropdown').dropdown('toggle');
$('#my-dropdown').dropdown('go nuts'); // <- this will produce an error since there is no such "behavior" specified in typedefs

[subramn]

thanks for the response, when i tried to use its saying dropdown is not a property of JQuery

[subramn]

below code was giving an error -Property 'dropdown' does not exist on type 'JQuery'.
import {Component, AfterViewInit} from '@angular/core';
import * as $ from 'jquery';
@Component({
selector : 'app-root',
templateUrl: './app.component.html',
styleUrls : ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'app works!';

ngAfterViewInit(): void {
$('.ui.dropdown').dropdown();
}
}

[larvanitis]

I do not want to create any confusion here. I am using my custom typedefs, which I have pubished here if you want to try them (https://gist.github.com/larvanitis/4d2b8c80eb70d8b2fb0bde7f3786378d). These work more or less the same way as the published @types.

I use the following setup, if it helps you.

• package.json

    "@types/jquery": "^2.0.45",
    "jquery": "3.2.1",
    "ts-node": "3.0.4",
    "tslint": "5.2.0",
    "typescript": "2.3.2",

• custom_typings/jquery.semantic-ui.d.ts - the file from the gist I linked

• webpack.config.js - I have exposed Jquery as a global so I do not have to import * as $ from 'jquery'; to use it

    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
        'window.jQuery': 'jquery', // this doesn't expose jQuery property for window, but exposes it to every module
      }),
    ],