Typ für braintree.dropin v3 typings für eckig

Question

Ich integriere Braintree Drop-in v3 in eine eckige App mit Paket npm i -save braintree-web-drop-in.

Dann fand ich Paket @types/braintree-web Ich folgte dem Beispiel erwähnt here jedoch scheint es keine Unterstützung für Drop-in-Funktionalität zu enthalten. Das ist natürlich nicht das richtige Paket.

braintree.dropin.create({ 
    authorization: environment.braintreeKey, 
    selector: '#dropin-container' 
}, function (err, dropinInstance) { 
    if (err) { 
    // Handle any errors that might've occurred when creating Drop-in 
    console.error(err); 
    return; 
    } 
    submitButton.addEventListener('click', function() { 
    dropinInstance.requestPaymentMethod(function (err, payload) { 
     if (err) { 
     // Handle errors in requesting payment method 
     } 

     // Send payload.nonce to your server 
    }); 
    }); 
}); 

Ich habe Import-Anweisung import * as braintree from "@types/braintree-web";

Dann braintree als globalen Namensraum erkannt wird, jedoch braintree.dropin noch mir Probleme zu verursachen.

Typoskript Compiler beschwert sich über dropin Objekt:

Property 'dropin' does not exist on type 'typeof braintree'.

Frage:

Gibt es eine einfache Möglichkeit, Typoskript zu sagen, es ist alles in Ordnung und Rolle mit ihm? Oder muss ich mich selbst typisieren? Oder existieren sie schon irgendwo? Oder wäre es besser braintree-web-package zu benutzen?

Answer 1

Ich löste es durch die Verwendung import * as dropin from 'braintree-web-drop-in'; Es ist möglich, weil ich braintree Modul in node_modules

Seine installiert haben eindeutig das Typoskript Grundlagen, aber ohne Nerven etwas, was ich nicht wusste, tat.

Da diese Frage zu braintree Rückgang der UI ist, hier ist mein Code mit Typoskript kombiniert und Winkel 2. Javascript behandelt this anders als Typoskript, so dass Sie nicht function Schlüsselwort innerhalb Typoskript verwenden sollten.

braintreeIsReady: boolean; 
    dropIninstance: any; 

    ngOnInit() { 
    dropin.create({ 
     authorization: environment.braintreeKey, 
     selector: '#dropin-container' 
    }, (err, dropinInstance) => { 
     if (err) { 
     // Handle any errors that might've occurred when creating Drop-in 
     console.error(err); 
     return; 
     } 
     this.dropIninstance = dropinInstance; 
     this.braintreeIsReady = true; 
    }); 
    } 

    pay() { 
    this.dropIninstance.requestPaymentMethod((err, payload) => { 
     if (err) { 
     // deal with error 
     } 
     else { 
     //send nonce to the server 

     } 
    }); 
    }