Используя SweetAlert2 с TypeScript, не удалось найти файл объявления для модуля «sweetalert2/dist/sweetalert2.js».

Я переношу один из своих проектов на TypeScript, в этом проекте используется библиотека SweetAlert2.

Способ по умолчанию для импорта SweetAlert2 (как JS, так и CSS):

import Swal from 'sweetalert2'

Это прекрасно работает с TypeScript, потому что в библиотеке есть типы: https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts

Но в моем проекте способ импорта таков:

import Swal from 'sweetalert2/dist/sweetalert2.js'

Это импорт только для JS, без стилей. С этим типом импорта я получаю ошибку TS:

Could not find a declaration file for module 'sweetalert2/dist/sweetalert2.js'. 

ts(7016)

Я попытался скопировать sweetalert2/sweetalert2.d.ts в sweetalert2/dist/sweetalert2.d.ts, но получил другую ошибку:

File 'node_modules/sweetalert2/dist/sweetalert2.d.ts' is not a module. 

ts(2306)

Что здесь происходит и почему ТС жалуется на то, что dist/sweetalert2.d.ts не является модулем?


typescript javascript typescript-typings sweetalert2 javascript-import
person Limon Monte    schedule 02.08.2019    source источник
comment
Я использую импорт Swal из 'sweetalert2/dist/sweetalert2.js'; в моем файле ts без ошибок.   -  person Sagar Chaudhary    schedule 02.08.2019
comment
@SagarChaudhary Я сделал простое репо с минимальным кодом, чтобы воспроизвести проблему: github.com/limonte/swal-ts Не могли бы вы взглянуть и, возможно, найти разницу между вашим проектом и limonte/swal-ts. Спасибо!   -  person Limon Monte    schedule 02.08.2019

Ответы (2)


arrow_upward
4
arrow_downward

Текущие определения типов SweetAlert не предоставляют типов для «подмодулей». Когда вы используете синтаксис declare module таким образом, вы введите весь пакет «сразу» (то, что пользователь получает при импорте из ^sweetalert2$), но вы не описываете, что находится в отдельных скомпилированных файлах в dist/ точно, так что да, они не могут быть нацелены явно.

Попробуйте полностью удалить блок declare module из скопированного файла. Затем используйте declare namespace Swal, и это сработает.

Мы должны иметь возможность изменять файлы объявлений sweetalert2, чтобы работал как простой импорт, так и импорт подфайлов.

Взгляните, как я набрал graphql-compose, чтобы это стало возможным: graphql-compose

У каждого файла .js есть аналог .d.ts, и больше нет единого файла, описывающего весь модуль с помощью declare module.

Редактировать: я попробовал этот подход в вашем репродукции, он работает хорошо, и мы также можем ввести sweetalert2.all.js. Однако следующее решение может быть проще (меньше файлов, более простые сценарии сборки). Подход отображения 1:1 лучше, но, вероятно, больше подходит для больших библиотек.

Другая возможность — добавить записи declare module 'sweetalert2/dist/{**}' в один файл sweetalert2.d.ts, который реэкспортирует содержимое модуля по умолчанию для каждого варианта dist/:

declare module 'sweetalert2' {
    // Current contents of the file, unchanged
}

declare module 'sweetalert2/dist/sweetalert2.js' {
    export * from 'sweetalert2';
    // "export *" does not matches the default export, so do it explicitly.
    export { default } from 'sweetalert2';
}

declare module 'sweetalert2/dist/sweetalert2.all.js' {
    export * from 'sweetalert2';
    export { default } from 'sweetalert2';
}
person Morgan Touverey Quilling    schedule 02.08.2019
comment
Спасибо, Морган! Для справки, PR с исправлением: github.com/sweetalert2/sweetalert2/pull/1693< /а> - person Limon Monte; 02.08.2019

arrow_upward
2
arrow_downward

Я столкнулся с той же проблемой, но нашел решение по вашим ссылкам sweetalert2.

Следуйте разделу ИСПОЛЬЗОВАНИЕ.

i was using in import SWAl from "sweetalert2/dist/sweetalert2.js".

это работает в новом проекте, но не в моем старом проекте. поэтому я переехал сюда и получил свое решение. просто заменен на sweetalert2/dist/sweetalert2.js на sweetalert2

import Swal from 'sweetalert2';

все должны также сосредоточиться на этой линии. я удалил css и js из файла angular.json Sweetalert2.

проверьте эти шаги

проекты -> архитектор -> тест -> опции -> стили:[] и скрипты:[]

person pankaj kumar    schedule 05.01.2021