TypeScript on ollut arvokas lisäys JavaScript-ekosysteemiin yli vuosikymmenen ajan, saavuttaen suosiota kyvyllään tarjota työturvallisuutta JavaScript-koodille. ## Tyypit JavaScript-paketeille Jälkikätisen yhteensopivuuden ja joustavuuden vuoksi TypeScript sallii pakettien tekijöiden tarjota tyyppimäärittelyjä JavaScript-paketeilleen. Tällaiset tyyppimäärittelyt tallennetaan yleensä "[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)"-tietovarastoon. Voit käyttää `@types`-laajuutta asentaaksesi nämä tyyppimäärittelyt, esimerkiksi, `@types/react` on React-paketin tyyppimäärittely. Asennettuasi nämä tyyppimäärittelyt, voit käyttää pakettia luottaen työturvallisuuteen. Tässä on esimerkki React-komponentin määrittelystä työturvallisuuden kanssa: ```tsx import React from 'react'; type Props = { name: string; }; const Hello: React.Component = ({ name }) => { return

Hei, {name}!

; }; ``` ## Moduulin laajentaminen Vaikka useimmilla suosituilla JavaScript-paketeilla on helposti saatavilla olevat tyyppimäärittelyt `@types`-laajuudessa, joillakin paketeilla saattaa puuttua tyyppimäärittelyjä tai ne ovat vanhentuneita. Tällaisissa tapauksissa TypeScript tarjoaa tehokkaan ominaisuuden, jota kutsutaan "moduulin laajentamiseksi" [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation), lisätäksesi tyyppimäärittelyjä näille paketeille. Katsotaanpa esimerkkiä: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Nyt voit käyttää tätä laajennettua tyyppimäärittelyä koodissasi: ```ts import { foo } from 'foo'; console.log(foo); // `foo` on merkkijono ``` Moduulin laajennus ei ainoastaan salli lisätä tyyppimäärittelyjä paketeille, vaan myös laajentaa olemassa olevia tyyppimäärittelyjä. Esimerkiksi voit lisätä uuden ominaisuuden `window`-objektiin: ```ts // src/types/window.d.ts interface Window { foo: string; } ``` Ja käyttää sitä koodissasi: ```ts console.log(window.foo); // `foo` on merkkijono ``` Aiemmassa [postissa](/react-router-lazy-type-handling/) olemme puhuneet tyyppiongelmasta React Router kirjastoissa, ja meidän piti voittaa vaikutus laajentamalla ja kasvattamalla olemassa olevaa tyyppiä mukautetun ilmoitustiedoston kautta. Muista, että käyttääksesi moduulin laajennusta on tärkeää varmistaa tyyppimäärittelyiden tarkkuus tarkastelemalla JavaScriptin lähdekoodia huolellisesti. Epätarkat tyyppimäärittelyt voivat johtaa ajonaikaisiin virheisiin. Yllä olevassa esimerkissä `window.foo`-ominaisuuden on oltava merkkijono, joka on olemassa `window`-objektissa. ## Globaalin laajentaminen Joskus saatat kohdata skriptejä, jotka esittävät globaaleja muuttujia, ja saatat haluta tarjota tyyppimäärittelyjä näille globaaleille muuttujille käyttämään niitä TypeScript-koodissasi. Esimerkiksi, jos sinulla on skripti, joka asettaa globaalin muuttujan nimeltä `__DEV__`: ```html ``` Voit lisätä tyyppimäärittelyn tälle globaalille muuttujalle näin: ```ts // src/types/global.d.ts declare const __DEV__: boolean; ``` Nyt voit käyttää sitä TypeScript-koodissasi: ```tsx if (__DEV__) { // ... } ``` Yhdistämällä moduulin laajennuksen ja globaalin laajennuksen, voit jopa laajentaa tyyppimäärittelyjä JavaScript-prototyypeille. Tämä ei kuitenkaan yleisesti ole suositeltavaa, sillä se voi saastuttaa globaalia tilaa. ```ts // src/types/global.d.ts declare global { interface Array { first(): T; } } ``` ```ts // src/helpers/array.ts Array.prototype.first = function () { return this[0]; }; ``` Moduulin laajennuksen voima mahdollistaa tällaiset laajennukset, mutta käytä varovaisuutta estääksesi globaalin tilan saastumisen. ## Sisäkkäiset JavaScript-tiedostot Aiemmissa esimerkeissä oletimme, että tuonnit voidaan ratkaista paketin _entry_ tiedoston kautta. Jotkut paketit saattavat kuitenkin viedä sisäkkäisiä JavaScript-tiedostoja ilman vastaavia tyyppimäärittelyjä. Mieti pakettia, joka nimeltään `foo` seuraavalla rakenteella: ``` foo/ package.json index.js bar/ index.js baz.js ``` `foo`-paketti vie `index.js`-tiedoston sisäänkäyntipisteenä ja vie myös `bar`-hakemiston. Laajentaaksesi `foo`-paketin tyyppimäärittelyjä, voit luoda `foo.d.ts`-tiedoston: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Kuitenkin, jos yrität tuoda `baz.js`-tiedostoa TypeScriptissä, kohtaat virheen: ```ts import { baz } from 'foo/bar/baz.js'; // Cannot find module 'foo/bar/baz.js' or its corresponding type declarations. ``` Esimerkki olettaa, että käytämme ES-moduuleita. Näiden tyyppimäärittelyjen laajentamiseksi `baz.js`-tiedostoon sinun on luotava erillinen `baz.d.ts`-tiedosto: ```ts // src/types/foo/index.d.ts declare module 'foo' { export const foo: string; } // src/types/foo/bar/baz.d.ts declare module 'foo/bar/baz.js' { export const baz: string; } ``` Tämä varmistaa, että TypeScript pystyy löytämään moduulin ja sen liittyvät tyyppimäärittelyt: ```ts import { baz } from 'foo/bar/baz.js'; console.log(baz); // `baz` on merkkijono ``` Käyttääksesi järjestettyjä tyyppimäärittelyjä, voit jäljitellä paketin rakennetta tyyppimäärittelytiedostoissasi: ``` src/ types/ foo/ index.d.ts bar/ baz.d.ts ``` Tämä lähestymistapa pitää TypeScript-koodisi järjestettynä ja työturvallisena, jopa käsiteltäessä sisäkkäisiä JavaScript-tiedostoja. TypeScript raportoi edelleen virheen, jos laitat kaksi moduulin laajennusta (`declare module ...`) samaan tiedostoon.