I get an "Unexpected identifier" error when I try to import a class.
I'm importing class this way:
Class to be exported (WindowManager)
export default class WindowManager {
sayHello() {
console.log('hello')
}
}
Class which imports (Main)
import WindowManager from './handlers/WindowManager';
WindowManager = new WindowManager();
WindowManager.sayHello()
Folder hierarchy
Class which imports (Main) > handlers > Class to be imported (WindowManager)
Extra info
Throws the error at this line of code (Main)
import WindowManager from './handlers/WindowManager.js';
I've looked into Unexpected Identifier {classname} when importing JavaScript Class into another Class and make changes and still nothing
I was able to fix this by migrating to TypeScript.
What is TypeScript?
TypeScript is JavaScript on steroids, basically. It adds types, private methods, etc. Also provides a compiler which compiles your TypeScript code into JavaScript code! So you don't have to worry about compatibilty, you write on TypeScript and then compile to JavaScript with a simple command.
How to install TypeScript?
npm install -g typescript
How to use TypeScript?
Enter your project folder (where package.json is);
Generate tsconfig.json by running tsc --init;
Create your TypeScript index file;
Run tsc on terminal to compile ALL TypeScript project files to JavaScript;
Notice that your index TypeScript file was compiled to JavaScript;
Use the compiled JavaScript file as the main entry point on package.json;
Start your app/website/whatever heheh.
Notes:
Everytime you make changes to TypeScript file you have to use tsc
to recompile the code and make the changes on the JavaScript file;
VS Code comes with TypeScript support, if you're using Atom you can install TypeScript package by following this tutorial: Installing atom-typescript package.
Happy coding!
Articles that helped me:
VS Code Tutorial
TypeScript and Electron
How to auto-generate TypeScript config json?
Why TypeScript? - YouTube video
Related
I am not used to using node js and typescript.
I tried importing Paytm dependency using the following code:
npm install paytmchecksum
or
by adding the below code in package.json
"dependencies": {
...
"paytmchecksum": "^1.5.0"
...
}
Now, I am using firebase, typescript and node.js.
When I try importing, using
import PaytmChecksum from "../node_modules/PaytmChecksum";
import PaytmChecksum from "paytmchecksum";
or any other thing. There are just errors. I believe maybe because the dependency is to be used with javascript rather than typescript.
I get the following error:
Could not find a declaration file for module '../node_modules/PaytmChecksum'. 'd:/firebase-functions/functions/node_modules/PaytmChecksum/PaytmChecksum.js' implicitly has an 'any' type.
sometimes I get this,
Could not find a declaration file for module 'paytmchecksum'. 'D:/firebase-functions/functions/node_modules/paytmchecksum/PaytmChecksum.js' implicitly has an 'any' type.
Try npm i --save-dev #types/paytmchecksum if it exists or add a new declaration (.d.ts) file containing declare module 'paytmchecksum';
What is the workaround for this problem?
You either need to create your own type declarations file or use #ts-ignore on the line before the import.
If you create your own type.d.ts file, you will need to make sure that it is included the project in your tsconfig.json project file.
The type file can be as simple as one line (./mytypes/paytmchecksum.d.ts):
declare module 'paytmchecksum';
This simply gets rid of the implied any and makes it explicit. You won't get any intellisense or type checking, but it will fix the error. You could go the extra mile and create a full type-definition file. If you, do you should add it to the #types repository so others can use it.
Then just add include to your tsconfig.json file:
{ "include": [
"mytypes/paytmchecksum.d.ts"
]
}
while I added any component to my pure react-native project, the application screen turns to the white empty page.
The import 'react-native-foo-package' line has '...' near the package name, and it has this message:
[ts]
not find a declaration file for module 'react-native-foo-package'. '/project/node_modules/'react-native-foo-package'/index.js' implicitly has an 'any' type.
Try npm install #types/'react-native-foo-package' if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-foo-package';
npm install #types/'react-native-foo-package' couldn't help, because this package doesn't exist in npm.
I don't use any typescript file or related code to typescript.
react: "16.6.0-alpha.8af6728"
react-native: "0.57.4"
This question Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type doesn't answer my question, because, in my package.json file, there is no "main" exists.
Well #Samane Yaghoobi is right! it has nothing to do with "main":"index.js".
Here's what you should do. After successfully setting up the library in your project on whatever platform (VsCode or Atom). Re run the project from the command line => react-native run-android. After that, navigate to your project in Android Studio. Then open up build.gradle and sync your gradle again. Then just to make sure, checkout the MainApplication in Android Studio to see if the file(e.g. import com.whatever.foo) imported properly, if everything looks good, you are good to go. If you need further instructions in setting up the library in VsCode/Atom let me know, I will create visual presentation to make things much more clear.
I installed the PDF.JS npm packages and import the same in typescript file, but it does not work as expected. I used the below code to import the PDF.JS into typescript.
import { PDFJSStatic } from 'pdfjs-dist';
const PDFJS: PDFJSStatic = require('pdfjs-dist');
PDFJS.getDocument('helloworld.pdf').then(console.log);
and I am getting the error
Severity Code Description Project File Line Suppression State
Error TS2307 Cannot find module 'pdfjs-dist'. app.ts 2 Active
Severity Code Description Project File Line Suppression State
Error TS2304 Cannot find name 'require'. app.ts 3 Active
please provide your valuable suggestion and let me know what I am missed in it if any.
App structure really matters while importing any modules,
you need to import this first into your root level ts file
app.module.ts and even in tsconfig.app.json.
I really hope this isn't an opinion question, and I don't think it is...
Is there a correct way to include a JS module in a TS project? If I don't do one of the 2 steps below, my IDE (linter, wahtever) gives me TS2307: Cannot find module when I use the line import * as myPackage from 'myPackage'.
The steps I use are
npm i thePackage --save
typings i -g thePackage --save // assuming it has a typings
If the module doesn't have a typings, all you do is
declare let myPackage:any
Is that all you have to do in order to use an external package in a TS project? Or am I missing a vital step?
I know I could create a .d.ts file, but for now, I'd like to get the hang of TS without spending all my time writing those files.
I've also been reading about DefinitelyTyped and #types/myPackage, but I don't know much about it...
If the package has declaration files
In TypeScript 2.0+, for a package the-package
npm install --save #types/the-package
If the package doesn't have declaration files
If the package doesn't have declaration files for it, create a file named externals.d.ts with the following:
// This file should contain no top-level imports or exports.
declare module "the-package";
Note: If there's more than one thing you can import from the-package, you can use a wildcard as well:
declare module "the-package/*";
At this point, you can do basically whatever you want with the package when you import it - it comes in as any.
Strongly typing the package
If you want to add some type safety, we'll start defining the module in its own file in a folder called externals.
So we'll write out ./externals/the-package/index.d.ts.
export function foo(): void;
export function bar(x: string): number;
And now add the following to your tsconfig.json's compiler options.
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"*": ["externals/*"]
}
}
}
Now any modules should be looked up in externals first before being looked up in #types & node_modules.
Note: This assumes externals is in the same directory as tsconfig.json. Adjust appropriately.
Once your module is fully written out, you can send a PR for this package to DefinitelyTyped if you'd like to help others out.
Using mgechev's angular2-seed, I'm trying to get to grips with Angular2 and
Typescript for a new project, but have run into this problem.
I want to use Numeral in a component, so I:
Installed Numeral using npm install numeral
Installed the typing for Numeral using typings install dt~numeraljs --global --save
In my component added import { numeral } from '/typings/globals/numeraljs';
Added the line of code: let num:Number = new Number(numeral().unformat(text));
So far, so good. Everything seems to transpile ok. Until I get to the browser, where I get in the console:
Error: XHR error (404 Not Found) loading http://localhost:5555/typings/globals/numeraljs.js(…)
What am I doing wrong here? Have I missed a step out to tell Typescript where the actual code is?
Typically what you want to do is, if the package is not a native Typescript module:
import * as numeral from 'numeral';
The typings folder is just for telling Typescript what the type definitions are, so it will use it for code highlighting and linting. The actual module you want to import sits in the node_modules folder and can be imported with its name.
If it's still complaining about not finding the numeral module you could add
/// <reference path="typings/globals/numeraljs/numeraljs.d.ts"/>
or wherever the Typescript definition file is stored.
you need also to add a reference link to actual numeraljs.js file. in your index.html page
say that you have index.html page as your main page, add the numeraljs.js to head
<head>
<script src="myScriptLib/numeral/numeraljs.js"></script>
</head>
also you can use system.js to load all needed scripts