TypeScript doskonale współpracuje z bibliotekami JavaScript, oferując silne typowanie i autouzupełnianie dla popularnych narzędzi. Jednak wiele zewnętrznych bibliotek JavaScript (szczególnie starszych) nie jest domyślnie napisanych w TypeScript, co może powodować problemy z brakiem typów. W tym wpisie omówimy, jak radzić sobie z tym problemem, jak dodawać typy dla bibliotek oraz jakie narzędzia i podejścia są do tego używane.

W tym rozszerzonym wpisie omówimy:

1. Biblioteki z natywnym wsparciem dla TypeScript.
2. Instalowanie zewnętrznych definicji typów.
3. Tworzenie własnych definicji typów.
4. Typowanie dynamicznych bibliotek.

Wiele nowoczesnych bibliotek JavaScript (zwłaszcza popularnych w społeczności) oferuje natywne wsparcie dla TypeScript, co oznacza, że dostarczają one własne definicje typów razem z kodem. Kiedy instalujesz taką bibliotekę, nie musisz martwić się o dodawanie dodatkowych typów – są one dostarczone razem z biblioteką.

Przykład z biblioteką Axios (HTTP Client):

Instalacja Axiosa

npm install axios

import axios from 'axios';

axios.get('https://api.example.com/users')
  .then(response => {
    console.log(response.data);
  });

Nie wszystkie biblioteki mają wbudowane typy. W takim przypadku, najczęściej spotykanym rozwiązaniem jest instalacja zewnętrznych definicji typów z repozytorium DefinitelyTyped, które jest ogromną bazą typów dla popularnych bibliotek JavaScript.

Definicje te instalujesz za pomocą paczek npm, które mają prefiks @types. Typy te są niezależnie aktualizowane i obsługiwane przez społeczność TypeScript.

Przykład z biblioteką lodash (biblioteka narzędziowa):

Lodash jest biblioteką JavaScript bez wbudowanych typów, ale ma dostępne definicje w DefinitelyTyped.

Instalacja Lodash i jego typów:

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

import _ from 'lodash';

const numbers = [1, 2, 3];
const doubled = _.map(numbers, n => n * 2);

console.log(doubled);  // [2, 4, 6]

Czasami może się zdarzyć, że biblioteka nie ma dostępnych typów w DefinitelyTyped, lub sam tworzysz bibliotekę, dla której chcesz zdefiniować typy. W takim przypadku możesz ręcznie stworzyć plik z definicjami typów.

Przykład tworzenia własnych definicji typów:

Załóżmy, że korzystasz z biblioteki myLibrary, która nie ma dostępnych typów. Możesz stworzyć plik o nazwie myLibrary.d.ts, który będzie zawierał typy dla tej biblioteki:

// myLibrary.d.ts
declare module 'myLibrary' {
  export function greet(name: string): string;
  export const version: string;
}

import { greet, version } from 'myLibrary';

console.log(greet('John'));  // "Hello, John"
console.log(version);        // np. "1.0.0"

Niektóre biblioteki, zwłaszcza te dynamiczne, mogą być trudne do typowania, ponieważ ich funkcje i struktura zmieniają się w trakcie działania programu. Przykłady takich bibliotek to np. jQuery lub dynamiczne wczytywanie modułów.

W takich przypadkach warto korzystać z typów bardziej elastycznych, takich jak any lub unknown, które pozwolą na większą swobodę w typowaniu:

Przykład z jQuery:

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

import $ from 'jquery';

$('#element').click(() => {
  console.log('Element clicked');
});

let dynamicValue: any = $('#element').data('value');

Dodawanie typów do zewnętrznych bibliotek w TypeScript może być łatwe, jeśli biblioteka ma wbudowane wsparcie dla typów lub dostępne definicje w DefinitelyTyped. W przypadku, gdy typów brakuje, zawsze możesz stworzyć własne definicje. Pamiętaj również, że narzędzia takie jak @types ułatwiają integrację i typowanie zewnętrznych bibliotek, co czyni pracę z TypeScript jeszcze bardziej wydajną i bezpieczną.