I want to enable the noImplicitAny flag in my compiler.
My problem is that I use lodash/fp and there is no typings so far.
So the compiler complains about the lack of definition file for lodash/fp.
Is there a way to allow implicit any only for external js files ? Or to whitelist a subdirectory like node_modules ?
The way I get around this is by creating a file where I declare the modules I want to use that have no typings. For example I would create a file called modules.ts, and there simple decalre the module I want to use like so: declare module 'name-of-module'. Now on any file I want to use my non typed module I can simply import my modules.ts and then the module I want to use using the import * as syntax. What this does is change it from implicit any to explicit any, but this of course will not give you typings for these modules, it simply allows to you to use them.
In your tsconfig.json you should have the following:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noResolve": true,
"sourceMap": true,
"noImplicitAny": true,
"removeComments": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
This should prevent the node_modules folder from being compiled to JavaScript as they're most likely already JavaScript.
If the "files" and "include" are both left unspecified, the compiler defaults to including all TypeScript (.ts, .d.ts and .tsx) files in the containing directory and subdirectories except those excluded using the "exclude" property.
See the main TypeScript site here
You can create a declaration file with ".d.ts" extension like ambient-modules.d.ts
Add the following line in this file
declare module '*';
And you're done!
Now, you still get the benefits of noImplicitAny flag without worrying about the other js files which don't have any types available.
For more info, you can refer here
Related
My structure is:
/Home
/home.js
/Home.jsx
In .jsx I'm trying to use go to defenition feature on path with webpack alias. To resolve webpack aliases I have jsconfig.json with this params:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"#/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
And only in this type of situation
when .jsx and .js files of same name in same folder
I can't use the feature.
If I rename file it starting to work. Also it works in WebStorm without any changes.
Please, tell me what's wrong...
I fixed it!
The problem has disappeared when I deactivated this extenssion: JavaScript and TypeScript Nightly
VSCode uses TS engine under the hood to analyze JS. And the convention in TS is to omit file extension. So from TS engine’s POV, these two files of same name but diff extension are confusing.
I guess it’s just a limitation (or a bug? I’m not sure) of the TS language engine, not necessary anything you did wrong. WebStorm obviously uses other implementation to analyze/resolve package reference. Thus you don’t encounter problem there.
I don’t really know solution to your problem, can only provide above explanation. If I were you I’d just rename my file, not gonna spend time fighting tools.
I have a bunch of JS file that I would like to convert to TS files without having to add any typing or introducing a lot of changes.
I know I can use // #ts-ignore on the lines that I want the compiler to ignore, but is there a way to ignore the entire file?
I still would like to output a JS file, but as is, with all the errors ignores.
It's easy. Don't rename the file to .ts (until you want to deal with the errors), and use the following configuration
{
"compilerOptions": {
"allowJs": true,
"checkJs": false,
"rootDir": "src",
"outDir": "dist"
}
}
TypeScript will transpile your JavaScript files along with your TypeScript files and provide as much intellisense as possible.
I've answered a similar question in greater detail here: https://stackoverflow.com/a/49640454/1915893
VS Code Intellisense is indeed very helpful for working with internal project files, offering us autocompletion and even exploiting the written JSDoc.
However, I am working on different JS projects that depend on custom-made JS libraries (ES6 modules with Bitbucket Cloud repositories, retrieved via NPM or Yarn).
Naturally, I would like to benefit from Intellisense for those libraries as well, as I know that JSDoc is available. But sadly, I can't seem to find a way.
I tried to explicitly include files from my library in jsconfig.json, to no avail :
{
"compilerOptions": {
"target": "es2017",
"moduleResolution": "node",
"checkJs": true,
"allowSyntheticDefaultImports": true,
"noEmit": true,
"noImplicitAny": false,
"strictNullChecks": false,
"alwaysStrict": true,
"sourceMap": false
},
"include": ["src/**/*", "node_modules/my-lib/**/*"]
}
Is there a simple way to tell VS Code to take into account my library files ?
As I understand, one way to achieve this would be to write and publish typescript definition files for each library. However, I feel like I'm missing something, and that surely VS Code must be able to handle my library JS file, just like it handles internal project files.
This question is quite old now, but I recently had the same issue. Here is what I came up with.
As you mentioned, one way is to create a types declaration file. Fortunately you can do this from your jsdoc comments with the tsd-jsdoc package.
I added the following script to package.json to build the types file ...
jsdoc -r src -t node_modules/tsd-jsdoc/dist -d lib
This will create a lib/types.d.ts file.
Add a types entry to your package.json pointing to this file.
Make sure this is run as part of your prepublishOnly script so that the file is up-to-date when you run npm publish.
Generally, my src/index.js file just consists of several export { default as thing } from './thing'; lines. In order to get a proper declaration file that vscode could read, I had to format the file like so ...
/** #module my-module */
export { default as thing1 } from './thing1';
export { default as thing2 } from './thing2';
And then in the thing1 and thing2 jsdoc comments for the export add #memberof module:my-module, for example ...
/**
* Thing 1
* #param {string} thing
* #memberof module:my-module
*/
function thing1(thing) {
}
export default thing1;
I have installed 'interact.js' with jspm (and npm for typescript to be happy). The app runs fine but my code shows errors:
import { interact } from 'interact.js/interact'
// ==> typescript error: TS2307: Cannot find module 'interact.js/interact'
I suppose the problem has something to do with the npm module containing '.js' but I am not sure. Anyway, is there a way to fix this either by
A. Help Typescript find the module
B. Disable this specific error (since it works fine)
PS: here is my tsconfig.json file:
{ "exclude":
[ "node_modules"
, "jspm_packages"
, ".git"
, "typings/browser"
, "typings/browser.d.ts"
]
, "compilerOptions":
{ "outDir": "dist"
, "target": "es5"
, "sourceMap": true
, "experimentalDecorators": true
}
, "compileOnSave": false
}
The TypeScript compiler/language service doesn't actually resolve module names through the filesystem or your package.json like you might expect - it instead uses the definition (.d.ts) files that define the type information.
While it's not the most intuitive thing in the world, their reasoning for it wasn't entirely unreasonable - without a definition file, it's impossible to know what type the thing being imported is, and they were somewhat cagey about making the compiler default to just setting imports to the any type.
So in short, the solution to this problem is simply to install the definition files if available, or write/stub out your own if not. They'll be making this easier in TypeScript 2.0 by the sounds of it, but even as it stands, it takes very code to create a dummy definition:
declare module "interact.js/interact" {
export var interact: any;
}
It is my initial experience with TypeScript. I took a simple JavaScript app consisting of two files and converted them to TypeScript.
One file accounts.ts contains the main code, the other one fiat.ts is a support file which exports a module Fiat with some exported members. After some editing I got no more error messages from the TypeScript compiler.
I use a tsconfig.json file to control the compilation:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "main.js",
"target": "ES5",
"sourceMap": true
},
"files": [
"accounts.ts",
"fiat.ts"
]
}
It should create a main.js file containing the code. But this contains after a successful compilation only one line:
//# sourceMappingURL=main.js.map
No other code gets included. I found by accident that if I remove the line
import {Fiat} from './fiat';
in the accounts.ts file then the compiler includes the code of accounts.ts into main.js but not the code of fiat.ts and additionally the TypeScript compiler shows error messages for each reference to Fiat in accounts.ts.
I cannot figure out how to create a JavaScript file from just two TypeScript files. Any help would be appreciated!
What I found after some research: The Typescript module concept can be handeled in two different ways: internal and external modules. My difficulties came from not really understanding this. External modules work with a dynamic module loader. You import them. Only internal modules can be lumped together into one (or multiple) Javascript file(s) that get loaded with the HTML via the script tag. To work with internal modules you need /// <reference path="./name.ts" /> lines in the files that reference them. Other syntax differences between internal and external modules are minor as far as I know.
If you want to use modules (external modules) and compile them in single file you should set module to target amd or system (assuming you have 1.8 typescript) in your tsconfig.json.
By removing import/export you do not use modules and thus outFile works.