Arquivos de Declaração para Bibliotecas Populares - Typescript

Os arquivos de cabeçalho declarativos são usados para integrar código externo em JavaScript com TypeScript. Muitas vezes, precisamos interagir com bibliotecas grandes, como Angular, React, entre outras. Para aproveitar as funcionalidades dessas bibliotecas em código TypeScript, pode ser necessário criar nossos próprios arquivos de definições. Esse processo pode ser trabalhoso devido à complexidade dessas bibliotecas e ao volume de código envolvido.

No entanto, a comunidade TypeScript teve a ideia de criar um repositório comum para esses arquivos, de modo que não seja necessário defini-los novamente. Esses arquivos podem ser encontrados prontos nesse repositório no GitHub: DefinitelyTyped .

Como utilizar bibliotecas JS e seus arquivos de declaração?

Vamos analisar isso com o exemplo da biblioteca jQuery.

Primeiro, vamos baixar as definições de tipos para a biblioteca jQuery usando o seguinte comando:

npm install --save-dev @types/jquery

Isso criará uma pasta node_modules/@types no projeto, onde o diretório jquery armazenará os arquivos de cabeçalho para a biblioteca jQuery.

Além disso, será criado um arquivo package.json com o seguinte conteúdo:

{
    "devDependencies": {
        "@types/jquery": "^3.5.5"
    }
}

Aqui, vemos que as definições atuais para jQuery funcionam com a versão 3.5.5 e superiores.

Agora, precisamos informar ao compilador TypeScript, usando o parâmetro typeRoots, onde estão localizados os arquivos de cabeçalho: que, nesse caso, é o diretório node_modules/@types. Para isso, vamos definir o seguinte arquivo de configuração tsconfig.json:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "noEmitOnError": true,
        "strictNullChecks": true,
        "outFile": "app.js",
        "typeRoots": [
          "node_modules/@types"
        ]
    }
}

Em seguida, definimos a seguinte página web index.html na pasta raiz do projeto:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

Aqui, estamos apenas conectando a biblioteca jQuery a partir de um CDN, bem como o arquivo de nossa aplicação app.js.

Agora, definimos o arquivo app.ts na pasta raiz do projeto:

$(() => {
    $('#content').html('<h1>Olá TypeScript</h1>');
});

Neste caso, usamos o evento document.ready, definido no jQuery, que é acionado quando o documento é carregado. Em seguida, através de uma expressão lambda que define a função de callback, adicionamos um novo elemento à página web usando a sintaxe familiar do jQuery.

No final, o projeto terá a seguinte estrutura:

.
├── node_modules
├── app.ts
├── index.html
├── package.json
├── package.lock.json
└── tsconfig.json

Agora, vamos compilar o arquivo da aplicação com o comando:

tsc

Ao executar a página web index.html, o código do arquivo app.ts será executado.

Vamos considerar mais um exemplo: tratamento do evento de clique de um botão.

Adicionamos um botão no código HTML da página:

<button id="alertBtn">Clique</button>

No código TypeScript, podemos tratar o clique desse botão da seguinte maneira:

$(() => {
    $('#alertBtn').on('click', () => {
        $('#content').html('<h2>Olá, mundo</h2>');
    });
});

Os manipuladores de eventos, como click, também aceitam expressões lambda como parâmetro, que definem o conjunto de instruções a serem executadas quando o evento é acionado.

Essa abordagem permite manipular facilmente eventos e modificar a página web usando TypeScript e bibliotecas populares como jQuery.