How to use Javascript File in TypeScript

Question

I am currently developing in Next.js and React (TypeScript).

Then a problem arose.

It is the inability to load js files.

I have tried the following.
　・Import javascript modules
　　import * as module from '../../../script';
　・require code
　　const remise = require('../../../script/rtoken-3.0.0'); 　　
Neither did it work.

Please tell me how to write it. Thank You.

Here is the code. ・js(path:../../../script/rtoken-3.0.0.min.js)

(function (window, undefined) {
  var CONNECTION_TIMEOUT = 5000;

  function rtoken() {
    this.consumerID = '';
    this.SessionTimeout = 60000;
    this.ConnectionAddress = '';
    ～
    var rtoken = this;
    window.onbeforeunload = function () {
      rtoken.Abort();
    };
    window.onpagehide = function () {
      rtoken.Abort();
    };
  }
  rtoken.prototype = {
    Init: function () {
      this.consumerID = getUUID();
      this.SessionTimeout = 60000;
      this.TokenType = '';
　　　～
    },
    Create: function () {
      var self = this;
      requestData = "{\"SessionID\":\"" + this.consumerID + "\"," + "\"TokenType\":\"" + this.TokenType + "\"," + "\"Sequence\":\"" + this.Sequence + "\"," + "\"Options\":\"" + this.Options + "\"}";
      exJsonp(self.ConnectionAddress, CONNECTION_TIMEOUT, requestData, "CreateToken", function (data) {
      　～
      });
    },
  };

  function exJsonp(url, htttimeout, RequestData, MethodName, Callback) {
    try {
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'jsonp',
        data: encodeURIComponent(RequestData),
        jsonpCallback: MethodName,
        timeout: htttimeout,
        success: function (data) {
          Callback(data);
        },
        error: function (data) {
          Callback(data);
        },
        complete: function (data) {}
      });
    } catch (e) {
      Callback(null);
    }
  };

  function getUUID() {
    var uuid, i, random;
    uuid = "";
    for (i = 0; i < 32; i++) {
      ～
    }
    return uuid;
  };
  if (!window.remise) {
    window.remise = {};
  }
  window.remise.rtoken = rtoken;
})(window);

tsfile()

～
import * as rtoken from '../../../script/rtoken-3.0.0.min';　// ×

export const Index = (props) => {
  const jsModule = require('../../../script/rtoken-3.0.0');
　var token= jsModule();
  // What does not come in to token
  console.log('token:', token);

  return (
    null
  )
}

Does this answer your question? Mixing JavaScript and TypeScript in Node.js — Stav Noy
– Stav Noy, Commented Sep 1, 2023 at 8:01
Now that I look again, I see rtoken isn't an ES module, but the older "global" module. ("UMD", I think). Best is to check the docs on this rtoken library. If not, allowUmdGlobalAccess might be helpful: devblogs.microsoft.com/typescript/announcing-typescript-3-5/… — Stav Noy
– Stav Noy, Commented Sep 7, 2023 at 11:19

E. Berke Karagöz · Accepted Answer · 2023-09-01 08:23:52Z

0

Make sure you allow turn on allowJs option in tsconfig.json. And after you import depending on your configuration, you can ignore the linting errors

answered Sep 1, 2023 at 8:23

E. Berke Karagöz

1063 bronze badges

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

4 Comments

tatsuya Over a year ago

yes. I already have allowjs in tsconfig.json...

E. Berke Karagöz Over a year ago

so no errors but token is undefined?

tatsuya Over a year ago

It seems that jQuery and React are not compatible.

E. Berke Karagöz Over a year ago

you can use them both together. but it is not practical as React interacts with VDOM and JQuery interacts with actual DOM. so you would see red flags everywhere unless you find a good way to control them

Collectives™ on Stack Overflow

How to use Javascript File in TypeScript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related