How to import js-modules into TypeScript file

Question

I have a Protractor project which contains such a file  var FriendCard   function  card        var webElement   card      var menuButton      var serialNumber       this getAsWebElement   function              return webElement              this clickMenuButton   function              menuButton click                this setSerialNumber   function  numberOfElements            serialNumber   numberOfElements   1          menuButton   element by xpath        id   mCSB 2 container    li     serialNumber      ng-include div div 2  i                 this deleteFriend   function              element by css   ng-click  quot deleteFriend person   quot      click            element by css   ng-click  quot confirm   quot      click             module exports   FriendCard   Path to the file is   pages FriendCard js  I have no problems with its import to another file using require    var FriendCard   require       pages FriendCard     So  I ve decided to import this file to the TypeScript file just like that  import  FriendCard  from       pages FriendCard   I m using WebStorm  It tells me that  TS2305  it has no exported member  FriendCard   Maybe I have to configure tsconfig json file somehow  but I still don t know how it works  Could you help me

User · Accepted Answer

You can import the whole module as follows   import   as FriendCard from       pages FriendCard     For more details please refer the modules section of Typescript official docs

User · Answer

In your second statement  import  FriendCard  from       pages FriendCard    you are telling typescript to import the FriendCard class from the file    pages FriendCard   Your FriendCard file is exporting a variable and that variable is referencing the anonymous function   You have two options here   If you want to do this in a typed way you can refactor your module to be typed  option 1  or you can import the anonymous function and add a d ts file   See https   github com Microsoft TypeScript issues 3019 for more details  about why you need to add the file   Option 1  Refactor the Friend card js file to be typed   export class FriendCard   webElement  any  menuButton  any  serialNumber  any   constructor card        this webElement   card      this menuButton      this serialNumber       getAsWebElement   function          return this webElement      clickMenuButton   function          this menuButton click        setSerialNumber   function  numberOfElements        this serialNumber   numberOfElements   1      this menuButton   element by xpath        id   mCSB 2 container    li     serialNumber      ng-include div div 2  i         deleteFriend   function          element by css   ng-click  deleteFriend person        click        element by css   ng-click  confirm        click           Option 2  You can import the anonymous function   import   as FriendCard from module    FriendCardJs      There are a few options for a d ts file definition   This answer seems to be the most complete  How do you produce a  d ts  quot typings quot  definition file from an existing JavaScript library

User · Answer

I m currently taking some legacy codebases and introducing minimal TypeScript changes to see if it helps our team  Depending on how strict you want to be with TypeScript  this may or may not be an option for you  The most helpful way for us to get started was to extend our tsconfig json file with this property     tsconfig json excerpt              quot compilerOptions quot                  quot allowJs quot   true                       This change lets our JS files that have JSDoc type hints get compiled  Also our IDEs  JetBrains IDEs and VS Code  can provide code-completion and Intellisense  References   TypeScript - Compiler Options TypeScript  TSConfig Reference - Compiler Options - allowJs

User · Answer

I tested 3 methods to do that    Method1        const FriendCard any   require       pages FriendCard    Method2        import   as FriendCard from       pages FriendCard    Method3  if you can find something like this in tsconfig json           quot compilerOptions quot           quot allowJs quot   true    then you can write  import FriendCard from       pages FriendCard

User · Answer

I ve been facing this problem for long but what this solves my problem Go inside the tsconfig json and add the following under compilerOptions      quot compilerOptions quot                      quot allowJs quot   true

User · Answer

2021 Solution If you re still getting this error message  TS7016  Could not find a declaration file for module    myjsfile   Then you might need to add the following to tsconfig json      quot compilerOptions quot                  quot allowJs quot   true       quot checkJs quot   false                 This prevents typescript from trying to apply module types to the imported javascript

[javascript] How to import js-modules into TypeScript file?

Examples related to javascript

Examples related to typescript

Examples related to protractor

Examples related to webstorm