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
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.
Is there a way to get the ahead of time validation feature of TypeScript to work in a pure JavaScript project? I would install TypeScript but it honestly seems a bit intimidating and useless for my purposes.
You can enable type checking in a Javascript project just by using a tsconfig.json file. No need to actually compile Typescript files.
{
"compilerOptions": {
"outDir": "./built",
"checkJs": true,
"allowJs": true
}
}
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
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.
Context :
Typescript 1.5 beta
Webstorm 10
I'm currently developping two separated projects in TS, one library and one project that will use that library.
When I am coding inside the library project, the written jsdoc is perfectly understood by Webstorm and CTRL+Q displays it correctly.
Then I compile the library (one single big output file), generate the .d.ts file along the way, and try to use it in the other project : no more documentation available when I'm invoking CTRL+Q.
After investigation, I see that the JSDOC is still present in the generated javascript, but it is not in the .d.ts file - so Webstorm consider there is none.
So my question is : how can I specify at .d.ts generation time that I want my jsdoc to be included in it ? Just spent several hours on the net running in circles...
--edit : my tsconfig file --
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": false,
"removeComments": false,
"declaration":true,
"noLib": false,
"out": "./dist/myLib.es5.js",
"sourceMap": true
}
}
== EDIT FINAL ==
Ok, the documentation finally appeared in the .d.ts ...
A compiler bug, or maybe a chair-keyboard one ...
So it obviously should works when "removeComments" is set to false !
compile with comments i.e. set removeComments compiler flag to false