TypeScript와 함께 jQuery를 사용하는 방법

노력하고 있습니다

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

Visual Studio에서이 오류를 표시합니다 (TS) Cannot find name '$'.. TypeScript와 함께 jQuery를 어떻게 사용할 수 있습니까?

프로젝트 에 jQuery 용 TypeScript 선언 파일 을 다운로드하여 포함시켜야 할 가능성이 높습니다 jquery.d.ts.

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

package.json 파일 과 동일한 폴더 에서 다음 명령을 실행하십시오.

npm install --save-dev @types/jquery

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

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

여기에서 다운로드 하십시오 .

옵션 3 : 타이핑 사용 (Pre 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

정의 파일을 설정 한 후 $원하는 TypeScript 파일에서 별칭 ( )을 가져와 평소처럼 사용하십시오.

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

당신은 컴파일해야 할 수도 있습니다 --allowSyntheticDefaultImports-add "allowSyntheticDefaultImports": true에서 tsconfig.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 ...

을위한 비주얼 스튜디오 코드

나를 위해 작동하는 것은 index.html 의 <script> 태그 를 통해 표준 JQuery 라이브러리 로딩을 수행하는 것 입니다.

운영

npm install --save @types/jquery

이제 JQuery $ 함수는 다른 가져 오기없이 모든 .ts 파일에서 사용할 수 있습니다.

JQuery에 Typescript 유형이 필요할 수 있다고 생각합니다. Visual Studio를 사용한다고 말했기 때문에 Nuget을 사용하여 얻을 수 있습니다.

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

Nuget 패키지 관리자 콘솔의 명령은

Install-Package jquery.TypeScript.DefinitelyTyped

업데이트 : 의견에서 언급 했듯이이 패키지는 2016 년 이후 업데이트되지 않았습니다.하지만 https://github.com/DefinitelyTyped/DefinitelyTyped 의 Github 페이지를 방문 하여 유형을 다운로드 할 수 있습니다. 라이브러리의 폴더를 탐색 한 다음 index.d.ts파일 을 다운로드하십시오 . 프로젝트 디렉토리의 아무 곳이나 팝업하면 VS가 즉시 사용해야합니다.

Angular CLI V7의 경우

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"
    ]
}

2019 업데이트 :

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

Typescript는 DefinitelyTyped Repo를 사용하여 라이브러리 개발에 Typescript를 사용하지 않는 타사 공급 업체 라이브러리를 지원합니다 .

이러한 유형의 유형 검사에 대해 tsLint가 켜져 있으면 구성 요소에서 jquery/ 를 선언해야합니다 $.

예를 들어.

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

웹 애플리케이션 (예 : React)에서 jquery를 사용하고 jquery가 이미로드 된 경우 <script src="jquery-3.3.1.js"...

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

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

따라서 jquery를 두 번째로로드 할 필요는 없지만 npm install --save jqueryTypescript의 모든 장점을 갖습니다.

다음은 TypeScript 및 jQuery 구성 단계입니다.

인터넷에서 대부분의 기사보다 jQuery 유형이 더 잘 작동하도록 지원합니다 . ( 나는 믿는다. )

먼저:

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

둘째 (매우 매우 중요합니다!!!) :

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 !')
    }
}

부드러운 매끄럽다 !!!

이것은 Angular 버전 9에서 지금 그리고 오늘 나를 위해 일합니다.

1. npm을 통해 설치하십시오 : npm i @ types / jquery는 --save를 추가하여 전체적으로 설정하십시오.
2. tsconfig.app.json으로 이동하여 "types"배열 jquery를 추가하십시오.
3. 봉사하고 끝냈습니다.

이것은 나를 위해 작동합니다 :

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