How to use a javascript library without type definition on Ionic 2 typescript app?

Question

I am trying to use the Jquery Bracket library on my ionic 2 typescript app. However, the library does not has type definitions. So, I tried to use it traditionally. I placed js and CSS file of the library into my src/assets folder and I added necessary tags into my src/index.html file. Lastly, I declare a variable on my typescript file and tried to use it like it's suggested on the examples on the library site.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as $ from 'jquery'

declare var Options: any;

    @Component({
      selector: 'page-tournament-schedule',
      templateUrl: 'tournament-schedule.html'
    })
    export class TournamentSchedulePage {

      constructor(public navCtrl: NavController) {
      }

      ionViewDidLoad() {
        console.log('Hello TournamentSchedule Page');
        this.getBrackets();
      }

      getBrackets() {
        var singleElimination = {
          "teams": [              // Matchups
            ["Team 1", "Team 2"], // First match
            ["Team 3", "Team 4"]  // Second match
          ],
          "results": [            // List of brackets (single elimination, so only one bracket)
            [                     // List of rounds in bracket
              [                   // First round in this bracket
                [1, 2],           // Team 1 vs Team 2
                [3, 4]            // Team 3 vs Team 4
              ],
              [                   // Second (final) round in single elimination bracket
                [5, 6],           // Match for first place
                [7, 8]            // Match for 3rd place
              ]
            ]
          ]
        }
        $('.demo').Options.bracket({
          init: singleElimination
        });
      }
    }

But, it's giving me the following error

Cannot read property 'bracket' of undefined

Where from you get Options ? I can't find it in docs, I think your issue isn't connected with type definitions, just your $('.demo').Options is undefined., btw, if you want you can add custom typings for that lib to your project. — AlexanderT
– AlexanderT, Commented Jul 14, 2017 at 12:03
I tried it like just bracket it's also not working @AlexanderTuniev — cnian
– cnian, Commented Jul 14, 2017 at 12:04

AlexanderT · Accepted Answer · 2017-07-14 12:11:57Z

0

Try the following. Create a ts file, name it customTyping.d.ts or something similar, add folowing content,

    interface JQuery {
      brackets?: any;
    }

Then include that file in tsconfig.json

"include": [
    "...",
    "...",
    "pathto/customTypings.d.ts"
  ]

This way you will have type definition for brackets in JQuery. Let me know if this helps.

answered Jul 14, 2017 at 12:11

AlexanderT

1871 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cnian Over a year ago

after doing this, do I need to declare a variable again or can I use it like in the documentation?

cnian Over a year ago

I used it like in the documentation and it is saying bracket is not a function

AlexanderT Over a year ago

how do you included that library in your project ?, maybe it is not available?

cnian Over a year ago

I installed it via npm then I placed js and css files into src/assets folder then I included the tags to my src/index.html file

AlexanderT Over a year ago

check this out, netbasal.com/…

Collectives™ on Stack Overflow

How to use a javascript library without type definition on Ionic 2 typescript app?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related