Is it possible to get Intellisense working in Visual Code when using AMD modules?
I have my jsconfig.json file set to:
{
"compilerOptions": {
"target": "es5",
"module": "amd"
},
"exclude": [
"node_modules"
]
}
This isn't working. I've searched everywhere but can't find how to do it.
If anyone else comes across this problem, I resolved it by changing the way I defined the modules.
From this:
define(['jquery'],
function ($) {
to this
define(function (require, exports, module) {
var $ = require('jquery');
Visual Code seems to be able to bring the Intellisense in when using the require method rather than passing an array of dependencies.
I attempted to fix this by adding comment references for the required modules.
/// <reference path="some-module.js" />
some-module.js:
var module = {
member : {}
};
define([], function(){return module;});
This allows the intellisense to function because of the missing parameter, but certainly won't run:
/// <reference path="some-module.js" />
require(['some-module'], function(){//<--no parameter "module"
module.member;//intellisense works
});
This breaks the intellisense due to hiding, but will actually execute:
/// <reference path="some-module.js" />
require(['some-module'], function(module){//<--parameter "module"
module.member;//no intellisense
});
I suppose for now I can delete the parameter while I work on the file and then restore it when I'm done. It feels like a terrible solution. If there was away to turn off the default hiding behavior or to specify that the parameter was the same as the referenced type...
Require Module Support provides good Intellisense for AMD / Requirejs if configured correctly.
Related
I've a small piece of JavaScript that I open on Visual Studio Code, I then enable #ts-check to get type hinting from TypeScript definition files.
When I refer to a type that comes from a different import VSCode will give the hint and add the following code to the beginning of the file:
import { SomeType } from 'some-module';
This is correct if I'm working on ES6 but currently I'm targetting to older runtimes and would prefer to get the generated code be written using the commonjs syntax:
var SomeType = require('some-module').SomeType;
Is there any configuration I can change to achieve this behavior?
I'm in a similar situation. I've been able to get rid of type errors but I can't seem to figure out how to get code completion to list 'require' or 'module.exports' in its options.
To get ride of type error messages.
{
"compilerOptions": {
"module": "commonjs",
"target": "es2015"
},
"exclude": ["node_modules"]
}
I have existing project in nodejs + express in javascript. Currently everything is working on es5.
Now i added typescript in same project and i want to do all the new development in typescript. But i am facing a issue in accessing existing javascript files.
I found that i can create definition file xx.d.ts (not sure if it is correct approach) of each existing javascript file and then use it in typescript files.
For example i have javscript file
myFile.js
function myClass(){
//some functions here associated with this variable
}
exports.myData = new myClass();
now i want to use it in my new ts file
So what i did in ts file to access is
declare function require(path: string): any;
var auth = require('./myFile').myData;
I am not sure if this is the right approach. Secondly i tried with myFile.d.ts file as well.
I defined this file in following way
declare module './myFile' {
export var myData: any
}
But this gives error of relative path -
TS2436 ambient module declaration cannot specify relative module path
Please let me know if anybody has any idea to resolve this problem or suggest if it is okay to go with first approach.
I found the solution long back but didnt posted here. Let me add the answer here so that it can help everyone
Make changes in tsconfig.json. Most important part here is types and typeRoots properties
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"declaration": true,
"moduleResolution": "node",
"types": ["node"],
"typeRoots": ["node_modules/#types"],
"lib": [ "es2015","dom" ]
}
}
Now go to you package.json and add some type definition packages on the basis of need
"#types/node": "~8.0.54",
After this configuration, nobody will get error and we dont need to separately specify declaration in each file
I am writing a NodeJS application and am having some problems with my editor.
Is there a reason the following works in WebStorm but not VSCode?
Edit: I didn't realize this first as I was quickly testing it, WebStorm's intellisense finds the class, but then the compiler fails and says it can't find it.
// one.ts
module Core.Routes {
export class BaseRoute {}
}
// another-one.ts
module Core.Routes {
class User extends BaseRoute {}
}
I am trying to organize my code so that I can store routes in different files,
but still inherit features from the base route.
In WebStorm this works fine, however in VSCode it is unable to find the module.
Is there something I have to do differently for VSCode?
I am basing it on the example in the video here.
In the video Visual Studio is being used, but I am on Linux and I really want to give VSCode a shot.
I have the following as my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"target": "ES5",
"sourceMap": true
}
}
I'm not sure what you're trying to do. In Node every file is a module. So you can't really specify the same module across files like that. Even if Webstorm intellisense can find the class name, the actual code wouldn't work. It's different from front-end Typescript
This would be a working solution:
//baseRoute.ts
export class BaseRoute {}
And then
//user.ts
import {BaseRoute} from "./baseRoute"
class User extends BaseRoute{}
I have the following code in Visual Studio, in an MVC application;
/scripts/bin/models/ViewModel.ts
export class ViewModel {
// view model code
}
Now, I have downloaded requirejs, and set the build mode for typescript to AMD type, so that its output looks such as....
define(["require", "exports"], function(require, exports) {
And so on ...
So then I declare my app/config.js file like so;
require.config({
baseUrl: '/scripts/bin'
});
And I try to load this up, I have requirejs loaded into the scripts, and attempt to call it...
require(['models/ViewModel'], function (viewModel) {
console.log("test");
});
And I am simply told that it is an invalid call. No other details. The path that it shows is completely correct, too. Is there some kind of additional configuration required? The requirejs documentation is extremely vague about this.
SOLUTION
This turned out to have nothing to do with requirejs, but instead had to do with IIS.
By default, IIS has a rule known as hiddenSegments. It does not allow you to bring in any code from a folder with bin in the path. I simply renamed the folder from bin to something else, and it worked fine.
Using require.js with TypeScript is a combination of your .html, require.config, module exports and imports.
For a step-by-step guide on moving from CommonJs TypeScript to AMD and require.js, have a look here.
Have fun.
The TypeScript compiler doesn't have any knowledge of your require.config - so when you use paths relative to that baseUrl they look invalid to the compiler.
Until something is done to bridge that slight mismatch (i.e. make the compiler super-clever so it can look for require.config sections and use them to check paths) it is easier not to set a baseUrl and use the full path in your import statements:
import vm = require('./scripts/bin/models/ViewModel');
Are you sure that the require call is done with [] and not just
require('models/ViewModel', function (viewModel) { // this is an error
console.log("test");
});
See : http://requirejs.org/docs/errors.html#requireargs
I'm writing a web app using TypeScript, Backbone, and Mustache. I want to use Requirejs for dependency loading.
I'm also using the Web Essentials visual studio plugin for TypeScript with the AMD compilation option turned on. For those that are not familiar with this, it will wrap your type script file in an AMD module if you import external modules.
For example:
In type script I import the following modules in type definition files.
export import Backbone = module("Backbone");
import mainTemplate = module("MainTemplate");
The output is something like:
define(["require", "exports", "Backbone", "MainTemplate"], function(require, exports, __Backbone__, __mainTemplate__) {
//...code goes here ...
});
For the template, I've declared the following in a type definition file:
declare module "MainTemplate" { }
In order to support requirejs plugins, you need to declare your module as:
declare module "text!MainTemplate.html" { }
I'd like to keep the module name free of plugins and file extensions. This would leave me with some flexibility in the future.
I have the following mapping in require.
require.config({
map: {
"MyModule": {
"MainTemplate": "text!MainTemplate.html"
}
}
}
This successfully invokes the text plugin however, the plugin loads the wrong url. Sifting through the source code for the text plugin, I found that the following code is the culprit.
load: function (name, req, onLoad, config) {
...
url = req.toUrl(nonStripName),
//returns "scripts/**text!**MainTemplate.html**.html**"
...
}
If I name the module, 'MainTemplate.html' it works fine but I'd like to keep the extension out of the module name.
I've modified the text plugin with a simple regex replacement to strip out the plugin reference and the duplicate extension.
Is there a better way to handle this?
Ran into similar issue. Solved finally. See TypeScript: compiling removes unreferenced imports
/// <amd-dependency path="text!templates/application.htm" />
var applicationTemplate = require('text!templates/application.htm');
For Typescript 1.0 this works for me.
First I created a .d.ts file which stores all module declarations for each text template.
//workaround for typescript's lack of support for requirejs text template notation
//remember that a reference to the import variable has to be found in the class, otherwise typescript ignores the import
declare module "text!views/details/details.html" {
var text: string;
export = text;
}
declare module "text!views/layout/layout.html" {
var text: string;
export = text;
}
declare module "text!views/home/home.html" {
var text: string;
export = text;
}
then to refer to the text template I add these lines on top of the class/module.
/// <reference path="../texttemplate.d.ts"/>
import detailsTemplate = require('text!views/details/details.html');
The reference line is not actually needed, since the .d.ts file is picked up globally. But I added it as a reminder of the workaround. It also makes it easy to ctrl+click to go the d.ts. file.
There is a slightly nicer way to do this (I'm using typescript 2.0)
Referenced here: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
This code expects that your requirejs configuration and plugins are set up correctly:
/// <amd-dependency path="text!./about.html" name="template"/>
declare let template: string;
This helped me a lot to migrate lagacy code to typescript.
Since TypeScript 0.9.0 I think you need to do the following:
/// <amd-dependency path="text!templates/application.htm" />
declare var require:(moduleId:string) => any;
var applicationTemplate:string = require("text!templates/application.htm");
Check out more at http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/
We are using Backbone and require.js for our TypeScript applications.
We don't use the
import backbone = module("Backbone")
syntax, but rather use a
/// <reference path="../../modules/Backbone.d.ts" />
reference, and then a BootStrapper.
This way, the 'text!htmlfile.html' syntax works perfectly with require.js.
I've put together a blog on using require.js with TypeScript and AMD:
http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/