typeScript에서 jQuery를 사용하는 방법

typeScript에서 jQuery를 사용하는 방법

난 노력하고 있다.

$(function(){ 
    alert('Hello'); 
});

비주얼 스튜디오 (TS) Cannot find name '$'.typeScript에서typeScript jQuery는 어떻게 해야 요?

대부분의 경우 jQuery용 TypeScript 선언 파일을 다운로드하여 프로젝트에 포함해야 합니다.jquery.d.ts

옵션 1: @types 패키지 설치(TS 2.0+ 권장)

패키지와 동일한 폴더에 있습니다.json file, 다음 명령을 실행합니다.

npm install --save-dev @types/jquery

그러면 컴파일러는 jquery에 대한 정의를 자동으로 해결합니다.

옵션 2: 수동 다운로드(권장하지 않음)

여기서 다운받으세요.

옵션 3: 타이핑 사용 (TS 2.0 이전)

타이핑을 사용하고 있는 경우는, 다음과 같이 포함할 수 있습니다.

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

---

파일 후( Import)를 Import 합니다.$원하는 TypeScript 파일에 저장)을 사용하여 정상적으로 사용할 수 있습니다.

import $ from "jquery";
// or
import $ = require("jquery");

할 수 .--allowSyntheticDefaultImports: ""allowSyntheticDefaultImports": truetsconfig.json으로 설정합니다.

패키지도 설치하시겠습니까?

jquery가 설치되어 있지 않은 경우 npm 경유로 의존관계로 설치할 수 있습니다(단, 이는 항상 해당되지 않습니다).

npm install --save jquery

저 같은 경우에는 이렇게 해야 했어요.

npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
npm install jquery --save // save jquery as a dependency

파일 " " " " 에서A.ts

import * as $ from "jquery";
... jquery code ...

Angular CLI V2+의 경우

npm install jquery --save
npm install @types/jquery --save

jquery에 angular.json -> 스크립트에 엔트리가 있는지 확인합니다.

...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

tsconfig.app.json으로 이동하여 "types"에 엔트리를 추가합니다.

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["jquery","bootstrap","signalr"]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Visual Studio 코드용

index.html의 <스크립트> 태그를 사용하여 표준 JQuery 라이브러리를 로드하는 것이 효과적입니다.

달려.

npm install --save @types/jquery

이제 JQuery $ 함수를 모든 .ts 파일에서 사용할 수 있게 되었습니다.다른 Import는 필요 없습니다.

JQuery의 타이프 스크립트 타이핑이 필요할 것 같습니다.Visual Studio를 사용한다고 했으니 Nuget을 사용하여 얻을 수 있습니다.

https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

Nuget Package Manager Console 명령어는 다음과 같습니다.

Install-Package jquery.TypeScript.DefinitelyTyped

업데이트: 댓글에 기재된 바와 같이 이 패키지는 2016년 이후 업데이트되지 않았습니다.그러나 https://github.com/DefinitelyTyped/DefinitelyTyped의 Github 페이지를 방문하여 유형을 다운로드할 수 있습니다.라이브러리 폴더를 탐색한 후index.d.ts파일링 합니다.프로젝트 디렉토리의 아무 곳이나 팝업하면 VS에서 즉시 사용할 수 있습니다.

업데이트 2019:

David의 답변이 더 정확합니다.

Typescript는 라이브러리 개발에 Typescript를 사용하지 않는 서드파티 벤더 라이브러리를 지원하며, Typescript는 Definally를 사용하여Repo 라고 입력합니다.

---

은 꼭 합니다.jquery/$'tsLint' 입니다.

Eg를 위해서.

declare var jquery: any;
declare var $: any;

다음은 TypeScript 및 jQuery 설정 순서입니다.

이를 통해 jQuery의 유형은 인터넷 상의 대부분의 기사보다 더 잘 작동하도록 지원합니다.)

첫 번째:

npm install jquery --save
npm install @types/jquery --save-dev

second (매우 매우 중요!!) :

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

그럼 즐기실 수 있습니다.

$(document).ready(function () {
    $('btn').click(function () {
       alert('I am clicked !')
    }
}

비단결처럼 부드럽다!!!

하는 경우 .<script src="jquery-3.3.1.js"...

웹 페이지에서 다음을 수행할 수 있습니다.

npm install --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];

째로 npm install --save jquery)의을 모두 있습니다.) , 、 [ Typescript ] 、 [ Typescript ] 、 [ Typescript ] 。

윈도 인터페이스를 확대함으로써 글로벌을 선언할 수 있습니다.

import jQuery from '@types/jquery';

declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}

출처:

• https://stackoverflow.com/a/12709880/4642023
• https://mariusschulz.com/blog/declaring-global-variables-in-typescript#augmenting-the-window-interface

이것은 Angular 버전9에서 지금이나 오늘이나 유효합니다.

