Develop Reference

Typescript - migrating JS code with strict flags

I'm starting to migrate a large JS codebase into TS.
As recommended in the Migrating from JavaScript document, I started by setting the tsconfig.json file to allowJs: true.
The migration procedure is that whenever I add a new file to the codebase, I add it in TS.
Since I want to be as strict as possible for these new TS files, I've added the different strictness options in the tsconfig.json file such as "noImplicitAny": true, "noImplicitThis": true.
Thing is, once I do so I get a ton of errors for all of my non-migrated JS files that, of course, lack typings for different arguments and therefore have an implicit any type.
What is the suggested workflow in this condition?
As described above, I want to:
Be as strict as possible for the new TS files I create.
Run TS standard checks on my JS files, e.g. unreached code or unused variables.
Not having the same TS strictness on my JS files as it will simply mean I need to migrate all of my code to TS straightaway, which is not really feasible.
Is it somehow possible with different tsconfig.json files for JS and TS files?
What is the best practice here?
Edit:
As Matt mentioned in the comment below, I was indeed using the checkJs: true flag which is what caused the compiling errors in the JS files.
I understood that even without porting your JS files to TS, you receive "out-of-the-box" type checking even when you use .js files, but that isn't happening for me.
Without the checkJs flag, I receive Unreachable code detected and 'x' is declared but is never used warnings, but that seems to be it.
For some reason, I was sure that it will also catch stuff like the following:
let num = 12;
num = "aa";
But it doesn't depict any warnings (and the intellisense doesn't "know" that num is of type number).
When reading the Migrating from JavaScript article again (the "Early Benefits" section), I can see that it indeed states that all I get is a very limited typing check support.
So last thing before I close this question - is this somehow configurable or that's it?

