Как настроить определение машинописного проигрывателя Azure Media Player в Angular 10

У меня возникли проблемы с настройкой определения машинописного текста для проигрывателя Azure Media Player в проекте Angular 10. Я использую файл *.d.ts из документации.

Я попытался настроить определение с помощью typeRoots в файле tsconfig.json:

"typeRoots": [ "./src/types/", "./node_modules/@types"],

Я нашел противоречивые руководства, которые требуют, чтобы папка, содержащая типы, находилась либо на корневом уровне, либо внутри папки src. Сейчас файл azuremediaplayer.d.ts находится в папке ./src/types/azuremediaplayer/.

В файле tsconfig есть ошибка Cannot find type definition file for 'azuremediaplayer'.

В своем компоненте я скопировал и вставил код из официальной документации, без функций (которые выдавали ошибки).

ngOnInit(): void {
    var myPlayer = amp('vid1', {
      "nativeControlsForTouch": false,
      autoplay: false,
      controls: true,
      width: "640",
      height: "400",
      poster: ""
    });
    myPlayer.src([{
      src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
      type: "application/vnd.ms-sstr+xml"
    }])

  }

Если я нажму ctrl+click amp из приведенного выше кода, я попаду в файл .d.ts, но некоторые параметры из вызова функции выдают ошибки:

Argument of type '{ nativeControlsForTouch: boolean; autoplay: false; controls: true; width: string; height: string; poster: string; }' is not assignable to parameter of type 'Options'.


Object literal may only specify known properties, and '"nativeControlsForTouch"' does not exist in type 'Options'.

Никаких ошибок не появляется, когда инициализация выглядит так:

var myPlayer = amp('vid1', {
      autoplay: false,
      controls: true,
      poster: ""
    });
    myPlayer.src([{
      src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
      type: "application/vnd.ms-sstr+xml"
    }])

  }

Плеер работает, если он прописан в html файле.

Я также пробовал шаги, описанные в этом ответе: если я ссылаюсь на файл с помощью /// <reference path="../../../types/azuremediaplayer/azuremediaplayer.d.ts" />, ничего не меняется, но нет ошибки в json. Если я добавлю файл в свое свойство files: [], amp() не распознается. Если я добавлю "include": ["src/**/*"], это то же самое, что использовать typeRoot, с теми же ошибками.

Как настроить плеер, чтобы он работал?


typescript angular angular10 azure-media-player
person Bogdan Marcu    schedule 21.08.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не думаю, что это зависит от фреймворка, поэтому я опишу шаги, которые я сделал, когда реализовал это в приложении React с помощью Typescript, где это работает для меня.

Я сохранил файл определения типа в:

src/video-player/amp/azuremediaplayer.min.d.ts

Я добавил свойство typeRoots в свой tsconfig.json. Обратите внимание, что ваш проект может использовать несколько файлов конфигурации typescript. Например: в моем проекте у меня есть вариант по умолчанию и tsconfig.package.json для публикации npm. Это моя конфигурация typeRoots в обоих tsconfig.files:

 "typeRoots": ["node_modules/@types", "src/video-player/amp"]

Затем в моем файле компонента .tsx я могу использовать определение машинописного текста amp, например:

readonly options: amp.Player.Options;

Судя по вашему описанию, вы правильно настроили типизацию. Соответствует ли версия файла типизации версии усилителя, полученной из CDN? (Я использую последнюю версию 2.3.5). Если это так, в официальном файле типизации может быть ошибка/неточность — я вижу ваше свойство nativeControlsForTouch options в минимизированном скрипте, полученном из CDN, однако этого свойства нет в файле типизации. ¯\(ツ)/¯

Примечание. Жаль, что amp не имеет открытого исходного кода и не доступен для ввода через npm. Рассмотрите возможность голосования здесь.

person Martin Makarsky    schedule 11.09.2020