TypeScript har varit ett värdefullt tillskott till JavaScript-ekosystemet i över ett decennium och har blivit populärt tack vare dess förmåga att ge typkontroll för JavaScript-kod. ## Typer för JavaScript-paket För bakåtkompatibilitet och flexibilitet tillåter TypeScript paketförfattare att tillhandahålla typsdefinitioner för sina JavaScript-paket. Sådana typsdefinitioner lagras vanligtvis i "[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)"-arkivet. Du kan använda `@types`-skopet för att installera dessa typsdefinitioner, till exempel är `@types/react` typsdefinitionen för React-paketet. Efter installationen av dessa typsdefinitioner kan du använda paketet med förtroende för typkontroll. Här är ett exempel på att definiera en React-komponent med typkontroll: ```tsx import React from 'react'; type Props = { name: string; }; const Hello: React.Component = ({ name }) => { return

Hello, {name}!

; }; ``` ## Modulutökning Medan de flesta populära JavaScript-paket har lättillgängliga typsdefinitioner i `@types`-skopet, kan vissa paket sakna typsdefinitioner eller ha föråldrade sådana. I sådana fall tillhandahåller TypeScript en kraftfull funktion som kallas "[modulutökning](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)" för att lägga till typsdefinitioner för dessa paket. Låt oss titta på ett exempel: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Nu kan du använda denna utökade typsdefinition i din kod: ```ts import { foo } from 'foo'; console.log(foo); // `foo` är en sträng ``` Modulutökning tillåter inte bara att lägga till typsdefinitioner för paket, utan också att utöka befintliga typsdefinitioner. Till exempel kan du lägga till en ny egenskap till `window`-objektet: ```ts // src/types/window.d.ts interface Window { foo: string; } ``` Och använda det i din kod: ```ts console.log(window.foo); // `foo` är en sträng ``` I ett [tidigare inlägg](/react-router-lazy-type-handling/) har vi pratat om en typfråga i React Router-biblioteket, och vi var tvungna att övervinna dess påverkan genom att utöka och förstärka den befintliga typen genom en anpassad deklarationsfil. Kom ihåg att när du använder modulutökning är det avgörande att säkerställa noggrannheten i dina typsdefinitioner genom att noggrant inspektera JavaScript-källkoden. Felaktiga typsdefinitioner kan leda till runtime-fel. I exemplet ovan måste `window.foo`-egenskapen vara en sträng som finns på `window`-objektet. ## Global utökning Ibland kan du stöta på skript som introducerar globala variabler och du kanske vill tillhandahålla typsdefinitioner för dessa globala variabler för att använda dem i din TypeScript-kod. Till exempel, om du har ett skript som sätter en global variabel kallad `__DEV__`: ```html ``` Du kan lägga till typsdefinitioner för denna globala variabel så här: ```ts // src/types/global.d.ts declare const __DEV__: boolean; ``` Nu kan du använda det i din TypeScript-kod: ```tsx if (__DEV__) { // ... } ``` Genom att kombinera modulutökning och global utökning kan du även utöka typsdefinitioner för JavaScript-prototyper. Detta rekommenderas dock generellt inte eftersom det kan förorena det globala omfånget. ```ts // src/types/global.d.ts declare global { interface Array { first(): T; } } ``` ```ts // src/helpers/array.ts Array.prototype.first = function () { return this[0]; }; ``` Kraften hos modulutökning möjliggör sådana utökningar, men var försiktig för att förhindra global omfattningsförorening. ## Inbäddade JavaScript-filer I de tidigare nämnda exemplen antog vi att importeringar kunde lösas genom paketets ingångsfil. Men vissa paket exporterar inbäddade JavaScript-filer utan motsvarande typsdefinitioner. Tänk på ett paket som heter `foo` med följande struktur: ``` foo/ package.json index.js bar/ index.js baz.js ``` `foo`-paketet exporterar `index.js`-filen som ingångspunkt och exporterar även `bar`-katalogen. För att utöka typsdefinitionerna för `foo`-paketet kan du skapa en `foo.d.ts`-fil: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Men om du försöker importera `baz.js`-filen i TypeScript kommer du att stöta på ett fel: ```ts import { baz } from 'foo/bar/baz.js'; // Kan inte hitta modul 'foo/bar/baz.js' eller dess motsvarande typdeklarationer. ``` Exemplet förutsätter att vi använder ES-moduler. För att utöka typsdefinitionerna för `baz.js`-filen behöver du skapa en separat `baz.d.ts`-fil: ```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; } ``` Detta säkerställer att TypeScript kan hitta modulen och dess tillhörande typsdefinitioner: ```ts import { baz } from 'foo/bar/baz.js'; console.log(baz); // `baz` är en sträng ``` För att behålla organiserade typsdefinitioner kan du efterlikna paketets struktur i dina typsdefinitionsfiler: ``` src/ types/ foo/ index.d.ts bar/ baz.d.ts ``` Detta tillvägagångssätt håller din TypeScript-kod strukturerad och typ-säker, även när du arbetar med inbäddade JavaScript-filer. TypeScript kommer fortfarande att rapportera ett fel om du lägger två modulutökningar (`declare module ...`) i samma fil.