How to use with typescript

[santigarcor]

I installed the sdk on my app and thew types defintions, i'm using TS but I'm not sure how to get the types working I keep getting this error:

Property 'MercadoPago' does not exist on type 'Window & typeof globalThis'.ts(2339)

Also, I'm not able to import the type definitions to be able to do something. Can anyone help me with this?

[francineemilia]

Hi @santigarcor,

Could you please send the more of the code - with the imports and/or script tags - without private data (for example: without your public key)?

[santigarcor]

But as I said before, I installed other @types/ packages for lodash and uuid and they work fine out of the box. So that statement is not 100% true IMO. Also, I've compared both server and default nuxt tsconfig file and the include section is almost the same.

[AleFossati]

The other @types/ packages that you mentioned, they work in every file across your project, or you use them only inside the server folder? This is still not clear to me 🤔

[santigarcor]

I'm not using the server section at all. I use them on my .vue and .ts files that are not part of the server folder.

[AleFossati]

I've installed @types/lodash here as well and it does have the same behaviour that @types/mercadopago-sdk-js has in Nuxt, unfortunately this is an inconvenient caused by the Nuxt configuration. See the video below.

Gravacao.de.Tela.2024-05-02.as.18.13.33.mov

The _ is available only inside the server folder and yes, you can use it in other folders, but you have to explicitly import it like import _ from 'lodash', see the video below.

Gravacao.de.Tela.2024-05-02.as.18.16.58.mov

The problem here is that lodash functions can be imported, so it does make sense that it works this way.

In the other hand, the @mercadopago/sdk-js npm package is only a wrapper of the actual mercadopago/sdk-js, which is available via cdn at https://sdk.mercadopago.com/js/v2. MercadoPago functions, bricks, etc, cannot be imported, they reside inside the window object only.

What you can do to get autocomplete and intellisense from your IDE, is explicitly include @types/mercadopago-sdk-js in your .tsconfig so it'll be available across all your project, or you can add the traditional triple slash in the file where you want to use it.

/// <reference path="node_modules/@types/mercadopago-sdk-js/index.d.ts" />

Gravacao.de.Tela.2024-05-02.as.18.42.05.mov

[santigarcor]

Thanks for that explanation, now it works fine. The issue, as you said is that mercadopago doesn't export something to import that's why you need to do what you just mentioned.

Sorry for the inconvenience and thanks for the help.