Use JQUERY em Typescript

Estou tentando integrar o JQUERY ao Typescript, mas bati em um muro e não sei como superá-lo. Tenha em mente que sou iniciante quando se trata de Typescript (estou mexendo nele há apenas alguns meses), então há uma chance de que esse problema seja muito fácil de resolver, mas eu não consigo descobrir.

Então, eu tenho este programa muito simples em TS:

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

function PrintName()
{
    let name:any = $('#txtName').val();
    console.log(name);
}

Mas quando eu executo na web, recebo o erro: Uncaught ReferenceError: $não está definido em PrintName

Mas, quando incluo esta linha no HTML:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Funciona muito bem. Então, como posso adicionar Jquery ao Typescript? Eu tentei com este comando:

npm install --save-dev @types/jquery

E então adicionando a referência para index.d.ts, mas eu obtenho o mesmo erro. Estou usando o Visual Studio Code 1.27, tsc 3.0.1 e npm 3.5

Obrigado!

Resposta #1

Instalar @types/jquery apenas fornece informações de tipos para o jQuery; você ainda precisa carregar uma implementação em tempo de execução. Usar uma <script> separada é aceitável. Se você quiser produzir um único arquivo JavaScript que inclua seu código, bem como as bibliotecas das quais depende que estão embaladas em forma de módulo (como o jQuery), você precisará usar um empacotador de módulos, como Webpack, Rollup ou Browserify; o compilador TypeScript não é capaz de fazer isso sozinho.

Resposta #2

adicionar dependências: digite no CLI.

npm --save jquery
npm --save jquery-ui-bundle

em angular-cli.json:

"scripts": [ 
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jquery-ui-bundle/jquery-ui.js"], ...

então, no seu componente use:

declare var jQuery:any; // jQuery is the same as $