Как настроить пользовательские глобальные интерфейсы (файлы .d.ts) для TypeScript?

Я борется с этой проблемой в течение последних нескольких часов, и я просто не могу найти что-либо в Интернете, которое бы четко объясняло это, предположительно, простую концепцию.

В настоящее время я работаю над проектом ReactJS, который использует Webpack2 и TypeScript. Все работает отлично, кроме одного - я не могу найти способ переместить интерфейсы, которые я написал себе в отдельные файлы, чтобы они были видны для всего приложения.

В целях прототипирования у меня первоначально были интерфейсы, определенные в файлах, которые их используют, но в конце концов я начал добавлять некоторые, которые были необходимы в нескольких классах, и когда все проблемы начались. Независимо от того, какие изменения я внес в свой tsconfig.json, и независимо от того, где я помещал файлы, моя IDE и Webpack жалуются на то, что не могут найти имена (Could not find name 'IMyInterface').

Здесь мой текущий tsconfig.json файл:

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

Как вы можете видеть, мой tsconfig.json находится в корне каталога проекта, весь источник находится в ./src, я поместил свои пользовательские .d.ts файлы в ./typings и включил его в typeRoots.

Я тестировал его с помощью TypeScript 2.1.6 и 2.2.0 и не работал.

Один из способов заставить все это работать - переместить мой каталог typings в src, а затем import {IMyInterface} from 'typings/blah', но это мне не нравится, поскольку это не то, что мне нужно использовать. Я хочу, чтобы эти интерфейсы были "волшебными" доступны во время моего приложения.

Edit: Вот пример файла app.d.ts:

interface IAppStateProps {
}

interface IAppDispatchProps {
}

interface IAppProps extends IAppStateProps, IAppDispatchProps {
}

Нужно ли мне export их или, может быть, declare? Надеюсь, мне не нужно обертывать их в пространство имен?!

Ответ 1

"Магически доступные интерфейсы" или глобальные типы сильно обескуражены и в основном должны быть оставлены в наследство. Кроме того, вы не должны использовать файлы декларации окружающей среды (например, d.ts files) для кода, который вы пишете. Они предназначены для того, чтобы стоять на месте внешнего кода typescript (по существу заполняя типы typescript в js-код, чтобы вы могли лучше интегрировать его с javascript).

Для кода, который вы пишете, вы должны использовать простые файлы .ts для определения ваших интерфейсов и типов.

В то время как глобальные типы обескуражены, ответ на вашу проблему состоит в том, что в Typescript есть два типа файлов .ts. Они называются scripts и modules.

Все, что есть в script, будет глобальным. Поэтому, если вы определяете свои интерфейсы в script, он будет доступен по всему миру во всем приложении (если script включен в компиляцию с помощью тегов ///<reference path=""> или через files:[] или includes:[]) или по умолчанию **/*.ts в tsconfig.json.

Другим типом файла является "модуль", и все, что содержится в module, будет закрыто для модуля. Если вы экспортируете что-либо из модуля, он будет доступен для других модулей, если эти другие модули захотят импортировать его.

Что делает файл .ts a "script" или "module"? Ну... если вы используете import/export в любом месте файла, этот файл становится "модулем". Если нет операторов import/export, то это глобальный script.

Я предполагаю, что вы случайно использовали import или export в своих объявлениях и превратили его в модуль, который превратил все ваши интерфейсы в закрытый в этом модуле. Если вы хотите, чтобы они были глобальными, вы должны убедиться, что вы не используете инструкции импорта/экспорта в своем файле.