TypeScript уже более десяти лет является ценным дополнением к экосистеме JavaScript, завоевав популярность благодаря своей способности обеспечивать типобезопасность кода JavaScript. ## Типы для пакетов JavaScript Для обеспечения обратной совместимости и гибкости TypeScript позволяет авторам пакетов предоставлять определения типов для своих JavaScript-пакетов. Такие определения типов обычно хранятся в репозитории "[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)". Вы можете использовать область `@types` для установки этих определений типов, например, `@types/react` — это определение типов для пакета React. После установки этих определений типов вы можете использовать пакет с уверенность в типобезопасности. Вот пример определения компонента React с поддержкой типобезопасности: ```tsx import React from 'react'; type Props = { name: string; }; const Hello: React.Component = ({ name }) => { return

Hello, {name}!

; }; ``` ## Дополнение модулей Хотя для большинства популярных JavaScript-пакетов доступны готовые определения типов в области `@types`, некоторые пакеты могут не иметь определений типов или иметь устаревшие. В таких случаях TypeScript предоставляет мощную функцию, называемую "[дополнение модулей](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)", для добавления определений типов для этих пакетов. Давайте рассмотрим пример: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Теперь вы можете использовать это дополненное определение типов в вашем коде: ```ts import { foo } from 'foo'; console.log(foo); // `foo` — это строка ``` Дополнение модулей позволяет не только добавлять определения типов для пакетов, но и расширять существующие определения типов. Например, вы можете добавить новое свойство к объекту `window`: ```ts // src/types/window.d.ts interface Window { foo: string; } ``` И использовать его в вашем коде: ```ts console.log(window.foo); // `foo` — это строка ``` В [предыдущем посте](/react-router-lazy-type-handling/) мы говорили о проблеме с типами в библиотеке React Router, и нам пришлось преодолеть последствия, расширяя и дополняя существующий тип через файл пользовательской декларации. Помните, что при использовании дополнения модулей критически важно обеспечить точность ваших определений типов путем тщательной проверки исходного кода JavaScript. Неправильные определения типов могут привести к ошибкам времени выполнения. В приведенном выше примере свойство `window.foo` должно быть строкой, которая существует в объекте `window`. ## Глобальное дополнение Иногда вы можете столкнуться со скриптами, которые вводят глобальные переменные, и вам может понадобиться предоставить определения типов для этих глобальных переменных, чтобы использовать их в вашем коде TypeScript. Например, если у вас есть скрипт, который устанавливает глобальную переменную `__DEV__`: ```html ``` Вы можете добавить определения типов для этой глобальной переменной следующим образом: ```ts // src/types/global.d.ts declare const __DEV__: boolean; ``` Теперь вы можете использовать ее в вашем коде TypeScript: ```tsx if (__DEV__) { // ... } ``` Совмещая дополнение модулей и глобальное дополнение, вы можете также расширять определения типов для прототипов JavaScript. Однако это обычно не рекомендуется, так как это может загрязнить глобальную область видимости. ```ts // src/types/global.d.ts declare global { interface Array { first(): T; } } ``` ```ts // src/helpers/array.ts Array.prototype.first = function () { return this[0]; }; ``` Мощь дополнения модулей позволяет делать такие расширения, но будьте осторожны, чтобы не загрязнить глобальную область видимости. ## Вложенные JavaScript-файлы В приведенных ранее примерах мы предполагали, что импорты могут быть разрешены через входной файл пакета. Однако некоторые пакеты экспортируют вложенные JavaScript-файлы без соответствующих определений типов. Рассмотрим пакет под названием `foo` со следующей структурой: ``` foo/ package.json index.js bar/ index.js baz.js ``` Пакет `foo` экспортирует файл `index.js` в качестве входной точки и также экспортирует директорию `bar`. Чтобы дополнить определения типов для пакета `foo`, вы можете создать файл `foo.d.ts`: ```ts // src/types/foo.d.ts declare module 'foo' { export const foo: string; } ``` Однако, если вы попытаетесь импортировать файл `baz.js` в TypeScript, вы столкнетесь с ошибкой: ```ts import { baz } from 'foo/bar/baz.js'; // Cannot find module 'foo/bar/baz.js' or its corresponding type declarations. ``` В примере предполагается, что мы используем ES-модули. Чтобы дополнить определения типов для файла `baz.js`, вам нужно создать отдельный файл `baz.d.ts`: ```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; } ``` Это гарантирует, что TypeScript сможет найти модуль и его соответствующие определения типов: ```ts import { baz } from 'foo/bar/baz.js'; console.log(baz); // `baz` — это строка ``` Чтобы поддерживать организованность определений типов, вы можете имитировать структуру пакета в ваших файлах определения типов: ``` src/ types/ foo/ index.d.ts bar/ baz.d.ts ``` Этот подход позволяет поддерживать структуру вашего кода TypeScript и его типобезопасность, даже при работе с вложенными JavaScript-файлами. TypeScript по-прежнему будет выдавать ошибку, если вы поместите два дополнения модулей (`declare module ...`) в один файл.