You will indeed have to use two tsconfig.json files, one with "noImplicitAny": true (and any similar options) but not "checkJs": true and the other with "checkJs": true but not "noImplicitAny": true. It should be straightforward to get your build system to run tsc once on each tsconfig.json file and show all the errors. You'll probably want to set "noEmit": true in one of the two files. (If you need help with this, let me know.)
If you are using Visual Studio Code as your IDE, then based on my brief tests, there doesn't seem to be a way to get Visual Studio Code's TypeScript language service (used for error reporting as you edit) to apply different tsconfig.json files to your TypeScript and JavaScript source files (unless you can separate the files into two folders with dependencies going in only one direction, which doesn't appear to be your scenario). So you'll have to pick one of the two configurations as your main configuration and refer to the build output for the errors detected only by the other configuration. (I can't speak for other IDEs.)

How to generate a index.d.ts file from a Javascript file

I am starting to learn Typescript and so far so good when types are available to me to download. However, I have a javascript file that doesn't have its matching typescript and I would like to create my own one but I don't know how to do it or where to start.
The JS in question comes from https://docs.pci-proxy.com/inline-payment-frames.html and it is available at this url: https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-inline-1.0.0.js
Could someone help me to create a basic TypeScript file that allows me to at least call the this.initTokenize function? The rest of tunctions are pretty similar so I should be able to mimic same logic by myself and learn from the example.
Thanks!

How to generate a index.d.ts file from a Javascript file
Compile the JavaScript using TypeScript with options declaration: true, allowJs: true. You will get a new .js and .d.ts file 🌹
Alternatively use the JavaScript as is with just allowJs: true in your project.

Visual Studio 2017, JavaScript intellisense inconsistencies

TL;DR: How do you include a tsconfig.json file in Visual Studio 2017 and still have JavaScript intellisense work like it does by default, giving code hints both for your own code and 3rd-party libraries? Is it borked, or do I just need a better understanding of how it works?
Much like jQuery, I would like ubiquitous access to my own JavaScript namespaces across JavaScript and html files with intellisense. How does one achieve this?
EDIT 3:
I reported this issue on developercommunity.visualstudio.com. Please consider up-voting the issue to attract more attention from Microsoft.
EDIT 2:
Currently the "solution" is Resharper, which provides what one would expect straight out-of-the-box. But it's not really ideal at a price of $299/yr/user for something Visual Studio markets it provides itself.
EDIT 1:
In the event that my expectations for JavaScript intellisense in Visual Studio is inaccurate, below is a contrived example of how I expect it to function.
Say I create three TypeScript files in my ./Scripts folder, we'll call them A.ts, B.ts, and C.ts. Each will contain its own namespace:
A.ts
namespace A {
export function f1(s: string) {
return s;
}
}
B.ts
namespace B {
export function f1(n: number) {
return n;
}
}
C.ts
namespace C {
export function f1(b: boolean) {
return b;
}
}
At this point in time one may expect to be able to start seeing intellisense for their newly created namespaces, and indeed, within A.ts, B.ts, and C.ts you begin to see intellisense for those namespaces. Cool.
Unfortunately this doesn't carry over to other places, like /Home/Index.cshtml. Index.cshtml knows nothing about the A, B, or C namespaces. Additionally, .js files know nothing about these namespaces, hence the need for their respective TypeScript Declaration (.d.ts) files.
So we'll go ahead and add our tsconfig.json file to the root of our project and configure it like we do above. If we perform an edit on one of our .ts files and save it, this triggers the compilation of our corresponding .d.ts files into our ./Scripts/out folder. Do we now get intellisense in Index.cshtml and .js files? ...No.
Now you might be thinking these files need to be included in the project in order for Visual Studio to pick them up for intellisense (they're excluded on creation). So you include them in the project. Intellisense? No. jQuery intellisense? No. Perhaps they need to be in the same directory as the file you want to use them in? .....Kind of? I've ran into intellisense being inconsistent like this on a number of occassions:
Somehow we're getting intellisense for our 'A' namespace within our C3.js (note: a JavaScript file), but none of the other ones. What?
Perhaps you think you're on the right track and that you've scored a small victory against the intellisense engine. But then you restart your Visual Studio instance and...
Wait....I just had intellisense for the 'A' namespace. What happened!?
I have no idea. But after messing around for a bit I try placing an import statement at the top of the .js file, and all of a sudden intellisense starts kicking in for the imported files/modules. Huzzah!
And even in Index.cshtml I begin receiving intellisense for our imported namespaces.
The moment I close the .js file with the import statements, though, all of a sudden I lose the intellisense for them in Index.cshtml. Wait...what?? And unlike in JavaScript files, I'm unable to write an import statement to receive intellisense for them:
Or at least... not with my own namespaces:
It's this inconsistent back-and-forth that confuses the heck out of me as to how exactly Visual Studio's JavaScript intellisense actually works. I still don't know if it's just broken or if I need a better understanding of it.
ORIGINAL POST
System
Windows 10VS2017 15.0.0+26228.10New JavaScript language service is enabled
I've been fighting to get Visual Studio 2017's JavaScript intellisense to work for me for a couple of days now to no avail. I don't know if something's genuinely wonky with the IDE or if I just don't understand it properly.
My understanding of how VS2017's JS intellisense works is now by typescript definition files, or .d.ts files. Ultimately I would like to get intellisense to help us out with our own TypeScript/JavaScript but right now I'd settle for just having it work consistently within a fresh project.
If I create a new ASP.NET MVC 4.5.2 project, out-of-the-box JS intellisense seems to work fine, and by that I mean I can type a dollar sign ($) either in a .js file or between <script> tags and I properly receive intellisense for jQuery. Awesome. Now, with the ultimate goal in mind of creating TypeScript files (.ts) and having the TypeScript compiler generate our .d.ts files automagically so that we can get rich intellisense for our own code, I wish to introduce a tsconfig.json file to the root of the project in order to configure that.
After creating the tsconfig.json file JS intellisense ceases to function. I type a dollar sign ($) into either a .js file or between <script> tags and I get zero intellisense for jQuery. This was a frustrating experience for a while but then I read this little note found on the linked page above:
NOTE: This feature is disabled by default if using a tsconfig.json
configuration file, but may be set to enabled as outlined further
below).
"This feature" is in reference to "By default, the Salsa language service will try to detect which JavaScript libraries are in use...in order to provide richer IntelliSense." Ok, so the Salsa language service will not autodetect libraries in use and provide intellisense for them when a tsconfig.json file is present, unless you specifically configure it to do so as "outlined below." At least, that's how I understand it.
If we scroll down the page a little bit and come to the tsconfig file settings we come across a setting for enableAutoDiscovery which "enables the automatic detection and download of definition files as outlined above." It's not super explicit as to what "as outlined above" is in reference to, but I can only assume it's in reference to the previous note indicative of re-enabling Salsa's auto-detection feature to provide rich intellisense. So I include that option in my tsconfig.json file and...no benefit; still no JS intellisense.
As it turns out, typingOptions.enableAutoDiscovery has been renamed to typeAcquisition.enable. Grrrrr. Alright, so we make that change in our tsconfig.json aaaaaaand... still no JS intellisense.
At this point I am able to write my own .d.ts files and Visual Studio's intellisense will pick it up alright (most of the time...), but I still have no intellisense for 3rd-party libraries like jQuery, which is no good.
So far I've landed on the following tsconfig.json file:
{
"compilerOptions": {
"noEmitOnError": true,
"noImplicitAny": false,
"removeComments": false,
"target": "es5",
"declaration": true,
"declarationDir": "./Scripts/out"
},
"compileOnSave": true,
"typeAcquisition": {
"enable": true,
"include": ["jquery"]
},
"include": [
"./Scripts/app/**/*"
],
"exclude": [
"./Scripts/vendors/**/*",
"./Scripts/out/**/*"
]
}
With the TypeScript virtual project in view I can see that my project's .ts files are included as well as jQuery in my %LOCALAPPDATA%\Microsoft\TypeScript\node_modules#types directory.
I was hopeful that with all this in place I would have both intellisense for my own project's .ts files and 3rd-party libraries (at least those specifically included; jQuery only at this point). Alas...no. Still no jQuery intellisense.
Incidentally, if I write an import line for jQuery, all of a sudden I get jQuery intellisense
...interesting. And maybe that makes perfect sense; I haven't messed a whole lot with module imports and how Visual Studio's intellisense handles those, but what I really want is to have intellisense application-wide for both our code and 3rd-party libraries.

JS files are for javascript and are not transpiled using the typescript compiler.
If you are using typescript then keep all your typescript in ts files.
Also, you shouldn't put typescript inside your cshtml files because typescript is not javascript. You need to use the typescript compiler to transpile your typescript into javascript which you can then use that javascript inside your HTML pages.
I think what you are trying to do is not a way typically how people use typescript. Usually you write all your typescript in TS files and then as a build process you transpile all your typescript into javascript. There are many strategies on how to do this. You can bundle all your javascript into one file or break them up into modules. There is a lot of options on how you want your final javascript output to look.
Your CSHTML views would reference your compiled javascript and not your typescript. The browser doesn't know what to do w/ typescript.

It looks like the latest update March 14, 2017 (build 26228.09) caused this issue, you can go to Control Panel—Programs and Features-View Installed updates and remove this update, then reopen VS to check the intellisense. If it works, which means this update lead to this issue, you can temporarily not install this updat
I've noticed the Microsoft Report Projects for Visual Studio Extension can cause problems such as this when being used in a project, A couple of mine have broken right after I add my SQL Server Report project to the solution and restarted visual studio.. So for now I remove my Report project from the solution but I hope Microsoft fixes this issue

Do I have to save react component files with a jsx extension

I've been writing react for a few months now and I just realized that some of my files have a .js extension while others have .jsx extension. When I write jsx in the .js files, everything still works. Does it matter what the extension is?
by the way (for context), I'm using webpack to generate a bundle.js file. Does that affect anything?

No using .js or .jsx doesn't matter since you have webpack/babel to transpile everything. Really the main difference is when you import files in, you have to include .jsx extension for jsx files where if it is just a js file, you can just put the file name. Ex : import File from './file.jsx' vs import File from './file'

No, it doesn't matter what the extension is.
The JSX transpiler bundled with Babel (which I presume you're using with Webpack) goes through every file in a watched directory, and simply converts only those segments which match JSX syntax.
All of your files will be reproduced in a corresponding build directory or - in this case - to your Webpack bundle. The transpiler is capable of differentiating regular Javascript from JSX, and will not make changes to the former.
It is still good practice to use .jsx anyway, so that it's clear to
humans.

As already mentioned, technically it doesn't matter.
But, especially when it comes to collaborative projects, it's may be interesting to check the Airbnb React/JSX Style Guide which is mentioning:
Extensions: Use .jsx extension for React components.
Source: https://github.com/airbnb/javascript/tree/master/react

Reference javascript file inside typescript

I would like to use a javascript function inside a typescript file. How can I reference the javascript file containing that function inside typescript file?
I tried
<reference path="../libs/myjsfile.js" />
this brings an error while building like: Cannot resolve referenced file: ../libs/myjsfile.js

While the two answers above will work for a small or single variable API, the correct answer is to write a type declaration file for your JavaScript file.
The type declaration file for your example would be named myjsfile.d.ts, where the .d.ts suffix is what tells the TypeScript compiler that it's parsing a declaration file. If you use Visual Studio, your declaration file will be recognized by the TypeScript compiler as long as it is somewhere (anywhere) in the project you are working on.
Declaration files store metadata about JavaScript variables, functions and objects so the TypeScript compiler can do its job. If your JavaScript file happens to be a library or framework in common use, DefinitelyTyped is definitely the place to find the definition file you need.
If your JavaScript is your own work or less well known, you'll have to write your own type declaration file. See the section Writing .d.ts files in The TypeScript Handbook.
If the name declaration file sounds intimidating, don't worry - they are far easier to write than programs. Also, remember that you don't need to specify all metadata for your JavaScript file, just the functionality you need.
Let me know if you need any help!

You just have to tell the compiler that the method exists outside typescript:
declare function myJavaScriptFunction(param1: number, param2: JQuery): void;
Be sure that the website loads all files needed, the normal js files and the js files that the typescript compiler generated

You can see the latest version of the TypeScript documenttion in TypeScript
Handbook on GitHub:
Working with Other JavaScript Libraries
Writing Definition Files
Also I am recomending you the tsd utility to search and install TypeScript definition files directly from the community driven DefinitelyTyped repository. This repository contains definition files *.d.ts for the most popular javascript libraries.

this brings an error while building like: Cannot resolve referenced file: ../libs/myjsfile.js
Reference file tags are for TypeScript not JavaScript. You would load JavaScript using a script tag in your page (or something like requirejs).
To use the JavaScript from TypeScript you would declare the API of the javascript you want to use for TypeScript consumption (as AKR pointed out).