`babel-plugin-реагировать-css-modules` Проверка типов текста

Question

Я использую babel-plugin-react-css-modules, Это добавить styleName свойство к элементам HTML. Typescript не распознает это свойство. Я почти уверен, что мне нужно что-то расширить, но ничего из того, что я пробовал, не сработало.

Я пытался объявить Element в файле '.d.ts', чтобы сделать слияние декларации, но я должен сделать что-то не так.

interface Element {
    styleName: string;
}

export const Wrapper: React.FC<IWrapperProps> = ({ children, style }) => (
  <div styleName="wrapper" style={style}>
    {children}
  </div>
);

ОБНОВИТЬ:

.d.ts не работает

Answer 1

Добавлять @types/react-css-modules на ваш package.json и styleName будет признано:

npm install @types/react-css-modules --save-dev

Answer 2

Поскольку вы находитесь в модуле (он имеет экспорт), вы работаете с отдельной областью действия от глобальной области действия, поэтому вы просто создаете интерфейс с именем Element это отдельно от глобальной декларации.

Я бы поместил интерфейс в отдельный файл без экспорта / импорта (augmentations.d.ts) и добавить это к вашему tsconfig.json,

Answer 3

Лучший вариант:

1. использовать babel-loader с участием babel-plugin-react-css-modules plugin, за которым следует 'ts-loader' (обратите внимание, что загрузчики запускаются в обратном порядке)

Конфигурация webpack для этого выглядит примерно так:

      {
          test: /\.tsx?/,
          exclude: '/node_modules/',
          use: [
            { loader: 'ts-loader' },
            {
              loader: 'babel-loader',
              options: {
                babelrc: false,
                "plugins": [
                  ["@babel/plugin-syntax-typescript",
                {
                  isTSX: true
                }],
                  "@babel/plugin-syntax-jsx",
                  [
                    "babel-plugin-react-css-modules",
                    {
                      "handleMissingStyleName": "throw"
                    }
                  ]
                ]
              }
            },
          ]
        }

Исключая babelrc как babel, если они используются для компиляции файлов .js, они не должны мешать компиляции машинописного текста.

• babel-loader запускается первым, обрабатывает свойства styleName, но оставляет машинописный текст как есть.

• Затем запускается ts-loader, проверяет тип и транслирует машинописный текст.

Альтернатива Менее удачный вариант.

2. не используйте ts-loader для компиляции файлов .ts[x]. Это работает, но означает, что вы не получаете проверку типов во время компиляции. (какой вид побеждает смысл использования ts вместо js)