How to create a custom typescript definition when using packages that don't already have one.

create-typescript-for-installed-project-react.md

You have installed a package that doesn't have a typescript definition. Here is how you can create one yourself:

See: Transak/transak-sdk#7 (comment)

Here's how I fixed this:

1. Create a new file: src/@types/transak-sdk.d.ts
2. Add the Following: [Transak Declaration File]
3. Add the Following: [Use Transak Declaration File in component]

Transak Declaration File

declare module '@transak/transak-sdk' {
    export enum Foo {
        STAGING = "STAGING",
        PRODUCTION = "PRODUCTION"
    } 
    export interface Settings {
      apiKey: string;
      environment: string; // tried to set this to be ->  environment: 'STAGING' | 'PRODUCTION', but it gave error: 'string is not assignable to type 'STAGING' | 'PRODUCTION''
      defaultCryptoCurrency: string;
      themeColor: string;
      hostURL: string;
      widgetHeight: string;
      widgetWidth: string;
    }
  
    export interface EventData {
      [key: string]: any;
    }
  
    export interface OrderData {
      [key: string]: any;
    }
  
    export default class Transak {
      public readonly ALL_EVENTS = 'ALL_EVENTS';
      public readonly ERROR = 'TRANSAK_ERROR';
      public readonly EVENTS: {
        TRANSAK_ORDER_CANCELLED: "TRANSAK_ORDER_CANCELLED"
        TRANSAK_ORDER_CREATED: "TRANSAK_ORDER_CREATED"
        TRANSAK_ORDER_FAILED: "TRANSAK_ORDER_FAILED"
        TRANSAK_ORDER_SUCCESSFUL: "TRANSAK_ORDER_SUCCESSFUL"
        TRANSAK_WIDGET_CLOSE: "TRANSAK_WIDGET_CLOSE"
        TRANSAK_WIDGET_CLOSE_REQUEST: "TRANSAK_WIDGET_CLOSE_REQUEST"
        TRANSAK_WIDGET_INITIALISED: "TRANSAK_WIDGET_INITIALISED"
        TRANSAK_WIDGET_OPEN: "TRANSAK_WIDGET_OPEN"
      };
  
      constructor(settings: Settings);
  
      public init(): void;
      public on(event: string, callback: (data: EventData) => void): void;
      public close(): void;
    }
}

Use Transak Declaration File in component

import React, { useState } from 'react';
import transakSDK from "@transak/transak-sdk";

const settings = {
    apiKey: '',  // Your API Key
    environment: "STAGING", // STAGING/PRODUCTION
    defaultCryptoCurrency: 'ETH',
    themeColor: '000000', // App theme color
    hostURL: window.location.origin,
    widgetHeight: "700px",
    widgetWidth: "500px",
}


function BuySellCrypto() {


    function openTransak() {
        const transak = new transakSDK(settings);

        transak.init();

        console.log({transakSDK, transak})

        // To get all the events
        transak.on(transak.ALL_EVENTS, (data: any) => {
            console.log(data)
        });

        // This will trigger when the user closed the widget
        transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, (eventData: any) => {
            console.log(eventData);
            transak.close();
        });

        // This will trigger when the user marks payment is made.
        transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData: any) => {
            console.log(orderData);
            window.alert("Payment Success")
            transak.close();
        });
    }
    return (
        <div className="BuySellCrypto">
            <h3>
                Let mainstream users buy crypto in your app

                Onboard more users to crypto and increase revenue through a simple developer integration.
            </h3>
            <button onClick={() => openTransak()}>
                Buy Crypto
            </button>
        </div>
    );
}

export default BuySellCrypto;

Fun fact, ChatGPT helped me get this answer. Although, I had to make some modifications.

I used the following code snippet and asked ChatGPT to make a declaration file for it:

https://github.com/Transak/Transak-widget-react-sample/blob/c666c6f9461a9551e846eed6d2aabda19300801e/src/App.js#L17-L18

Then we can use console.log to see what attributes will be in our class.

const transak = new transakSDK(settings);
transak.init();
console.log({transakSDK, transak})