Develop Reference

How to automatically add `.js` to module address auto fixing?

In VSCode is function "Show Fixes" with Import 'someting' from module "addres".
It adds the import automatically.
Unfortunately, it does not add the ".js" ending to the address.
What to do in VSCode configs, to automatically add .js to the module address?

Check if VSCode 1.44 (MArch 2020) can help with:
Finer grained control over auto import style in JavaScript
The new javascript.preferences.importModuleSpecifierEnding setting lets you control the style of imports that VS Code's auto imports use.
This can be useful if you are writing code for platforms such as browsers that support native ES6 modules.
Possible values are:
auto — The default. Uses the project's jsconfig to determine the import style to use
minimal — Use's node.js style imports. This shortens imports for src/component/index.js to src/component.
index — Include the index part of the path as well. This shortens src/component/index.js to src/component/index.
js — Use the full path, including the file extension (.js).

How to configure TypeScript to throw an error/warning for incorrect import statement?

I am working on converting a large application from JavaScript (Backbone and Angular 1) to TypeScript. When we convert a file that is used by other files we understand that we have to update the import statements in those other JavaScript files so that it imports the new TypeScript file correctly. Our syntax update in fake-file.js is as follows.
Before:
import OurService from 'our.service';
After:
import { OurService } from 'our.service';
I understand that this is an easy change but TypeScript is new to many developers and there have been problems with people missing some of these import statements or forgetting to change them all together resulting in some issues during runtime. I have looked into compiler options but I do not see any that would fix this issue but I could be misinterpreting them.
Question: Is there a way to configure the compiler (or a Visual Studio Code plugin) to throw a warning or an error to prevent this from happening?

I assume that I understood your requirement and possibly you need to adapt a linting process and consequently I would suggest the following tools (which I also use in my project):
Airbnb Javascript style guide (your import statement concern-https://github.com/airbnb/javascript#modules). These are a well-defined set of standards defined for any JS application (including ES).
ESLint. You can run ESLint from the terminal and configure it for your project that highlights warning/errors in your code. If this looks complicated, you can generate the tslint document for your entire project in the website itself. Click on rules configuration and configure the ES rules for your project. There are some import related rules too.
PS: Feel free to add your comments.

A very simple query - Loading plain old javascript file with webpack

Should be quite a common question for a webpack newbie but unfortunately couldn't find a solution -
My project uses webpack. I need to use a library but it needs to be used as the old way of adding script tag like
<script src="//messaging-public.realtime.co/js/2.1.0/ortc.js"></script>
However I am looking for some way through webpack (a loader or in some other way) such that I can use it like
import ortc from "realtime-framework"
or
import * as ortc from "realtime-framework"

You will need to either:
Install it from a package manager like npm;
Download the file locally and import it;
Or include it the normal way with a script tag, making sure it is included before your script.

Angular2 - require module on client side

In the context of a Node.js / Express / Angular2 / typescript (IDE=Visual Studio) app, I am trying to load a third party .js utility (packery) onto the client side (for use in a directive). Someone made typescript definitions for it. The d.ts file looks like:
declare module "packery" {
interface PackeryOptions { stuff... }
class Packery { stuff .... }
export = Packery;
}
I refer to this d.ts file, tell the browser where the .js packery script lives, and then import the module as such:
import Packery = require('packery');
This compiles without complaint. However, upon running, the browser attempts (and fails) to find "packery" at http://localhost/packery as opposed to knowing packery is an imported library. This is in contrast to the other import statements I have made on the client such as:
import {Http, HTTP_PROVIDERS} from 'angular2/http';
which work - as far as I can tell the only two pieces of information I gave it for those were also a d.ts file and the location of the .js file, just like packery. But, I must be missing something. Have tried many combinations of file locations and linking and can't get it to work. How can I get the proper linking to "packery"?
Thanks!

I found a workaround for this and thought I'd post in case it helps anyone, although I am still having difficulty with the setup posed in the original question, that is, getting statements of the type:
import foo = require('foo')
to run on the CLIENT side. These work for me in node.js on the server, but on the client, for third party libraries that have been loaded via a script tag, I cannot get it to work, even if I add mapping entries to the system.js config file, irrespective of if I point to a .js file or a d.ts file.
Anyway, what does work is if you load the library using the script tag, then in your IDE put a reference path as such at the top of the CLIENT side code
/// <reference path="foo.d.ts" />
and ensure that your d.ts file does not declare a module/namespace but rather exports methods etc. directly. This lets the IDE compile without complaint, and the client side code is able to access the third party library.
However, I'm not sure if it is preferable / best practices to do what I did or if one should be configuring System.js somehow.

Typings are empty definitions of js libraries that aren't written in a typed language. They are only useful in development for IDEs hints and stuff, in your app, you'll still use the library as you normally would, adding the js file in your index.html or w/e you load your js files from.

JavaScript Intellisense in TypeScript File

Is it only possible to get intellisense in TypeScript files by referencing .ts files with own coded interfaces?
Is there a solution for existing JavaScript libraries?

You are able to get IntelliSense for other TypeScript files by using an external script reference directive at the top of your script:
///<reference path="someOtherScript.ts" />
As a side note, the TypeScript IntelliSense reference directive doesn't support the tilde operator like the JavaScript reference directive does. For example, if your script is located in "~/Scripts/foo/", in JavaScript you can reference:
///<reference path="~/Scripts/otherScriptFile.js" />
whereas in TypeScript you have to reference relative to the current file:
///<reference path="../otherScriptFile.ts" />
More info about this can be found in section 11.1.1 Source Files Dependencies of the TypeScript Spec.
With regard to JavaScript IntelliSense in a TypeScript file, it currently appears to be not possible to get JavaScript reference IntelliSense.

As others before me have pointed out, you need the definition files.
The DefinitelyTyped GitHub repository provides an excellent (and growing) list of definition files for a lot of popular libraries.

You'll get intellisense support for every JS code (quality may vary), however the typescript specific stuff is only available when using apropriate definition files (*.d.ts).
You can find additional definition files in the source repository (> typings, currently only jQuery and WinJS/RT) http://typescript.codeplex.com/SourceControl/BrowseLatest