Typings pour les typages braintree.dropin v3 pour angulaire

Question

J'intègre Braintree Drop-in v3 dans une application angulaire avec le paquet npm i -save braintree-web-drop-in.

package Je trouve @types/braintree-web que je suivais l'exemple mentionné here mais il ne semble pas contenir de soutien Drop-in fonctionnalité. Clairement, ce n'est pas le bon paquet.

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 
    }); 
    }); 
}); 

J'ai déclaration d'importation import * as braintree from "@types/braintree-web";

Puis braintree obtient reconnu comme un espace de noms global, mais braintree.dropin me cause encore des problèmes.

Le compilateur dactylographiée se plaint objet dropin:

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

Question:

est-il un moyen facile de dire tapuscrit il est tout beau et rouler avec elle? Ou dois-je fournir des dactylogrammes moi-même? Ou existent-ils déjà quelque part? Ou serait-il préférable d'utiliser braintree-web-package?

Answer 1

Je l'ai résolu en utilisant import * as dropin from 'braintree-web-drop-in'; Il est possible parce que j'ai module Braintree installé dans node_modules

Son clairement les bases Typescript, mais quelque chose nerveless je ne savais pas au sujet. Puisque cette question concerne la chute de braintree dans l'interface utilisateur, voici mon code combiné avec Typescript et angulaire. Javascript traite différemment de Typescript, donc vous ne devriez pas utiliser le mot clé function dans Typescript.

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 

     } 
    }); 
    }