using jquery with typescript
I am new to this so bear with me. What i am trying to do is getting jquery to work in a typescript code file.
How should i refer to the .d.ts code?
I have tried the following:
import * as $ from "jquery";
this gives me the error: "'jquery' resolves to non-module entity and cannot be imported with this construct"
then i tried:
import $ = require("jquery");
this gives the following error:
Import assignment cannot be used when targeting EcmaScript 2015 modules
How do I go about this to make jquery functions work in my typescript code? Are there other ways?
I am using typescript 2.5.2, module system ES2015, EcmaScript 6 and @types/jquery.
EDIT
i tried import * as $ from "../wwwroot/lib/jQuery/dist/jquery.min.js";, now it gives me the error "... has been resolved ... but --allowJs is not set",I dont have a tsconfig.json yet, I probably need it for the --allowJs command, is that right?
jquery typescript
asked Sep 17 '17 at 14:01
Stanislaw T
131212
|
show 3 more comments
I am new to this so bear with me. What i am trying to do is getting jquery to work in a typescript code file.
How should i refer to the .d.ts code?
I have tried the following:
import * as $ from "jquery";
this gives me the error: "'jquery' resolves to non-module entity and cannot be imported with this construct"
then i tried:
import $ = require("jquery");
this gives the following error:
Import assignment cannot be used when targeting EcmaScript 2015 modules
How do I go about this to make jquery functions work in my typescript code? Are there other ways?
I am using typescript 2.5.2, module system ES2015, EcmaScript 6 and @types/jquery.
EDIT
i tried import * as $ from "../wwwroot/lib/jQuery/dist/jquery.min.js";, now it gives me the error "... has been resolved ... but --allowJs is not set",I dont have a tsconfig.json yet, I probably need it for the --allowJs command, is that right?
jquery typescript
asked Sep 17 '17 at 14:01
Stanislaw T
131212
Try to use relative path to jquery:import * as $ from "path/to/jquery";
– Commercial Suicide
Sep 17 '17 at 14:07
I am doingimport * as jQuery from 'jquery'. It should work if jQuery is installed through NPM.
– ideaboxer
Sep 17 '17 at 14:07
(at least with TypeScript 2.3.4 it works)
– ideaboxer
Sep 17 '17 at 14:09
i have installed it through npm as well, i am gonna try to be more specific with my path
– Stanislaw T
Sep 17 '17 at 14:09
i triedimport * as $ from "../node_modules/@types/jquery";and import * as $ from"../node_modules/@types/jquery/index.d.ts";and it doesnt work either
– Stanislaw T
Sep 17 '17 at 14:14
|
show 3 more comments
I am new to this so bear with me. What i am trying to do is getting jquery to work in a typescript code file.
How should i refer to the .d.ts code?
I have tried the following:
import * as $ from "jquery";
this gives me the error: "'jquery' resolves to non-module entity and cannot be imported with this construct"
then i tried:
import $ = require("jquery");
this gives the following error:
Import assignment cannot be used when targeting EcmaScript 2015 modules
How do I go about this to make jquery functions work in my typescript code? Are there other ways?
I am using typescript 2.5.2, module system ES2015, EcmaScript 6 and @types/jquery.
EDIT
i tried import * as $ from "../wwwroot/lib/jQuery/dist/jquery.min.js";, now it gives me the error "... has been resolved ... but --allowJs is not set",I dont have a tsconfig.json yet, I probably need it for the --allowJs command, is that right?
jquery typescript
asked Sep 17 '17 at 14:01
Stanislaw T
131212
I am new to this so bear with me. What i am trying to do is getting jquery to work in a typescript code file.
How should i refer to the .d.ts code?
I have tried the following:
import * as $ from "jquery";
this gives me the error: "'jquery' resolves to non-module entity and cannot be imported with this construct"
then i tried:
import $ = require("jquery");
this gives the following error:
Import assignment cannot be used when targeting EcmaScript 2015 modules
How do I go about this to make jquery functions work in my typescript code? Are there other ways?
I am using typescript 2.5.2, module system ES2015, EcmaScript 6 and @types/jquery.
EDIT
i tried import * as $ from "../wwwroot/lib/jQuery/dist/jquery.min.js";, now it gives me the error "... has been resolved ... but --allowJs is not set",I dont have a tsconfig.json yet, I probably need it for the --allowJs command, is that right?
jquery typescript
jquery typescript
asked Sep 17 '17 at 14:01
Stanislaw T
131212
asked Sep 17 '17 at 14:01
Stanislaw T
131212
edited Sep 17 '17 at 14:31
asked Sep 17 '17 at 14:01
Stanislaw T
131212
asked Sep 17 '17 at 14:01
Stanislaw T
131212
asked Sep 17 '17 at 14:01
Stanislaw T
131212
131212
Try to use relative path to jquery:import * as $ from "path/to/jquery";
– Commercial Suicide
Sep 17 '17 at 14:07
I am doingimport * as jQuery from 'jquery'. It should work if jQuery is installed through NPM.
– ideaboxer
Sep 17 '17 at 14:07
(at least with TypeScript 2.3.4 it works)
– ideaboxer
Sep 17 '17 at 14:09
i have installed it through npm as well, i am gonna try to be more specific with my path
– Stanislaw T
Sep 17 '17 at 14:09
i triedimport * as $ from "../node_modules/@types/jquery";and import * as $ from"../node_modules/@types/jquery/index.d.ts";and it doesnt work either
– Stanislaw T
Sep 17 '17 at 14:14
|
show 3 more comments
Try to use relative path to jquery:import * as $ from "path/to/jquery";
– Commercial Suicide
Sep 17 '17 at 14:07
I am doingimport * as jQuery from 'jquery'. It should work if jQuery is installed through NPM.
– ideaboxer
Sep 17 '17 at 14:07
(at least with TypeScript 2.3.4 it works)
– ideaboxer
Sep 17 '17 at 14:09
i have installed it through npm as well, i am gonna try to be more specific with my path
– Stanislaw T
Sep 17 '17 at 14:09
i triedimport * as $ from "../node_modules/@types/jquery";and import * as $ from"../node_modules/@types/jquery/index.d.ts";and it doesnt work either
– Stanislaw T
Sep 17 '17 at 14:14
Try to use relative path to jquery:
import * as $ from "path/to/jquery";– Commercial Suicide
Sep 17 '17 at 14:07
Try to use relative path to jquery:
import * as $ from "path/to/jquery";– Commercial Suicide
Sep 17 '17 at 14:07
I am doing
import * as jQuery from 'jquery'. It should work if jQuery is installed through NPM.– ideaboxer
Sep 17 '17 at 14:07
I am doing
import * as jQuery from 'jquery'. It should work if jQuery is installed through NPM.– ideaboxer
Sep 17 '17 at 14:07
(at least with TypeScript 2.3.4 it works)
– ideaboxer
Sep 17 '17 at 14:09
(at least with TypeScript 2.3.4 it works)
– ideaboxer
Sep 17 '17 at 14:09
i have installed it through npm as well, i am gonna try to be more specific with my path
– Stanislaw T
Sep 17 '17 at 14:09
i have installed it through npm as well, i am gonna try to be more specific with my path
– Stanislaw T
Sep 17 '17 at 14:09
i tried
import * as $ from "../node_modules/@types/jquery"; and import * as $ from "../node_modules/@types/jquery/index.d.ts"; and it doesnt work either– Stanislaw T
Sep 17 '17 at 14:14
i tried
import * as $ from "../node_modules/@types/jquery"; and import * as $ from "../node_modules/@types/jquery/index.d.ts"; and it doesnt work either– Stanislaw T
Sep 17 '17 at 14:14
|
show 3 more comments
3 Answers
3
active
oldest
votes
add a reference to the Typescript definition file the top of the file.
/// <reference path ="jquery.d.ts"/>
instead of
import * as $ from "jquery";
According to the DefinitelyTyped wiki:
A TypeScript declaration file is way of defining the types, functions
and parameters in an external third-party JavaScript library. By using
a declaration file in your TypeScript code will enable Intellisense
and type checking against the external library you are using.
jquery.d.ts is a part of the DefinitelyTyped Library found on GitHub.
and also you can install via npm.
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute
– Stanislaw T
Sep 21 '17 at 19:45
You have to add jquery.js file to page for executing jquery functions.
– Hamed Javaheri
Sep 22 '17 at 6:08
add a comment |
I dont know it this is a "correct way" of doing things, but i use the following line in my typescript project to use jquery.
const jquery = require('jquery');
// and then later in your class
jquery('.someclass').show();
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
it gives me the error "Cannot find name 'require' "
– Stanislaw T
Sep 17 '17 at 14:43
If you want to userequire, you need to declare it:declare function require(moduleName: string): any;
– ideaboxer
Sep 17 '17 at 15:01
add a comment |
Installation 1 Terminal
npm install --save jquery
Installation 1 Terminal
npm install --save-dev @types/jquery
installation 3 Add refenece of jquery file in "scripts" array inside angular-cli.json file.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
Final - Import
import * as $ from 'jquery';
@Component({
...
})
export class YourComponent{
///...usage
$('.classname').show();
}
answered Dec 16 '17 at 2:24
Uche Dim
21036
can i know why i got a down vote?? cos i use this in a project currently
– Uche Dim
Nov 4 '18 at 20:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46264908%2fusing-jquery-with-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
add a reference to the Typescript definition file the top of the file.
/// <reference path ="jquery.d.ts"/>
instead of
import * as $ from "jquery";
According to the DefinitelyTyped wiki:
A TypeScript declaration file is way of defining the types, functions
and parameters in an external third-party JavaScript library. By using
a declaration file in your TypeScript code will enable Intellisense
and type checking against the external library you are using.
jquery.d.ts is a part of the DefinitelyTyped Library found on GitHub.
and also you can install via npm.
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute
– Stanislaw T
Sep 21 '17 at 19:45
You have to add jquery.js file to page for executing jquery functions.
– Hamed Javaheri
Sep 22 '17 at 6:08
add a comment |
add a reference to the Typescript definition file the top of the file.
/// <reference path ="jquery.d.ts"/>
instead of
import * as $ from "jquery";
According to the DefinitelyTyped wiki:
A TypeScript declaration file is way of defining the types, functions
and parameters in an external third-party JavaScript library. By using
a declaration file in your TypeScript code will enable Intellisense
and type checking against the external library you are using.
jquery.d.ts is a part of the DefinitelyTyped Library found on GitHub.
and also you can install via npm.
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute
– Stanislaw T
Sep 21 '17 at 19:45
You have to add jquery.js file to page for executing jquery functions.
– Hamed Javaheri
Sep 22 '17 at 6:08
add a comment |
add a reference to the Typescript definition file the top of the file.
/// <reference path ="jquery.d.ts"/>
instead of
import * as $ from "jquery";
According to the DefinitelyTyped wiki:
A TypeScript declaration file is way of defining the types, functions
and parameters in an external third-party JavaScript library. By using
a declaration file in your TypeScript code will enable Intellisense
and type checking against the external library you are using.
jquery.d.ts is a part of the DefinitelyTyped Library found on GitHub.
and also you can install via npm.
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
add a reference to the Typescript definition file the top of the file.
/// <reference path ="jquery.d.ts"/>
instead of
import * as $ from "jquery";
According to the DefinitelyTyped wiki:
A TypeScript declaration file is way of defining the types, functions
and parameters in an external third-party JavaScript library. By using
a declaration file in your TypeScript code will enable Intellisense
and type checking against the external library you are using.
jquery.d.ts is a part of the DefinitelyTyped Library found on GitHub.
and also you can install via npm.
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
answered Sep 17 '17 at 15:49
Hamed Javaheri
400310
400310
this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute
– Stanislaw T
Sep 21 '17 at 19:45
You have to add jquery.js file to page for executing jquery functions.
– Hamed Javaheri
Sep 22 '17 at 6:08
add a comment |
this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute
– Stanislaw T
Sep 21 '17 at 19:45
You have to add jquery.js file to page for executing jquery functions.
– Hamed Javaheri
Sep 22 '17 at 6:08
this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute
– Stanislaw T
Sep 21 '17 at 19:45
this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute
– Stanislaw T
Sep 21 '17 at 19:45
You have to add jquery.js file to page for executing jquery functions.
– Hamed Javaheri
Sep 22 '17 at 6:08
You have to add jquery.js file to page for executing jquery functions.
– Hamed Javaheri
Sep 22 '17 at 6:08
add a comment |
I dont know it this is a "correct way" of doing things, but i use the following line in my typescript project to use jquery.
const jquery = require('jquery');
// and then later in your class
jquery('.someclass').show();
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
it gives me the error "Cannot find name 'require' "
– Stanislaw T
Sep 17 '17 at 14:43
If you want to userequire, you need to declare it:declare function require(moduleName: string): any;
– ideaboxer
Sep 17 '17 at 15:01
add a comment |
I dont know it this is a "correct way" of doing things, but i use the following line in my typescript project to use jquery.
const jquery = require('jquery');
// and then later in your class
jquery('.someclass').show();
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
it gives me the error "Cannot find name 'require' "
– Stanislaw T
Sep 17 '17 at 14:43
If you want to userequire, you need to declare it:declare function require(moduleName: string): any;
– ideaboxer
Sep 17 '17 at 15:01
add a comment |
I dont know it this is a "correct way" of doing things, but i use the following line in my typescript project to use jquery.
const jquery = require('jquery');
// and then later in your class
jquery('.someclass').show();
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
I dont know it this is a "correct way" of doing things, but i use the following line in my typescript project to use jquery.
const jquery = require('jquery');
// and then later in your class
jquery('.someclass').show();
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
answered Sep 17 '17 at 14:35
Rainer Plumer
2,36311124
2,36311124
it gives me the error "Cannot find name 'require' "
– Stanislaw T
Sep 17 '17 at 14:43
If you want to userequire, you need to declare it:declare function require(moduleName: string): any;
– ideaboxer
Sep 17 '17 at 15:01
add a comment |
it gives me the error "Cannot find name 'require' "
– Stanislaw T
Sep 17 '17 at 14:43
If you want to userequire, you need to declare it:declare function require(moduleName: string): any;
– ideaboxer
Sep 17 '17 at 15:01
it gives me the error "Cannot find name 'require' "
– Stanislaw T
Sep 17 '17 at 14:43
it gives me the error "Cannot find name 'require' "
– Stanislaw T
Sep 17 '17 at 14:43
If you want to use
require, you need to declare it: declare function require(moduleName: string): any;– ideaboxer
Sep 17 '17 at 15:01
If you want to use
require, you need to declare it: declare function require(moduleName: string): any;– ideaboxer
Sep 17 '17 at 15:01
add a comment |
Installation 1 Terminal
npm install --save jquery
Installation 1 Terminal
npm install --save-dev @types/jquery
installation 3 Add refenece of jquery file in "scripts" array inside angular-cli.json file.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
Final - Import
import * as $ from 'jquery';
@Component({
...
})
export class YourComponent{
///...usage
$('.classname').show();
}
answered Dec 16 '17 at 2:24
Uche Dim
21036
can i know why i got a down vote?? cos i use this in a project currently
– Uche Dim
Nov 4 '18 at 20:54
add a comment |
Installation 1 Terminal
npm install --save jquery
Installation 1 Terminal
npm install --save-dev @types/jquery
installation 3 Add refenece of jquery file in "scripts" array inside angular-cli.json file.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
Final - Import
import * as $ from 'jquery';
@Component({
...
})
export class YourComponent{
///...usage
$('.classname').show();
}
answered Dec 16 '17 at 2:24
Uche Dim
21036
can i know why i got a down vote?? cos i use this in a project currently
– Uche Dim
Nov 4 '18 at 20:54
add a comment |
Installation 1 Terminal
npm install --save jquery
Installation 1 Terminal
npm install --save-dev @types/jquery
installation 3 Add refenece of jquery file in "scripts" array inside angular-cli.json file.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
Final - Import
import * as $ from 'jquery';
@Component({
...
})
export class YourComponent{
///...usage
$('.classname').show();
}
answered Dec 16 '17 at 2:24
Uche Dim
21036
Installation 1 Terminal
npm install --save jquery
Installation 1 Terminal
npm install --save-dev @types/jquery
installation 3 Add refenece of jquery file in "scripts" array inside angular-cli.json file.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
Final - Import
import * as $ from 'jquery';
@Component({
...
})
export class YourComponent{
///...usage
$('.classname').show();
}
answered Dec 16 '17 at 2:24
Uche Dim
21036
edited Nov 14 '18 at 10:18
answered Dec 16 '17 at 2:24
Uche Dim
21036
answered Dec 16 '17 at 2:24
Uche Dim
21036
answered Dec 16 '17 at 2:24
Uche Dim
21036
21036
can i know why i got a down vote?? cos i use this in a project currently
– Uche Dim
Nov 4 '18 at 20:54
add a comment |
can i know why i got a down vote?? cos i use this in a project currently
– Uche Dim
Nov 4 '18 at 20:54
can i know why i got a down vote?? cos i use this in a project currently
– Uche Dim
Nov 4 '18 at 20:54
can i know why i got a down vote?? cos i use this in a project currently
– Uche Dim
Nov 4 '18 at 20:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46264908%2fusing-jquery-with-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try to use relative path to jquery:
import * as $ from "path/to/jquery";– Commercial Suicide
Sep 17 '17 at 14:07
I am doing
import * as jQuery from 'jquery'. It should work if jQuery is installed through NPM.– ideaboxer
Sep 17 '17 at 14:07
(at least with TypeScript 2.3.4 it works)
– ideaboxer
Sep 17 '17 at 14:09
i have installed it through npm as well, i am gonna try to be more specific with my path
– Stanislaw T
Sep 17 '17 at 14:09
i tried
import * as $ from "../node_modules/@types/jquery";and import * as $ from"../node_modules/@types/jquery/index.d.ts";and it doesnt work either– Stanislaw T
Sep 17 '17 at 14:14