What is this JavaScript reference syntax used in Visual Studio? - javascript

In Visual Studio 2012, I created a web application then found the following line in the default _references.js script that came with the project:
/// <reference path="jquery-1.8.2.js" />
What is this reference notation doing? This is confusing - isn't this just a comment, which shouldn't do anything? As I understand, a double slash (//) comments out a line in JavaScript. Is there anything special about triple-slash comments?

see this article
http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx
and find Reference Directives
A reference directive enables Visual Studio to establish a relationship between the script you are currently editing and other scripts. The reference directive lets you include a script file in the scripting context of the current script file. This enables IntelliSense to reference externally defined functions, types, and fields as you code.

It's a Triple Slash Directive and has many uses.
See this article
https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
... Triple-slash references instruct the compiler to include additional files in the compilation process....
Very useful in linking typings definitions... for example, the mysql.d.ts typings has the following reference to the node.js typings...
///<reference path='../node/node.d.ts' />

Related

What does /// <reference path="jquery-1.8.3.js" /> actually do?

I see this line of code in some of the JavaScript Files I work with, at the very top of the file ( first line ), but its not clear to me exactly what this does.
Google wasn't much help on this.
/// <reference path="jquery-1.8.3.js" />
What is the purpose of it?
To add more details, I am using Visual Studio 2015.
This is most likely for Visual Studio's JavaScript intellisense. Mads Kristensen has a nice article you can read to learn more about the history of this and how to use it correctly.
That is a triple-slash directive for the Typescript compiler. Since tsc will happily compile JS as well, this should work in either language and will reference a dependency.
The /// <reference .../> directive shows a dependency (for compiler symbols) without necessarily importing and actually loading the file. That is useful when you have a large library (like React) that exports a lot of interfaces or type symbols, but you don't want to actually include (since they might be vendored at runtime). From the docs:
The /// directive is the most common of this group. It serves as a declaration of dependency between files.
Triple-slash references instruct the compiler to include additional files in the compilation process.

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).

Webstorm Typescript support - Could not find symbol?

I have code like this in my .ts file
test.control('test-change', TestChange);
My test module is initialized in lib/test.ts, and it is properly transpiling to test.js.
However, when I write the above code, webstorm throws this error on that line of code:
error TS2095: Could not find symbol 'test'.
Is there any solution within Webstorm to avoid this error? The code seems perfectly fine, and it even worked previously. I am also using code that has worked within Visual Studio, so it seems like the code is not the issue here.
Visual studio implicitly includes all TypeScript files in your project into the global namespace. For compiling with tsc manually or using Webstorm / whatever else you need to have explicit references.
/// <reference path="../path/to/lib/test.ts"/>
You can potentially just use a reference.ts https://github.com/grunt-ts/grunt-ts#reference-file-generation although I no longer recommend that
Grunt-ts can take ///ts:ref=test and generate a reference tag for you.

Typescript definition breeze.d.ts - declare modifier not allowed for code already in an ambient context

Suddenly VS2012 stopped building javascript files from my typescript files. Options look ok. Also tried do uninstall web essentials without success.
Only when I completely restart VS the JS files are generated.
Edit1: seems that breeze.d.ts makes the problems. I am getting the error as soon as i reference it:
/typings/breeze/breeze.d.ts(213,5): error TS1038: 'declare' modifier not allowed for code already in an ambient context.
Edit2: also seems that typescript has still (v0.9) many bugs concerning references and paths.
For example you can't use spaces as you want
right:
/// <reference path="typings/jquery/jquery.d.ts" />
wrong:
/// <reference path= "typings/jquery/jquery.d.ts" />
The error you're receiving is caused by the fact the declare statement is used in the Breeze definition file, which isn't allowed. Definition files do not require the use of the declarestatement to declare variables, modules or interfaces.
I've encountered similar behaviour where an error in one of my referred definition files caused Visual Studio to stop compiling TypeScript without throwing an error. I'm not sure if this is an error on the part of Web Essentials or the TypeScript compiler.
I was able to get over this error by deleting a semicolon:
declare module 'asdf' {
};
^ deleted the above semicolon

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

Categories

Resources