1. npm 경유로 설치합니다.npm i @types / jquery는 --save를 글로벌하게 셋업에 추가합니다.
2. tsconfig.app.json으로 이동하여 어레이 "types" jquery를 추가합니다.
3. ng 서브 완료.

ASP에서의 VS 2019 절차입니다.네트워크 코어 프로젝트따라서 npm 명령줄 유틸리티를 조작할 필요가 없으며 npm config 파일을 사용하여 선언적인 접근 방식을 취할 필요가 없습니다.

1. 소포가 있습니까?프로젝트의 루트에 json(npm 의존관계 구성)이 있습니까?

   • -> [ -> [] -] -> [ ] -> [ ] -> [ ] -> [ ] npm ]를 선택합니다.npm Configuration File 파일명을 합니다.package.json

2. DevDependencies 아래에 항목을 추가합니다.그러면 npm이 "@types/jquery"를 설치하도록 지시합니다.이 패키지는 Definally가 관리하는npm 패키지입니다.입력 완료. 이는 기본적으로 다른 응답에 표시된 npm install 명령과 동일합니다.

   "devDependencies": {
     "@types/jquery": "3.5.1"
   }
   

3. 아마도 파일을 저장할 때 npm 패키지 설치가 트리거될 것입니다.패키지를 오른쪽 클릭해야 합니다.json file을 클릭하고 Restore Packages를 클릭합니다(프로젝트가 디버깅모드일 때는 옵션이 표시되지 않습니다).

   • npm restore를 처음 실행할 때는 [Output]탭/창으로 전환하여 드롭다운을 "npm"으로 변경하여 오류가 없는지 확인해야 합니다.

4. -> node_types/@types/jquery/jquery/node입니다.
   • index.d.ts는 다른 파일을 참조하는 주요 타입 스크립트 정의 파일입니다.

5. 자체 타이프스크립트 파일을 열고 솔루션 탐색기에서 열려 있는 타이프스크립트 파일의 첫 번째 행으로 index.d.ts를 드래그합니다.이것은 맨 위에 추가됩니다(상대 경로는 타이프스크립트 파일의 위치에 따라 다릅니다).

   /// <reference path="../node_modules/@types/jquery/index.d.ts" />
   

6. 이제 당신이 타이프스크립트 파일의 함수 안에 코드를 쓰기 시작하면 당신은 타이프할 수 있을 것입니다.jQue인텔리센스 완료 프롬프트가 표시됩니다.

주의: 최근 VS는 재시작할 때까지 다양한 변경 사항, 특히 유형별 오류 및 인텔리센스 관련 사항을 제대로 반영하지 못하는 것이 매우 좋지 않습니다.MS 공식 문서에서도 빨간색 스퀴글리를 해결하기 위해 필요한 재시작에 대해 언급하는 경우가 많습니다.의심스러운 경우 VS를 닫거나 다시 여십시오.마지막 단계는 재시작할 때까지 인텔리센스가 작동하지 않을 가능성이 높은 장소입니다.

이 메서드는 npm 이외의 메서드를 사용하여 jQuery를 포함하는지 여부에 관계없이 작동합니다.예를 들어, 한 프로젝트에서 우리는 imports, npm, js modules를 사용하지 않았고, 또한 요구하지도 않았습니다.종속성을 해결하기 위한 JS.jQuery는 html 페이지에 있는 스크립트 태그 링크에 불과했습니다.단, 타이프스크립트 완료/타입 해상도를 얻기 위해 .d.ts jQuery typedefs를 참조할 수 있습니다.

패키지에 의존성을 쉽게 추가할 수 있습니다.json은 "jquery"를 나타냅니다.jQuery 자체를 취득하려면 "3.5.1"을 사용합니다.

VS가 정상적으로 동작하고 있는 경우는, 패키지에 (Web 쿼리로 인해) 이름 및 버전 완료 프롬프트가 몇개인가 느린 것에 주의해당 프롬프트는 다음과 같습니다.json:

jquery 및 @types/jquery 설치 후(개발 종속성으로서) 다음 Import를 사용합니다.

import * as $ from "jquery";

내 경우엔 이 방법만이 도움이 되었다.(1099)

스텝 1. 실을 사용하고 있기 때문에 cmd 다음에 jQuery & jQuery's Types를 설치할 수 있습니다.

yarn add jquery
yarn add @types/jquery -D

순서 2 tsx 파일 추가

import jquery from 'jquery';
const $: JQueryStatic = jquery;

스텝 3: jQuery를 반응 컴포넌트에 넣을 수 있습니다.

useEffect(() => {  
  $(() => {
    console.log("Hello JQuery!");
  });
}, []);

이것으로 충분합니다.

export var jQuery: any = window["jQuery"];

언급URL : https://stackoverflow.com/questions/32050645/how-to-use-jquery-with-typescript